Avalonia 開發 分別選擇日期(DatePicker)/時間(TimePicker)的介面UI
Avalonia 開發 分別選擇日期(DatePicker)/時間(TimePicker)的介面UI
資料來源: copilot+自己
XAML
<Window 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" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="VPOS_Avalonia.DateTimePicker" Title="DateTimePicker" Loaded="Window_Loaded"> <Border BorderBrush="LightBlue" BorderThickness="5" CornerRadius="10" Margin="-3"> <Grid x:Name="FullGrid" RowDefinitions="1.5*,6*,2.5*" ColumnDefinitions="*" > <Border BorderBrush="Blue" BorderThickness="1" CornerRadius="10" Margin="0" Grid.Row="0" Grid.Column="0"> <Grid x:Name="HeadGrid" RowDefinitions="*" ColumnDefinitions="*"> <TextBlock x:Name="TitleLable" Text="日期/時間 選擇" Foreground="White" FontSize="22" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Button x:Name="CloseBtn" Content="X" Grid.Row="0" Grid.Column="0" FontSize="20" Background="Transparent" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0" Click="CloseBtn_Clicked"/> </Grid><!--HeadGrid End--> </Border> <Border x:Name="BodyBorder" BorderBrush="White" BorderThickness="1" CornerRadius="10" Margin="5" Grid.Row="1" Grid.Column="0"> <Grid x:Name="BodyGrid" RowDefinitions="*,*" ColumnDefinitions="1*,1.5*,30,1.5*,*" Margin="20,0,10,0"> <TextBlock Text="日期:" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="0" Grid.Column="0" /> <DatePicker x:Name="DatePicker01" Width="300" VerticalAlignment="Center" HorizontalAlignment="Left" Background="White" FontSize="22" Grid.Row="0" Grid.Column="1" Margin="5"/> <TextBlock Text="時間:" VerticalAlignment="Center" Foreground="White" FontSize="20" Grid.Row="1" Grid.Column="0" /> <TimePicker Name="TimePicker" Width="300" VerticalAlignment="Center" HorizontalAlignment="Left" Background="White" FontSize="22" Grid.Row="1" Grid.Column="1" Margin="5"/> </Grid> </Border> <Grid x:Name="FooterGrid" RowDefinitions="*" ColumnDefinitions="0.2*,*,*,0.2*" Grid.Row="2" Grid.Column="0" > <Button x:Name="FooterBtn01" Content="確定" Foreground="White" Background="#cc6600" Grid.Row="0" Grid.Column="1" Click="FooterBtn01_Clicked" FontSize="20" Height="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="30,0"/> <Button x:Name="FooterBtn02" Content="取消" Foreground="White" Background="#cc6600" Grid.Row="0" Grid.Column="2" Click="CloseBtn_Clicked" FontSize="20" Height="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="30,0"/> </Grid> </Grid><!--FullGrid End--> </Border> </Window>
CODE
using Avalonia; using Avalonia.Controls; using Avalonia.Interactivity; using Avalonia.Markup.Xaml; using Avalonia.Media; using System; using VPOS_Avalonia.ViewModels; namespace VPOS_Avalonia; public partial class DateTimePicker : Window { public static bool m_blnRun = false; public static string m_StrResult = ""; public DateTimePicker() { //隱藏工具列 this.ExtendClientAreaToDecorationsHint = true; this.ExtendClientAreaTitleBarHeightHint = -1; this.SystemDecorations = SystemDecorations.None; //---隱藏工具列 WindowStartupLocation = WindowStartupLocation.CenterScreen;//視窗置中 this.Background = new SolidColorBrush(Color.Parse("#ff194a6e"));//設定背景色 //this.WindowState = WindowState.Maximized;//視窗最大化非滿版 InitializeComponent(); this.Width = 500; this.Height = 300; FullGrid.IsVisible = false; } public void Window_Loaded(object sender, RoutedEventArgs e) { FullGrid.IsVisible = true; DatePicker01.SelectedDate = DateTime.Now.Date; // 設置初始日期 TimePicker.SelectedTime = DateTime.Now.TimeOfDay; // 設置初始時間 } private void CloseBtn_Clicked(object sender, RoutedEventArgs e) { m_blnRun = false; m_StrResult = ""; Close(); } private void FooterBtn01_Clicked(object sender, RoutedEventArgs e) { if((DatePicker01.SelectedDate!=null) &&(TimePicker.SelectedTime!=null)) { m_blnRun = true; m_StrResult = DatePicker01.SelectedDate.Value.Date.ToString("yyyy-MM-dd") + $" {TimePicker.SelectedTime.Value.Hours.ToString().PadLeft(2,'0')}:{TimePicker.SelectedTime.Value.Minutes.ToString().PadLeft(2, '0')}:00"; this.Close(); } } }