feat: add demo, fix clear button of TimeRangePicker.

This commit is contained in:
Dong Bin
2025-02-19 22:09:27 +08:00
parent 6461490c34
commit fa5c9d1125
15 changed files with 180 additions and 67 deletions

View File

@@ -1,24 +1,28 @@
<UserControl xmlns="https://github.com/avaloniaui"
<UserControl
x:Class="Ursa.Demo.Pages.DatePickerDemo"
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"
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:DataType="viewModels:DatePickerDemoViewModel"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.DatePickerDemo">
mc:Ignorable="d">
<StackPanel Margin="20" HorizontalAlignment="Left">
<u:Form>
<u:DatePicker Width="200" u:FormItem.Label="_Test"/>
<TextBox Width="200" u:FormItem.Label="_West"/>
</u:Form>
<u:CalendarView DateSelected="CalendarView_OnOnDateSelected" DatePreviewed="CalendarView_OnOnDatePreviewed"/>
<TextBlock Text="{Binding #singlePicker.SelectedDate}" ></TextBlock>
<u:DatePicker Name="singlePicker" Width="200" Classes="ClearButton" />
<u:DateRangePicker Width="300" DisplayFormat="yyyyMMdd" Classes="ClearButton" />
<TextBlock Text="Binding"></TextBlock>
<u:DatePicker Width="200" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
<u:DateRangePicker Width="300" SelectedStartDate="{Binding StartDate}" SelectedEndDate="{Binding EndDate}"/>
<TextBox Name="format" InnerLeftContent="Display Format" />
<TextBlock Text="Default" />
<u:DatePicker Width="200" DisplayFormat="{Binding #format.Text}" />
<TextBlock Text="Binding" />
<u:DatePicker
Width="200"
DisplayFormat="{Binding #format.Text}"
SelectedDate="{Binding SelectedDate, Mode=TwoWay}" />
<TextBlock Text="Clear Button" />
<u:DatePicker
Name="singlePicker"
Width="200"
Classes="ClearButton" />
</StackPanel>
</UserControl>

View File

@@ -10,14 +10,4 @@ public partial class DatePickerDemo : UserControl
{
InitializeComponent();
}
private void CalendarView_OnOnDateSelected(object? _, CalendarDayButtonEventArgs e)
{
Debug.WriteLine("Pressed: "+ e.Date?.ToLongDateString());
}
private void CalendarView_OnOnDatePreviewed(object? _, CalendarDayButtonEventArgs e)
{
Debug.WriteLine("Hovered: "+e.Date?.ToLongDateString());
}
}

View File

@@ -0,0 +1,37 @@
<UserControl
x:Class="Ursa.Demo.Pages.DateRangePickerDemo"
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"
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:DataType="viewModels:DateRangePickerDemoViewModel"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left">
<TextBox
Name="format"
Text="yyyy-MM-dd"
Watermark="Display Format" />
<TextBlock Text="Default" />
<u:DateRangePicker
Width="360"
DisplayFormat="{Binding #format.Text}"
SelectedEndDate="{Binding EndDate}"
SelectedStartDate="{Binding StartDate}" />
<TextBlock Text="Clear Button" />
<u:DateRangePicker
Width="360"
Classes="ClearButton"
DisplayFormat="{Binding #format.Text}" />
<TextBlock Text="Initialized with Binding" />
<u:DateRangePicker
Width="360"
DisplayFormat="{Binding #format.Text}"
SelectedEndDate="{Binding EndDate}"
SelectedStartDate="{Binding StartDate}" />
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,13 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Ursa.Demo.Pages;
public partial class DateRangePickerDemo : UserControl
{
public DateRangePickerDemo()
{
InitializeComponent();
}
}

View File

