Add Clock Sample

README.md

@@ -152,6 +152,8 @@ Install-Package DevWinUI
 
 - ✨ DateTimePicker
 - ✨ CalendarWithClock
+- ✨ Clock
+- ✨ CirclePanel
 - ✨ CalendarView Style
 - ✨ ProgressButton
 - ✨ TextBox
@@ -258,6 +260,9 @@ Install-Package DevWinUI.ContextMenu
 ### CalendarWithClock
 ![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/CalendarWithClock.gif)
 
+### Clock
+![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/Clock.gif)
+
 ### ProgressButton
 ![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/ProgressButton.gif)
 

dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json

@@ -94,6 +94,13 @@
       "ImagePath": "ms-appx:///Assets/Fluent/RatingControl.png",
       "IsSpecialSection": false,
       "Items": [
+        {
+          "UniqueId": "DevWinUIGallery.Views.ClockPage",
+          "Title": "Clock",
+          "Subtitle": "Analog Clock",
+          "IsNew": true,
+          "ImagePath": "ms-appx:///Assets/Fluent/Clock.png"
+        },
         {
           "UniqueId": "DevWinUIGallery.Views.DateTimePickerPage",
           "Title": "DateTimePicker",

dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs

@@ -25,6 +25,7 @@ public partial class NavigationPageMappings
         {"DevWinUIGallery.Views.WaveCirclePage", typeof(DevWinUIGallery.Views.WaveCirclePage)},
         {"DevWinUIGallery.Views.BubblePage", typeof(DevWinUIGallery.Views.BubblePage)},
         {"DevWinUIGallery.Views.GooeyPage", typeof(DevWinUIGallery.Views.GooeyPage)},
+        {"DevWinUIGallery.Views.ClockPage", typeof(DevWinUIGallery.Views.ClockPage)},
         {"DevWinUIGallery.Views.DateTimePickerPage", typeof(DevWinUIGallery.Views.DateTimePickerPage)},
         {"DevWinUIGallery.Views.CalendarWithClockPage", typeof(DevWinUIGallery.Views.CalendarWithClockPage)},
         {"DevWinUIGallery.Views.RichTextFormatterPage", typeof(DevWinUIGallery.Views.RichTextFormatterPage)},

dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page x:Class="DevWinUIGallery.Views.ClockPage"
+      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:dev="using:DevWinUI"
+      xmlns:local="using:DevWinUIGallery"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <ScrollViewer>
+        <StackPanel Margin="10"
+                    dev:PanelAttach.ChildrenTransitions="Default"
+                    Spacing="10">
+            <local:ControlExample DocPage="controls/clock"
+                                  HeaderText="Analog Clock">
+                <local:ControlExample.Xaml>
+                    <x:String>&lt;dev:Clock /&gt;</x:String>
+                </local:ControlExample.Xaml>
+                <dev:Clock />
+            </local:ControlExample>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml.cs

@@ -0,0 +1,9 @@
+namespace DevWinUIGallery.Views;
+
+public sealed partial class ClockPage : Page
+{
+    public ClockPage()
+    {
+        this.InitializeComponent();
+    }
+}

dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml

@@ -32,6 +32,7 @@
                     </StackPanel>
                 </local:ControlExample.Pane>
                 <dev:DateTimePicker x:Name="DateTimePickerSample"
+                                    HorizontalAlignment="Center"
                                     VerticalAlignment="Top"
                                     ConfirmButtonContent="{x:Bind TxtConfirm.Text, Mode=OneWay}"
                                     Description="Choose your Date and Time from CalendarView and Clock"
@@ -76,6 +77,7 @@
                     </StackPanel>
                 </local:ControlExample.Pane>
                 <dev:DateTimePicker x:Name="DateTimePickerSample2"
+                                    HorizontalAlignment="Center"
                                     VerticalAlignment="Top"
                                     ClockMode="TimePicker"
                                     ConfirmButtonContent="{x:Bind TxtConfirm2.Text, Mode=OneWay}"