From 735e8b77b8550cca1a5c20e9ab16dbbdd0bfdbd3 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 6 Sep 2024 11:36:19 +0800
Subject: [PATCH] feat:Improve DateTimePickerDemo UX and layout

Refactor the DateTimePickerDemo axaml file to enhance user experience and layout by introducing a form structure with labeled text boxes for custom formatting options, binding these inputs to the DateTimePicker's display and panel formats, and adjusting stack panel alignment and spacing for better readability.
---
 demo/Ursa.Demo/Pages/DateTimePickerDemo.axaml | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/DateTimePickerDemo.axaml b/demo/Ursa.Demo/Pages/DateTimePickerDemo.axaml
index 19ed7a0..4f863eb 100644
--- a/demo/Ursa.Demo/Pages/DateTimePickerDemo.axaml
+++ b/demo/Ursa.Demo/Pages/DateTimePickerDemo.axaml
@@ -1,12 +1,30 @@
-<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:u="https://irihi.tech/ursa"
-             mc:Ignorable="d" d:DesignWidth="800"
-             d:DesignHeight="450"
-             x:Class="Ursa.Demo.Pages.DateTimePickerDemo">
-    <StackPanel Margin="20" Spacing="">
-        <u:DateTimePicker Width="300" PanelFormat="hh mm ss tt" Classes="ClearButton"/>
+<UserControl
+    x:Class="Ursa.Demo.Pages.DateTimePickerDemo"
+    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:u="https://irihi.tech/ursa"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel
+        Margin="20"
+        HorizontalAlignment="Left"
+        Spacing="20">
+        <u:Form>
+            <TextBox
+                u:FormItem.Label="DisplayFormat"
+                Name="formatBox"
+                Width="300"
+                Text="yyyy年MM月dd日 HH时mm分ss秒" />
+            <TextBox Name="panelBox" u:FormItem.Label="Panel" Text="hh mm ss" />
+            <u:DateTimePicker
+                MinWidth="100"
+                u:FormItem.NoLabel="True"
+                Classes="ClearButton"
+                DisplayFormat="{Binding #formatBox.Text}"
+                PanelFormat="{Binding #panelBox.Text}" />
+        </u:Form>
     </StackPanel>
 </UserControl>