feat: implement template and related feature.

This commit is contained in:
rabbitism
2024-04-28 17:32:53 +08:00
parent 6abfb645b0
commit f5aae36754
6 changed files with 374 additions and 96 deletions

View File

@@ -26,5 +26,6 @@
NeedConfirmation="True"
InnerLeftContent="时刻"
InnerRightContent="截止" />
<u:TimeRangePicker Width="300"></u:TimeRangePicker>
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,161 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:iri="https://irihi.tech/shared"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:TimeRangePicker}" TargetType="u:TimeRangePicker">
<Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
<Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="Template">
<ControlTemplate TargetType="u:TimeRangePicker">
<DataValidationErrors>
<Panel
x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border
x:Name="Background"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Grid ColumnDefinitions="*, Auto, * Auto">
<TextBox
Name="{x:Static u:TimeRangePicker.PART_StartTextBox}"
Grid.Column="0"
HorizontalAlignment="Stretch"
Background="Transparent"
CornerRadius="3 0 0 3"
MinHeight="{TemplateBinding MinHeight}"
BorderThickness="1"
VerticalAlignment="Stretch"
Foreground="{TemplateBinding Foreground}"
InnerLeftContent="{TemplateBinding InnerLeftContent}"
IsReadOnly="{TemplateBinding IsReadonly}"
Watermark="{TemplateBinding StartWatermark}" />
<TextBlock Grid.Column="1" Text="~" VerticalAlignment="Center"></TextBlock>
<TextBox
Name="{x:Static u:TimeRangePicker.PART_EndTextBox}"
MinHeight="{TemplateBinding MinHeight}"
Grid.Column="2"
HorizontalAlignment="Stretch"
Background="Transparent"
CornerRadius="0"
VerticalAlignment="Stretch"
Foreground="{TemplateBinding Foreground}"
InnerRightContent="{TemplateBinding InnerRightContent}"
IsReadOnly="{TemplateBinding IsReadonly}"
Watermark="{TemplateBinding EndWatermark}" />
<Button
Name="ClearButton"
Grid.Column="3"
Padding="0,0,8,0"
Command="{Binding $parent[iri:IClearControl].Clear}"
Content="{DynamicResource IconButtonClearData}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="{x:Static u:TimePicker.PART_Button}"
Grid.Column="3"
Padding="0,0,8,0"
Content="{DynamicResource TimePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
</Grid>
<Popup
Name="{x:Static iri:PartNames.PART_Popup}"
IsLightDismissEnabled="True"
IsOpen="{TemplateBinding IsDropdownOpen, Mode=TwoWay}"
Placement="BottomEdgeAlignedLeft"
PlacementTarget="Background">
<Border
Margin="0,4"
HorizontalAlignment="Stretch"
Background="{DynamicResource ComboBoxPopupBackground}"
BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
ClipToBounds="True"
CornerRadius="6">
<DockPanel>
<StackPanel DockPanel.Dock="Bottom" IsVisible="{TemplateBinding NeedConfirmation}">
<Button
Margin="8"
HorizontalAlignment="Right"
Command="{Binding $parent[u:TimeRangePicker].Confirm}"
Content="{DynamicResource STRING_DATE_TIME_CONFIRM}" />
</StackPanel>
<ContentPresenter
Name="PART_PopupHeader"
Margin="8,8,8,0"
Content="{TemplateBinding PopupInnerTopContent}"
DockPanel.Dock="Top"
IsVisible="{TemplateBinding PopupInnerTopContent,
Converter={x:Static ObjectConverters.IsNotNull}}" />
<ContentPresenter
Name="PART_PopupFooter"
Margin="8,0,8,8"
Content="{TemplateBinding PopupInnerBottomContent}"
DockPanel.Dock="Bottom"
IsVisible="{TemplateBinding PopupInnerBottomContent,
Converter={x:Static ObjectConverters.IsNotNull}}" />
<UniformGrid Columns="2">
<u:TimePickerPresenter
Name="{x:Static u:TimeRangePicker.PART_StartPresenter}"
NeedsConfirmation="{TemplateBinding NeedConfirmation}"
PanelFormat="{TemplateBinding PanelFormat}"
Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StartTime, Mode=OneWayToSource}" />
<u:TimePickerPresenter
Name="{x:Static u:TimeRangePicker.PART_EndPresenter}"
NeedsConfirmation="{TemplateBinding NeedConfirmation}"
PanelFormat="{TemplateBinding PanelFormat}"
Time="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EndTime, Mode=OneWayToSource}" />
</UniformGrid>
</DockPanel>
</Border>
</Popup>
</Panel>
</DataValidationErrors>
</ControlTemplate>
</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>
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Button#PART_Button">
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
</Style>
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Style>
<!-- Focused State -->
<Style Selector="^ /template/ Border#Background:focus">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#Background:focus-within">
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -34,6 +34,7 @@
<ResourceInclude Source="TextBox.axaml" />
<ResourceInclude Source="ThemeSelector.axaml" />
<ResourceInclude Source="TimePicker.axaml" />
<ResourceInclude Source="TimeRangePicker.axaml" />
<ResourceInclude Source="Timeline.axaml" />
<ResourceInclude Source="TreeComboBox.axaml"/>
<ResourceInclude Source="Skeleton.axaml" />