@@ -43,10 +43,6 @@
InnerRightContent="截止"
NeedConfirmation="True"
PanelFormat="{Binding #panelFormat.Text}" />
<u:TimeRangePicker
Width="300"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
<TextBlock Text="Binding"/>
<u:TimePicker
@@ -55,11 +51,5 @@
SelectedTime="{Binding Time}"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
<u:TimeRangePicker
Width="300"
StartTime="{Binding StartTime}"
EndTime="{Binding EndTime}"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,44 @@
<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:viewModels="clr-namespace:Ursa.Demo.ViewModels"
xmlns:u="https://irihi.tech/ursa"
mc:Ignorable="d" d:DesignWidth="800"
d:DesignHeight="450"
x:DataType="viewModels:TimeRangePickerDemoViewModel"
x:Class="Ursa.Demo.Pages.TimeRangePickerDemo">
<StackPanel HorizontalAlignment="Left">
<TextBox
Name="displayFormat"
Width="300"
InnerLeftContent="Display Format"
Text="HH:mm:ss" />
<TextBox
Name="panelFormat"
Width="300"
InnerLeftContent="Panel Format"
Text="tt HH mm ss" />
<TextBlock Text="Default"/>
<u:TimeRangePicker
Width="300"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
<TextBlock Text="Initialized by Binding"/>
<u:TimeRangePicker
Width="300"
StartTime="{Binding StartTime}"
EndTime="{Binding EndTime}"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
<TextBlock Text="Clear Button"/>
<u:TimeRangePicker
Width="300"
Classes="ClearButton"
DisplayFormat="{Binding #displayFormat.Text}"
PanelFormat="{Binding #panelFormat.Text}" />
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,13 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Ursa.Demo.Pages;
public partial class TimeRangePickerDemo : UserControl
{
public TimeRangePickerDemo()
{
InitializeComponent();
}
}

View File

@@ -7,22 +7,9 @@ namespace Ursa.Demo.ViewModels;
public partial class DatePickerDemoViewModel: ObservableObject
{
[ObservableProperty] private DateTime? _selectedDate;
[ObservableProperty] private DateTime? _startDate;
[ObservableProperty] private DateTime? _endDate;
public DatePickerDemoViewModel()
{
SelectedDate = DateTime.Today;
StartDate = DateTime.Today;
EndDate = DateTime.Today.AddDays(7);
}
protected override void OnPropertyChanged(PropertyChangedEventArgs e)
{
base.OnPropertyChanged(e);
if (e.PropertyName == nameof(SelectedDate))
{
}
}
}

View File

@@ -0,0 +1,16 @@
using System;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.ViewModels;
public partial class DateRangePickerDemoViewModel: ObservableObject
{
[ObservableProperty] private DateTime? _startDate;
[ObservableProperty] private DateTime? _endDate;
public DateRangePickerDemoViewModel()
{
StartDate = DateTime.Today;
EndDate = DateTime.Today.AddDays(7);
}
}

View File

@@ -41,6 +41,7 @@ public partial class MainViewViewModel : ViewModelBase
MenuKeys.MenuKeyClassInput => new ClassInputDemoViewModel(),
MenuKeys.MenuKeyClock => new ClockDemoViewModel(),
MenuKeys.MenuKeyDatePicker => new DatePickerDemoViewModel(),
MenuKeys.MenuKeyDateRangePicker => new DateRangePickerDemoViewModel(),
MenuKeys.MenuKeyDateTimePicker => new DateTimePickerDemoViewModel(),
MenuKeys.MenuKeyDialog => new DialogDemoViewModel(),
MenuKeys.MenuKeyDisableContainer => new DisableContainerDemoViewModel(),
@@ -75,6 +76,7 @@ public partial class MainViewViewModel : ViewModelBase
MenuKeys.MenuKeyTimeBox => new TimeBoxDemoViewModel(),
MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
MenuKeys.MenuKeyTimePicker => new TimePickerDemoViewModel(),
MenuKeys.MenuKeyTimeRangePicker => new TimeRangePickerDemoViewModel(),
MenuKeys.MenuKeyToast => new ToastDemoViewModel(),
MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
MenuKeys.MenuKeyTreeComboBox => new TreeComboBoxDemoViewModel(),

View File

