LanMountainDesktop/LanMontainDesktop/Views/Components/WeatherClockWidget.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:fi="using:FluentIcons.Avalonia"
             mc:Ignorable="d"
             d:DesignWidth="260"
             d:DesignHeight="120"
             x:Class="LanMontainDesktop.Views.Components.WeatherClockWidget">

    <Border x:Name="RootBorder"
            Background="#FFFFFF"
            BorderBrush="#14000000"
            BorderThickness="1"
            CornerRadius="22"
            ClipToBounds="True"
            Padding="12,8">
        <Grid x:Name="ContentGrid"
              ColumnDefinitions="*,Auto"
              ColumnSpacing="10">
            <StackPanel x:Name="LeftStack"
                        ClipToBounds="True"
                        VerticalAlignment="Center"
                        Spacing="2">
                <TextBlock x:Name="TimeTextBlock"
                           Text="15:07"
                           FontSize="36"
                           FontWeight="Bold"
                           FontFeatures="tnum"
                           Foreground="#10131A"
                           MaxLines="1"
                           TextWrapping="NoWrap"
                           TextTrimming="CharacterEllipsis" />

                <StackPanel x:Name="DateWeatherStack"
                            Orientation="Horizontal"
                            Spacing="6"
                            VerticalAlignment="Center">
                    <TextBlock x:Name="DateTextBlock"
                               Text="8&#x6708;14&#x65E5;"
                               FontSize="18"
                               FontWeight="SemiBold"
                               Foreground="#7A7E87"
                               VerticalAlignment="Center"
                               MaxLines="1"
                               TextWrapping="NoWrap"
                               TextTrimming="CharacterEllipsis" />

                    <fi:SymbolIcon x:Name="WeatherIconSymbol"
                                   Symbol="WeatherPartlyCloudyDay"
                                   FontSize="18"
                                   Foreground="#5A9CFF"
                                   VerticalAlignment="Center"
                                   IconVariant="Regular" />
                </StackPanel>
            </StackPanel>

            <Border x:Name="AnalogDialBorder"
                    Grid.Column="1"
                    Width="52"
                    Height="52"
                    CornerRadius="26"
                    Background="#F8FAFF"
                    BorderBrush="#12000000"
                    BorderThickness="1"
                    VerticalAlignment="Center">
                <Viewbox Stretch="Uniform">
                    <Grid Width="104"
                          Height="104">
                        <Canvas x:Name="TickCanvas"
                                Width="104"
                                Height="104"
                                IsHitTestVisible="False" />

                        <Canvas x:Name="HandsCanvas"
                                Width="104"
                                Height="104"
                                IsHitTestVisible="False" />

                        <Ellipse x:Name="CenterDotOuter"
                                 Width="12"
                                 Height="12"
                                 Fill="#4F7CC0"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center" />

                        <Ellipse x:Name="CenterDotInner"
                                 Width="5"
                                 Height="5"
                                 Fill="#1A74F2"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center" />
                    </Grid>
                </Viewbox>
            </Border>
        </Grid>
    </Border>
</UserControl>