View File

@@ -16,52 +16,19 @@ namespace Ursa.Controls;
[TemplatePart(PartNames.PART_Popup, typeof(Popup))]
[TemplatePart(PART_Presenter, typeof(TimePickerPresenter))]
[TemplatePart(PART_Button, typeof(Button))]
public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl, IPopupInnerContent
public class TimePicker : TimePickerBase, IClearControl
{
public const string PART_TextBox = "PART_TextBox";
public const string PART_Presenter = "PART_Presenter";
public const string PART_Button = "PART_Button";
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>(
nameof(PanelFormat), "HH mm ss");
public static readonly StyledProperty<TimeSpan?> SelectedTimeProperty =
AvaloniaProperty.Register<TimePicker, TimeSpan?>(
nameof(SelectedTime));
public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(NeedConfirmation));
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 static readonly StyledProperty<bool> IsReadonlyProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(IsReadonly));
private Button? _button;
private Popup? _popup;
private TimePickerPresenter? _presenter;
@@ -74,79 +41,24 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
picker.OnSelectionChanged(args));
}
public bool IsReadonly
{
get => GetValue(IsReadonlyProperty);
set => SetValue(IsReadonlyProperty, value);
}
public bool IsDropdownOpen
{
get => GetValue(IsDropdownOpenProperty);
set => SetValue(IsDropdownOpenProperty, value);
}
public string? Watermark
{
get => GetValue(WatermarkProperty);
set => SetValue(WatermarkProperty, value);
}
public string? DisplayFormat
{
get => GetValue(DisplayFormatProperty);
set => SetValue(DisplayFormatProperty, value);
}
public string PanelFormat
{
get => GetValue(PanelFormatProperty);
set => SetValue(PanelFormatProperty, value);
}
public TimeSpan? SelectedTime
{
get => GetValue(SelectedTimeProperty);
set => SetValue(SelectedTimeProperty, value);
}
public bool NeedConfirmation
{
get => GetValue(NeedConfirmationProperty);
set => SetValue(NeedConfirmationProperty, value);
}
public void Clear()
{
Focus(NavigationMethod.Pointer);
_presenter?.SetValue(TimePickerPresenter.TimeProperty, 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);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
@@ -185,6 +97,12 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
IsDropdownOpen = true;
}
protected override void OnLostFocus(RoutedEventArgs e)
{
base.OnLostFocus(e);
SetCurrentValue(IsDropdownOpenProperty, IsPointerOver);
}
protected override void OnKeyDown(KeyEventArgs e)
{
if (e.Key == Key.Escape)
@@ -193,6 +111,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
e.Handled = true;
return;
}
if (e.Key == Key.Down)
{
SetCurrentValue(IsDropdownOpenProperty, true);
@@ -205,6 +124,7 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
SetCurrentValue(IsDropdownOpenProperty, false);
return;
}
base.OnKeyDown(e);
}
@@ -246,7 +166,6 @@ public class TimePicker : TemplatedControl, IClearControl, IInnerContentControl,
{
_presenter?.Confirm();
SetCurrentValue(IsDropdownOpenProperty, false);
TopLevel.GetTopLevel(this);
Focus();
}

View File

@@ -0,0 +1,96 @@
using Avalonia;
using Avalonia.Controls.Primitives;
using Avalonia.Data;
using Irihi.Avalonia.Shared.Contracts;
namespace Ursa.Controls;
public abstract class TimePickerBase : TemplatedControl, IInnerContentControl, IPopupInnerContent
{
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>(
nameof(PanelFormat), "HH mm ss");
public static readonly StyledProperty<bool> NeedConfirmationProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(NeedConfirmation));
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<bool> IsDropdownOpenProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(IsDropdownOpen), defaultBindingMode: BindingMode.TwoWay);
public static readonly StyledProperty<bool> IsReadonlyProperty = AvaloniaProperty.Register<TimePicker, bool>(
nameof(IsReadonly));
public bool IsReadonly
{
get => GetValue(IsReadonlyProperty);
set => SetValue(IsReadonlyProperty, value);
}
public bool IsDropdownOpen
{
get => GetValue(IsDropdownOpenProperty);
set => SetValue(IsDropdownOpenProperty, value);
}
public string? DisplayFormat
{
get => GetValue(DisplayFormatProperty);
set => SetValue(DisplayFormatProperty, value);
}
public string PanelFormat
{
get => GetValue(PanelFormatProperty);
set => SetValue(PanelFormatProperty, value);
}
public bool NeedConfirmation
{
get => GetValue(NeedConfirmationProperty);
set => SetValue(NeedConfirmationProperty, value);
}
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);
}
}

