feat: implement timepicker functions.

This commit is contained in:
rabbitism
2024-04-26 20:07:55 +08:00
parent 32ad93de60
commit 1e5da1869c
4 changed files with 221 additions and 26 deletions

View File

@@ -8,5 +8,7 @@
<StackPanel HorizontalAlignment="Left">
<u:TimePickerPresenter Name="presenter" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding #presenter.Time}"/>
<u:TimePicker Width="200" NeedConfirmation="False"></u:TimePicker>
</StackPanel>
</UserControl>

View File

@@ -1,6 +1,7 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<Design.PreviewWith>
@@ -34,12 +35,12 @@
ShouldLoop="True" />
</ScrollViewer>
<Rectangle
Grid.Column="1"
Name="{x:Static u:TimePickerPresenter.PART_FirstSeparator}"
Grid.Column="1"
Width="1"
Margin="0,4"
Fill="{DynamicResource DateTimePickerSeparatorBackground}"
VerticalAlignment="Stretch" />
VerticalAlignment="Stretch"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
<ScrollViewer
Name="{x:Static u:TimePickerPresenter.PART_MinuteScrollPanel}"
Grid.Column="2"
@@ -55,12 +56,12 @@
ShouldLoop="True" />
</ScrollViewer>
<Rectangle
Grid.Column="3"
Name="{x:Static u:TimePickerPresenter.PART_SecondSeparator}"
Grid.Column="3"
Width="1"
Margin="0,4"
Fill="{DynamicResource DateTimePickerSeparatorBackground}"
VerticalAlignment="Stretch" />
VerticalAlignment="Stretch"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
<ScrollViewer
Name="{x:Static u:TimePickerPresenter.PART_SecondScrollPanel}"
Grid.Column="4"
@@ -76,12 +77,12 @@
ShouldLoop="True" />
</ScrollViewer>
<Rectangle
Grid.Column="5"
Name="{x:Static u:TimePickerPresenter.PART_ThirdSeparator}"
Grid.Column="5"
Width="1"
Margin="0,4"
Fill="{DynamicResource DateTimePickerSeparatorBackground}"
VerticalAlignment="Stretch" />
VerticalAlignment="Stretch"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
<ScrollViewer
Name="{x:Static u:TimePickerPresenter.PART_AmPmScrollPanel}"
Grid.Column="6"
@@ -99,4 +100,69 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:TimePicker}" TargetType="u:TimePicker">
<Setter Property="Template">
<ControlTemplate TargetType="u:TimePicker">
<DataValidationErrors>
<Panel
x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Grid ColumnDefinitions="Auto, *, Auto, Auto, Auto">
<!-- InnerLeftContent, Text and Watermark, ClearButton, InnerRightContent, Icon -->
<ContentPresenter
Grid.Column="0"
Padding="{TemplateBinding Padding,
Converter={x:Static converters:ThicknessIncludeConverter.Right}}"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
Content="{TemplateBinding InnerLeftContent}"
DockPanel.Dock="Left"
Foreground="{DynamicResource TextBoxInnerForeground}"
IsVisible="{Binding Path=InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter
Grid.Column="3"
Padding="{TemplateBinding Padding,
Converter={x:Static converters:ThicknessIncludeConverter.Left}}"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
Content="{TemplateBinding InnerRightContent}"
DockPanel.Dock="Right"
Foreground="{DynamicResource TextBoxInnerForeground}"
IsVisible="{Binding Path=InnerRightContent, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}" />
<TextBlock Grid.Column="1" Text="{TemplateBinding Watermark}" />
<TextBox
Name="{x:Static u:TimePicker.PART_TextBox}"
Grid.Column="1"
VerticalAlignment="Stretch"
BorderThickness="0" />
<Popup
Name="{x:Static u:TimePicker.PART_Popup}"
Grid.Column="0"
IsLightDismissEnabled="True"
IsOpen="{TemplateBinding IsDropdownOpen,
Mode=TwoWay}"
Placement="BottomEdgeAlignedLeft"
PlacementTarget="Background">
<Border Theme="{DynamicResource CardBorder}">
<u:TimePickerPresenter
Name="{x:Static u:TimePicker.PART_Presenter}"
NeedsConfirmation="{TemplateBinding NeedConfirmation}"
PanelFormat="{TemplateBinding PanelFormat}"
Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedTime, Mode=OneWayToSource}" />
</Border>
</Popup>
</Grid>
</Panel>
</DataValidationErrors>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

