From b33c22f1380da9807b4ff279f66fffc237f4dc28 Mon Sep 17 00:00:00 2001
From: Mahdi Hosseini <mahdidvb72@gmail.com>
Date: Sat, 21 Dec 2024 20:36:40 +0330
Subject: [PATCH] Add Clock Sample

---
 README.md                                     |   5 ++++
 dev/DevWinUI.Gallery/Assets/Fluent/Clock.png  | Bin 0 -> 7447 bytes
 .../Assets/NavViewMenu/AppData.json           |   7 +++++
 .../T4Templates/NavigationPageMappings.cs     |   1 +
 .../Views/Pages/Features/ClockPage.xaml       |  24 ++++++++++++++++++
 .../Views/Pages/Features/ClockPage.xaml.cs    |   9 +++++++
 .../Pages/Features/DateTimePickerPage.xaml    |   2 ++
 7 files changed, 48 insertions(+)
 create mode 100644 dev/DevWinUI.Gallery/Assets/Fluent/Clock.png
 create mode 100644 dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml
 create mode 100644 dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml.cs

diff --git a/README.md b/README.md
index ee2d672..bb00591 100644
--- a/README.md
+++ b/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)
 
diff --git a/dev/DevWinUI.Gallery/Assets/Fluent/Clock.png b/dev/DevWinUI.Gallery/Assets/Fluent/Clock.png
new file mode 100644
index 0000000000000000000000000000000000000000..1576a8abe204fbc278a079895f7b605db0fbda53
GIT binary patch
literal 7447
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
NR?v{IerXZ${{Z;p<-`C0

literal 0
HcmV?d00001

diff --git a/dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json b/dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json
index 7bf232d..b169add 100644
--- a/dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json
+++ b/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",
diff --git a/dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs b/dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs
index 102b8a6..935d1d2 100644
--- a/dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs
+++ b/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)},
diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml b/dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml
new file mode 100644
index 0000000..f6c2596
--- /dev/null
+++ b/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>
diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml.cs b/dev/DevWinUI.Gallery/Views/Pages/Features/ClockPage.xaml.cs
new file mode 100644
index 0000000..ec0634f
--- /dev/null
+++ b/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();
+    }
+}
diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml b/dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml
index 6ba2e89..ea69a7a 100644
--- a/dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml
+++ b/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}"