View File

@@ -2,7 +2,11 @@
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Interactivity;
using Irihi.Avalonia.Shared.Common;
using Irihi.Avalonia.Shared.Contracts;
using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls;
@@ -12,7 +16,7 @@ namespace Ursa.Controls;
[TemplatePart(PART_StartPresenter, typeof(TimePickerPresenter))]
[TemplatePart(PART_EndPresenter, typeof(TimePickerPresenter))]
[TemplatePart(PART_Button, typeof(Button))]
public class TimeRangePicker: TemplatedControl
public class TimeRangePicker : TimePickerBase, IClearControl
{
public const string PART_StartTextBox = "PART_StartTextBox";
public const string PART_EndTextBox = "PART_EndTextBox";
@@ -20,8 +24,46 @@ public class TimeRangePicker: TemplatedControl
public const string PART_EndPresenter = "PART_EndPresenter";
public const string PART_Button = "PART_Button";
public static readonly StyledProperty<TimeSpan?> StartTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
nameof(StartTime));
public static readonly StyledProperty<TimeSpan?> StartTimeProperty =
AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
nameof(StartTime));
public static readonly StyledProperty<TimeSpan?> EndTimeProperty =
AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
nameof(EndTime));
public static readonly StyledProperty<string?> StartWatermarkProperty =
AvaloniaProperty.Register<TimeRangePicker, string?>(
nameof(StartWatermark));
public static readonly StyledProperty<string?> EndWatermarkProperty = AvaloniaProperty.Register<TimeRangePicker, string?>(
nameof(EndWatermark));
public string? EndWatermark
{
get => GetValue(EndWatermarkProperty);
set => SetValue(EndWatermarkProperty, value);
}
private Button? _button;
private TimePickerPresenter? _endPresenter;
private TextBox? _endTextBox;
private Popup? _popup;
private TimePickerPresenter? _startPresenter;
private TextBox? _startTextBox;
static TimeRangePicker()
{
}
public string? StartWatermark
{
get => GetValue(StartWatermarkProperty);
set => SetValue(StartWatermarkProperty, value);
}
public TimeSpan? StartTime
{
@@ -29,12 +71,70 @@ public class TimeRangePicker: TemplatedControl
set => SetValue(StartTimeProperty, value);
}
public static readonly StyledProperty<TimeSpan?> EndTimeProperty = AvaloniaProperty.Register<TimeRangePicker, TimeSpan?>(
nameof(EndTime));
public TimeSpan? EndTime
{
get => GetValue(EndTimeProperty);
set => SetValue(EndTimeProperty, value);
}
public void Clear()
{
Focus(NavigationMethod.Pointer);
_startPresenter?.SetValue(TimePickerPresenter.TimeProperty, null);
_endPresenter?.SetValue(TimePickerPresenter.TimeProperty, null);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
GotFocusEvent.RemoveHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
_popup = e.NameScope.Find<Popup>(PartNames.PART_Popup);
_startTextBox = e.NameScope.Find<TextBox>(PART_StartTextBox);
_endTextBox = e.NameScope.Find<TextBox>(PART_EndTextBox);
_startPresenter = e.NameScope.Find<TimePickerPresenter>(PART_StartPresenter);
_endPresenter = e.NameScope.Find<TimePickerPresenter>(PART_EndPresenter);
_button = e.NameScope.Find<Button>(PART_Button);
GotFocusEvent.AddHandler(OnTextBoxGetFocus, _startTextBox, _endTextBox);
}
private void OnTextBoxGetFocus(object sender, GotFocusEventArgs e)
{
SetCurrentValue(IsDropdownOpenProperty, true);
}
protected override void OnKeyDown(KeyEventArgs e)
{
if (e.Key == Key.Escape)
{
SetCurrentValue(IsDropdownOpenProperty, false);
e.Handled = true;
return;
}
if (e.Key == Key.Down)
{
SetCurrentValue(IsDropdownOpenProperty, true);
e.Handled = true;
return;
}
if (e.Key == Key.Tab)
{
if (e.Source == _endTextBox)
{
SetCurrentValue(IsDropdownOpenProperty, false);
}
return;
}
base.OnKeyDown(e);
}
public void Confirm()
{
_startPresenter?.Confirm();
_endPresenter?.Confirm();
SetCurrentValue(IsDropdownOpenProperty, false);
Focus();
}
}