Create a digital clock using only xaml code in wpf

Question

I wonder if it is possible to create a digital clock in xaml using animation (without background code tags)

The analog clock can be realized by converting the current ti

Answer 1

I recommend you do it based on textblocks and a suitable font like this one:

https://www.keshikan.net/fonts-e.html

Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();' here is a XAML-Example:

            <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
                <Grid>  
                    <!-- Displays the actual time in red-->
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="{Binding Hour, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
                        <TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="{Binding Min, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
                        <TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="{Binding Sec, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                    </StackPanel>
                    <!-- Creates a Glow Effect -->
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <StackPanel.Effect>
                            <BlurEffect KernelType="Gaussian" Radius="3"/>
                        </StackPanel.Effect>
                        <TextBlock Foreground="Red" FontSize="20" Text="{Binding Hour, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" Text="{Binding Min, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
                        <TextBlock Foreground="Red" FontSize="20" Text="{Binding Sec, FallbackValue=00, StringFormat=00}" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                    </StackPanel>
                    <!-- Creates the effect of turned of segments -->
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
                        <TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                        <TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
                        <TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
                    </StackPanel>
                </Grid>
            </Border>

it would be even easier using only one textblock and a string format but this example I already had lying around :)

Answer 2

Maybe this is the answer you want :)

<Window x:Class="WpfApp6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:system="clr-namespace:System;assembly=System.Runtime"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Grid>
        <Grid.Resources>
            <!--Set x: share to get the latest every time-->
            <system:DateTime x:Key="DateTime"
                            x:Shared="False" />
            <Storyboard x:Key="Storyboard">
                <!--Use keyframe animation to update datetime -->
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="DataContext"
                                            Duration="0:0:1"
                                            RepeatBehavior="Forever"
                                            AutoReverse="False">
                    <DiscreteObjectKeyFrame KeyTime="50%"
                                            Value="{StaticResource DateTime}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <!--Get datetime from DataContext-->
        <TextBlock Text="{Binding RelativeSource={RelativeSource Self},Path=DataContext.Now}"
                DataContext="{StaticResource DateTime}">
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard}" />
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>