📄 src/App/Views/Panels/DateTimePanel.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:p="using:MMirror.App.Views.Panels"
             xmlns:vm="using:MMirror.App.ViewModels.Panels"
             mc:Ignorable="d"
             d:DesignWidth="720"
             d:DesignHeight="1280"
             x:Class="MMirror.App.Views.Panels.DateTimePanel"
             x:DataType="vm:DateTimePanelViewModel">
    <Design.DataContext>
        <vm:DateTimePanelViewModel/>
    </Design.DataContext>
    <UserControl.Resources>
        <p:TranslateXConverter x:Key="translateXConverter" />
    </UserControl.Resources>
    <UserControl.Styles>
        <Style Selector="StackPanel#clock">
            <Setter Property="RenderTransform" Value="{Binding #seconds.DesiredSize.Width, Converter={StaticResource translateXConverter}}" />
            <Setter Property="Transitions">
                <Transitions>
                    <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
                </Transitions>
            </Setter>
        </Style>
        <Style Selector=".active StackPanel#clock">
            <Setter Property="RenderTransform" Value="translateX(0px)" />
        </Style>
        <Style Selector="TextBlock#seconds">
            <Setter Property="Foreground" Value="Transparent" />
            <Setter Property="Transitions">
                <Transitions>
                    <BrushTransition Property="Foreground" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
                </Transitions>
            </Setter>
        </Style>
        <Style Selector=".active TextBlock#seconds">
            <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
        </Style>
    </UserControl.Styles>

    <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Spacing="8" TextElement.FontFeatures="+tnum">
        <TextBlock Classes="h1" Text="{Binding CurrentTime, StringFormat=yyyy-MM-dd}"/>
        <StackPanel Name="clock" Orientation="Horizontal" HorizontalAlignment="Right">
            <TextBlock Classes="h1" Text="{Binding CurrentTime, StringFormat=HH:mm}" />
            <TextBlock Name="seconds" Classes="h1" Text="{Binding CurrentTime, StringFormat=:ss}" />
        </StackPanel>
    </StackPanel>
</UserControl>