View File

@@ -1,14 +1,32 @@
using Avalonia;
using System.Globalization;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Data;
using Avalonia.Input;
using Avalonia.Interactivity;
using Irihi.Avalonia.Shared.Contracts;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
public class TimePicker : TemplatedControl, IClearControl
[TemplatePart( PART_TextBox, typeof(TextBox))]
[TemplatePart( PART_Popup, typeof(Popup))]
[TemplatePart( PART_Presenter, typeof(TimePickerPresenter))]
public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl, IPopupInnerContent
{
public static readonly StyledProperty<string> DisplayFormatProperty = AvaloniaProperty.Register<TimePicker, string>(
public const string PART_TextBox = "PART_TextBox";
public const string PART_Popup = "PART_Popup";
public const string PART_Presenter = "PART_Presenter";
private TextBox? _textBox;
private Popup? _popup;
private TimePickerPresenter? _presenter;
private bool _updateFromPresenter;
public static readonly StyledProperty<string?> DisplayFormatProperty = AvaloniaProperty.Register<TimePicker, string?>(
nameof(DisplayFormat), "HH:mm:ss");
public static readonly StyledProperty<string> PanelFormatProperty = AvaloniaProperty.Register<TimePicker, string>(
@@ -21,8 +39,40 @@ public class TimePicker : TemplatedControl, IClearControl
public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(NeedConfirmation));
public static readonly StyledProperty<bool> IsLoopingProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(IsLooping));
public static readonly StyledProperty<object?> InnerLeftContentProperty =
AvaloniaProperty.Register<TimePicker, object?>(
nameof(InnerLeftContent));
public static readonly StyledProperty<object?> InnerRightContentProperty =
AvaloniaProperty.Register<TimePicker, object?>(
nameof(InnerRightContent));
public static readonly StyledProperty<object?> PopupInnerTopContentProperty =
AvaloniaProperty.Register<TimePicker, object?>(
nameof(PopupInnerTopContent));
public static readonly StyledProperty<object?> PopupInnerBottomContentProperty =
AvaloniaProperty.Register<TimePicker, object?>(
nameof(PopupInnerBottomContent));
public static readonly StyledProperty<string?> WatermarkProperty = AvaloniaProperty.Register<TimePicker, string?>(
nameof(Watermark));
public static readonly StyledProperty<bool> IsDropdownOpenProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(IsDropdownOpen), defaultBindingMode: BindingMode.TwoWay);
public bool IsDropdownOpen
{
get => GetValue(IsDropdownOpenProperty);
set => SetValue(IsDropdownOpenProperty, value);
}
public string? Watermark
{
get => GetValue(WatermarkProperty);
set => SetValue(WatermarkProperty, value);
}
private TimeSpan? _selectedTimeHolder;
@@ -30,9 +80,11 @@ public class TimePicker : TemplatedControl, IClearControl
{
PanelFormatProperty.Changed.AddClassHandler<TimePicker, string>((picker, args) =>
picker.OnPanelFormatChanged(args));
SelectedTimeProperty.Changed.AddClassHandler<TimePicker, TimeSpan?>((picker, args) =>
picker.OnSelectionChanged(args));
}
public string DisplayFormat
public string? DisplayFormat
{
get => GetValue(DisplayFormatProperty);
set => SetValue(DisplayFormatProperty, value);
@@ -56,17 +108,35 @@ public class TimePicker : TemplatedControl, IClearControl
set => SetValue(NeedConfirmationProperty, value);
}
public bool IsLooping
{
get => GetValue(IsLoopingProperty);
set => SetValue(IsLoopingProperty, value);
}
public void Clear()
{
SetCurrentValue(SelectedTimeProperty, null);
}
public object? InnerLeftContent
{
get => GetValue(InnerLeftContentProperty);
set => SetValue(InnerLeftContentProperty, value);
}
public object? InnerRightContent
{
get => GetValue(InnerRightContentProperty);
set => SetValue(InnerRightContentProperty, value);
}
public object? PopupInnerTopContent
{
get => GetValue(PopupInnerTopContentProperty);
set => SetValue(PopupInnerTopContentProperty, value);
}
public object? PopupInnerBottomContent
{
get => GetValue(PopupInnerBottomContentProperty);
set => SetValue(PopupInnerBottomContentProperty, value);
}
private void OnPanelFormatChanged(AvaloniaPropertyChangedEventArgs<string> args)
{
var format = args.NewValue.Value;
@@ -77,14 +147,50 @@ public class TimePicker : TemplatedControl, IClearControl
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
_textBox = e.NameScope.Find<TextBox>(PART_TextBox);
_popup = e.NameScope.Find<Popup>(PART_Popup);
_presenter = e.NameScope.Find<TimePickerPresenter>(PART_Presenter);
TextBox.GotFocusEvent.AddHandler(OnTextBoxGetFocus, _textBox);
TextBox.TextChangedEvent.AddDisposableHandler(OnTextChanged, _textBox);
TextBox.PointerPressedEvent.AddHandler(OnTextBoxPointerPressed, RoutingStrategies.Tunnel, false, _textBox);
}
private void OnSelectionChanged()
private void OnTextBoxPointerPressed(object sender, PointerPressedEventArgs e)
{
if (NeedConfirmation)
_selectedTimeHolder = new TimeSpan();
SetCurrentValue(IsDropdownOpenProperty, true);
}
private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
{
IsDropdownOpen = true;
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
if (DisplayFormat is null || DisplayFormat.Length == 0)
{
if (TimeSpan.TryParse(_textBox?.Text, out var defaultTime))
{
TimePickerPresenter.TimeProperty.SetValue(defaultTime, _presenter);
}
}
else
SelectedTime = new TimeSpan();
{
if(DateTime.TryParseExact(_textBox?.Text, DisplayFormat, CultureInfo.CurrentUICulture, DateTimeStyles.None, out var time))
{
TimePickerPresenter.TimeProperty.SetValue(time.TimeOfDay, _presenter);
}
}
}
private void OnSelectionChanged(AvaloniaPropertyChangedEventArgs<TimeSpan?> args)
{
if (_textBox is null) return;
var time = args.NewValue.Value;
var text = new DateTime(1,1,1, time?.Hours ?? 0, time?.Minutes ?? 0, time?.Seconds ?? 0).ToString(DisplayFormat);
_textBox.Text = text;
}
public void Confirm()

