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.
This commit is contained in:
rabbitism
2024-09-06 11:36:19 +08:00
parent c24d72e51a
commit 735e8b77b8

View File

@@ -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>