@@ -53,9 +53,11 @@ public class MenuViewModel : ViewModelBase
MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
new() { MenuHeader = "Date Range Picker", Key = MenuKeys.MenuKeyDateRangePicker },
new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
new() { MenuHeader = "Time Picker", Key = MenuKeys.MenuKeyTimePicker },
new() { MenuHeader = "Time Range Picker", Key = MenuKeys.MenuKeyTimeRangePicker },
new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
}
},
@@ -108,6 +110,7 @@ public static class MenuKeys
public const string MenuKeyClassInput = "Class Input";
public const string MenuKeyClock = "Clock";
public const string MenuKeyDatePicker = "DatePicker";
public const string MenuKeyDateRangePicker = "DateRangePicker";
public const string MenuKeyDateTimePicker = "DateTimePicker";
public const string MenuKeyDialog = "Dialog";
public const string MenuKeyDisableContainer = "DisableContainer";
@@ -142,6 +145,7 @@ public static class MenuKeys
public const string MenuKeyTimeBox = "TimeBox";
public const string MenuKeyTimeline = "Timeline";
public const string MenuKeyTimePicker = "TimePicker";
public const string MenuKeyTimeRangePicker = "TimeRangePicker";
public const string MenuKeyToast = "Toast";
public const string MenuKeyToolBar = "ToolBar";
public const string MenuKeyTreeComboBox = "TreeComboBox";

View File

@@ -6,13 +6,9 @@ namespace Ursa.Demo.ViewModels;
public partial class TimePickerDemoViewModel: ObservableObject
{
[ObservableProperty] private TimeSpan? _time;
[ObservableProperty] private TimeSpan? _startTime;
[ObservableProperty] private TimeSpan? _endTime;
public TimePickerDemoViewModel()
{
Time = new TimeSpan(12, 20, 0);
StartTime = new TimeSpan(8, 21, 0);
EndTime = new TimeSpan(18, 22, 0);
}
}

View File

@@ -0,0 +1,16 @@
using System;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.ViewModels;
public partial class TimeRangePickerDemoViewModel: ObservableObject
{
[ObservableProperty] private TimeSpan? _startTime;
[ObservableProperty] private TimeSpan? _endTime;
public TimeRangePickerDemoViewModel()
{
StartTime = new TimeSpan(8, 21, 0);
EndTime = new TimeSpan(18, 22, 0);
}
}

View File

@@ -70,6 +70,7 @@
Margin="8,0"
Content="{DynamicResource TimePickerIconGlyph}"
Focusable="False"
IsVisible="{Binding !#ClearButton.IsVisible}"
Theme="{DynamicResource InnerIconButton}" />
</Grid>
<Popup
@@ -164,11 +165,8 @@
</Setter>
<Style Selector="^.clearButton, ^.ClearButton">
<Style Selector="^:pointerover /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNotNull}}" />
</Style>
<Style Selector="^:pointerover /template/ Button#PART_Button">
<Setter Property="IsVisible" Value="{Binding $parent[u:TimePicker].SelectedTime, Converter={x:Static ObjectConverters.IsNull}}" />
<Style Selector="^:not(:empty):pointerover /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="True" />
</Style>
</Style>

View File

@@ -18,6 +18,7 @@ namespace Ursa.Controls;
[TemplatePart(PART_StartPresenter, typeof(TimePickerPresenter))]
[TemplatePart(PART_EndPresenter, typeof(TimePickerPresenter))]
[TemplatePart(PART_Button, typeof(Button))]
[PseudoClasses(PseudoClassName.PC_Empty)]
public class TimeRangePicker : TimePickerBase, IClearControl
{
public const string PART_StartTextBox = "PART_StartTextBox";
@@ -92,6 +93,8 @@ public class TimeRangePicker : TimePickerBase, IClearControl
public void Clear()
{
Focus(NavigationMethod.Pointer);
SetCurrentValue(StartTimeProperty, null);
SetCurrentValue(EndTimeProperty, null);
_startPresenter?.SyncTime(null);
_endPresenter?.SyncTime(null);
}
@@ -120,10 +123,10 @@ public class TimeRangePicker : TimePickerBase, IClearControl
textBox.Text = null;
return;
}
var date = new DateTime(1, 1, 1, time.Value.Hours, time.Value.Minutes, time.Value.Seconds);
var text = date.ToString(DisplayFormat);
textBox.Text = text;
PseudoClasses.Set(PseudoClassName.PC_Empty, StartTime is null && EndTime is null);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)