View File

@@ -70,6 +70,15 @@ public class TimePickerPresenter: TemplatedControl
set => SetValue(MinuteIncrementProperty, value);
}
public static readonly StyledProperty<int> SecondIncrementProperty = AvaloniaProperty.Register<TimePickerPresenter, int>(
nameof(SecondIncrement));
public int SecondIncrement
{
get => GetValue(SecondIncrementProperty);
set => SetValue(SecondIncrementProperty, value);
}
public static readonly StyledProperty<TimeSpan?> TimeProperty = AvaloniaProperty.Register<TimePickerPresenter, TimeSpan?>(
nameof(Time));
@@ -88,6 +97,8 @@ public class TimePickerPresenter: TemplatedControl
set => SetValue(PanelFormatProperty, value);
}
public event EventHandler<TimePickerSelectedValueChangedEventArgs>? SelectedTimeChanged;
static TimePickerPresenter()
{
PanelFormatProperty.Changed.AddClassHandler<TimePickerPresenter, string>((presenter, args) => presenter.OnPanelFormatChanged(args));
@@ -99,6 +110,8 @@ public class TimePickerPresenter: TemplatedControl
_updateFromTimeChange = true;
UpdatePanelsFromSelectedTime();
_updateFromTimeChange = false;
SelectedTimeChanged?.Invoke(this,
new TimePickerSelectedValueChangedEventArgs(args.OldValue.Value, args.NewValue.Value));
}
private void OnPanelFormatChanged(AvaloniaPropertyChangedEventArgs<string> args)
@@ -110,7 +123,7 @@ public class TimePickerPresenter: TemplatedControl
private void UpdatePanelLayout(string panelFormat)
{
var parts = panelFormat.Split(' ', '-', ':');
var parts = panelFormat.Split(new[] { ' ', '-', ':' }, StringSplitOptions.RemoveEmptyEntries);
var panels = new List<Control?>();
foreach (var part in parts)
{
@@ -305,4 +318,12 @@ public class TimePickerPresenter: TemplatedControl
_ampmSelector.MinimumValue = 0;
}
}
public void Confirm()
{
if (NeedsConfirmation)
{
SetCurrentValue(TimeProperty, _timeHolder);
}
}
}