Develop Animated Clock Using WPF

Step 1: Create a new WPF Project in VS.Net.

Step 2: Drag and Drop 3 Rectangles and 2 Eclipses and 4 Labels to indicate the time number and set the height and width as per our Look and Feel Design and set the content of Label.

<Window x:Class="Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="CLock" Height="817.388" Width="1000" WindowStyle="ThreeDBorderWindow" Foreground="BurlyWood" Topmost="False" WindowStartupLocation="CenterScreen" WindowState="Maximized" Name="Window1">

    <Grid ShowGridLines="True" Background="SteelBlue">

        <Border Margin="34.296,32.867,54.302,11.432" Name="Border1" Background="LightSteelBlue">

            <Grid Height="425.842" Name="Grid1" Width="770.231">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="95.051*" />

                    <ColumnDefinition Width="675.18*" />

                </Grid.ColumnDefinitions>

                <Ellipse Grid.Column="1" Margin="20.006,-12.861,119.174,-97.172" Name="Ellipse1" Stroke="Black" Fill="Snow" />

                <Rectangle Fill="Brown" Height="4" Margin="287.229,0,171.48,161.764" Name="Rectangle2" Stroke="Black" VerticalAlignment="Bottom" Grid.Column="1" />

                <Rectangle Fill="Black" Height="5" Margin="287.229,0,201.489,164.335" Name="Rectangle1" Stroke="Black" VerticalAlignment="Bottom" Grid.Column="1" />

                <Label Grid.Column="1" Height="48.586" Margin="261.507,0,0,0" Name="Label1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="48.586" Foreground="BlueViolet" FontSize="28">

                    <Label.BitmapEffect>

                        <EmbossBitmapEffect />

                    </Label.BitmapEffect> 12</Label>

                <Label FontSize="28" Foreground="BlueViolet" Height="48.586" Margin="37.154,0,0,144.329" Name="Label2" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Left" Width="48.586">

                    <Label.BitmapEffect>

                        <EmbossBitmapEffect />

                    </Label.BitmapEffect> 9

                </Label>

                <Label FontSize="28" Foreground="BlueViolet" Height="48.586" Margin="261.507,0,0,-97.172" Name="Label3" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Left" Width="48.586">

                    <Label.BitmapEffect>

                        <EmbossBitmapEffect />

                    </Label.BitmapEffect> 6

                </Label>

                <Label FontSize="28" Foreground="BlueViolet" Height="48.586" Margin="0,0,119.174,144.329" Name="Label4" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Right" Width="48.586">

                    <Label.BitmapEffect>

                        <EmbossBitmapEffect />

                    </Label.BitmapEffect> 3

                </Label>

                <Rectangle Fill="Yellow" Height="6.429" Margin="287.229,0,248.646,162.906" Name="Rectangle3" Stroke="Black" VerticalAlignment="Bottom" Grid.Column="1" />

                <Ellipse Fill="Black" Height="47.157" Margin="264.365,0,0,144.329" Name="Ellipse2" Stroke="Black" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Left" Width="45.728" />

            </Grid>

        </Border>

    </Grid>

</Window>

Step 3: Create 3 different procedures to do animation.

Private Sub Minit()
        Dim da As New Animation.DoubleAnimation()
        da.From = 0
        da.[To] = 360
        da.Duration = New Duration(TimeSpan.FromSeconds(3600))
        da.RepeatBehavior = Animation.RepeatBehavior.Forever
        Dim rt As New RotateTransform()
        Rectangle1.RenderTransform = rt
        rt.BeginAnimation(RotateTransform.AngleProperty, da)
    End Sub
    Private Sub Second()
        Dim da As New Animation.DoubleAnimation()
        da.From = 0
        da.[To] = 360
        da.Duration = New Duration(TimeSpan.FromSeconds(60))
        da.RepeatBehavior = Animation.RepeatBehavior.Forever
        Dim rt As New RotateTransform()
        Rectangle2.RenderTransform = rt
        rt.BeginAnimation(RotateTransform.AngleProperty, da)
    End Sub
    Private Sub Hours()
        Dim da As New Animation.DoubleAnimation()
        da.From = 0
        da.[To] = 360
        da.Duration = New Duration(TimeSpan.FromSeconds(3600 * 60))
        da.RepeatBehavior = Animation.RepeatBehavior.Forever
        Dim rt As New RotateTransform()
        Rectangle3.RenderTransform = rt
        rt.BeginAnimation(RotateTransform.AngleProperty, da)
End Sub

Step 4: Call for Page Loaded.

Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

        Second()

        Minit()

        Hours()

    End Sub