Merge pull request #260 from irihitech/close

Add Clear button to several controls, and related remakes
This commit is contained in:
Zhang Dian 2024-01-26 19:25:52 +08:00 committed by GitHub
commit bc5e65ab6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 147 additions and 65 deletions

View File

@ -9,6 +9,7 @@
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<CalendarDatePicker />
<CalendarDatePicker Classes="ClearButton" Width="200" />
<CalendarDatePicker Width="500" />
<CalendarDatePicker Classes="Large" />
<CalendarDatePicker Classes="Small" />

View File

@ -15,6 +15,13 @@
<ComboBoxItem>Mr. 17</ComboBoxItem>
<ComboBoxItem>Cass</ComboBoxItem>
</ComboBox>
<ComboBox Width="150" Classes="ClearButton">
<ComboBoxItem>Ding</ComboBoxItem>
<ComboBoxItem>Otter</ComboBoxItem>
<ComboBoxItem>Husky</ComboBoxItem>
<ComboBoxItem>Mr. 17</ComboBoxItem>
<ComboBoxItem>Cass</ComboBoxItem>
</ComboBox>
<ComboBox Width="150" PlaceholderText="Please Select">
<ComboBoxItem>Ding</ComboBoxItem>
<ComboBoxItem>Otter</ComboBoxItem>

View File

@ -9,6 +9,7 @@
mc:Ignorable="d">
<StackPanel Spacing="20">
<DatePicker />
<DatePicker Classes="ClearButton" />
<DatePicker DayFormat="d (ddd)" YearVisible="False" />
<DatePicker IsEnabled="False" />
<DatePicker Classes="Large" />

View File

@ -9,6 +9,7 @@
mc:Ignorable="d">
<StackPanel Spacing="20">
<TimePicker />
<TimePicker Classes="ClearButton" />
<TimePicker MinuteIncrement="15" />
<TimePicker ClockIdentifier="24HourClock" />
<TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />

View File

@ -8,14 +8,15 @@
<AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
</PropertyGroup>
<Import Project="../Directory.Build.props" />
<ItemGroup>
<PackageReference Include="Avalonia" Version="11.0.0" />
<PackageReference Include="Avalonia.Desktop" Version="11.0.0" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0" />
<PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.0" />
<PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
<PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
<PackageReference Include="Avalonia.Fonts.Inter" Version="$(AvaloniaVersion)" />
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0" />
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
</ItemGroup>

View File

@ -204,4 +204,27 @@
</Style>
</ControlTheme>
<ControlTheme x:Key="InnerIconButton" TargetType="Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="Button">
<ContentControl Background="Transparent">
<PathIcon
Width="16"
Height="16"
Margin="{TemplateBinding Padding}"
Data="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</ContentControl>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPointeroverForeground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -3,33 +3,13 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<!-- Add Resources Here -->
<ControlTheme x:Key="CalendarDatePickerButton" TargetType="Button">
<Setter Property="Button.Foreground" Value="{DynamicResource CalendarDatePickerIconForeground}" />
<Setter Property="Button.Template">
<ControlTemplate TargetType="Button">
<Grid Margin="{TemplateBinding Padding}" Background="Transparent">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource CalendarDatePickerIconGlyph}"
Foreground="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
</Style>
<Style Selector="^:pressed /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerIconPointeroverForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
<Setter Property="CalendarDatePicker.IsTodayHighlighted" Value="True" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
@ -51,10 +31,11 @@
<Grid
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColumnDefinitions="*,Auto">
ColumnDefinitions="*, Auto, Auto">
<TextBox
Name="PART_TextBox"
Grid.Column="0"
Grid.ColumnSpan="2"
MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
@ -91,14 +72,24 @@
</TextBox.Styles>
</TextBox>
<Button
Name="PART_Button"
Name="ClearButton"
Grid.Column="1"
Padding="0,0,8,0"
Cursor="Hand"
Content="{DynamicResource IconButtonClearData}"
Command="{Binding $parent[CalendarDatePicker].Clear}"
Focusable="False"
Theme="{DynamicResource CalendarDatePickerButton}" />
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="PART_Button"
Grid.Column="2"
Padding="0,0,8,0"
Content="{DynamicResource CalendarDatePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
<Popup
Name="PART_Popup"
Grid.Column="0"
HorizontalOffset="-8"
IsLightDismissEnabled="True"
PlacementTarget="{TemplateBinding}"
@ -117,8 +108,8 @@
DisplayDateStart="{TemplateBinding DisplayDateStart}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
SelectedDate="{TemplateBinding SelectedDate,
Mode=TwoWay}" />
SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
</Calendar>
</Border>
</Popup>
</Grid>
@ -129,6 +120,12 @@
</ControlTemplate>
</Setter>
<Style Selector="^.clearButton, ^.ClearButton">
<Style Selector="^:pointerover /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}"></Setter>
</Style>
</Style>
<Style Selector="^.Large">
<Style Selector="^ /template/ TextBox#PART_TextBox">

View File

@ -33,6 +33,7 @@
<Setter Property="MaxDropDownHeight" Value="504" />
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
@ -43,11 +44,11 @@
<Setter Property="Template">
<ControlTemplate TargetType="ComboBox">
<DataValidationErrors>
<Grid ColumnDefinitions="*,32">
<Grid ColumnDefinitions="*, Auto, 32">
<Border
x:Name="Background"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.ColumnSpan="3"
MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
MinHeight="{DynamicResource ComboBoxDefaultHeight}"
Background="{TemplateBinding Background}"
@ -73,10 +74,16 @@
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding ItemTemplate}" />
<Button
Grid.Column="1"
Name="ClearButton"
Content="{DynamicResource IconButtonClearData}"
IsVisible="False"
Command="{Binding $parent[ComboBox].Clear}"
Theme="{DynamicResource InnerIconButton}" />
<Border
x:Name="DropDownOverlay"
Grid.Column="1"
Grid.Column="2"
Width="30"
Margin="0,1,1,1"
HorizontalAlignment="Right"
@ -85,7 +92,7 @@
<PathIcon
x:Name="DropDownGlyph"
Grid.Column="1"
Grid.Column="2"
Width="12"
Height="12"
Margin="0,0,10,0"
@ -130,6 +137,12 @@
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^.clearButton, ^.ClearButton">
<Style Selector="^:pointerover /template/ Button#ClearButton" >
<Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}"></Setter>
</Style>
</Style>
<Style Selector="^.Large /template/ Border#Background">
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />

View File

@ -135,11 +135,17 @@
<Setter Property="Template">
<ControlTemplate TargetType="DatePicker">
<DataValidationErrors>
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<Grid
Name="LayoutRoot"
Margin="{TemplateBinding Padding}"
ColumnDefinitions="*, Auto">
<Button
Name="PART_FlyoutButton"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="298"
MinWidth="298"
MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding Background}"
@ -150,7 +156,6 @@
DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
Foreground="{TemplateBinding Foreground}"
IsEnabled="{TemplateBinding IsEnabled}"
MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
Theme="{StaticResource DateTimePickerFlyoutButton}">
<Grid ColumnDefinitions="*, Auto">
<Grid
@ -210,21 +215,38 @@
Foreground="{DynamicResource DateTimePickerIconForeground}" />
</Grid>
</Button>
<Popup
Name="PART_Popup"
Grid.Column="0"
Grid.ColumnSpan="2"
IsLightDismissEnabled="True"
Placement="Bottom"
PlacementTarget="{TemplateBinding}"
WindowManagerAddShadowHint="False">
<DatePickerPresenter Name="PART_PickerPresenter" />
</Popup>
<Button
Name="ClearButton"
Grid.Column="1"
Margin="0,0,8,0"
Command="{Binding $parent[DatePicker].Clear}"
Content="{DynamicResource IconButtonClearData}"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
</Grid>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^.clearButton:pointerover, ^.ClearButton:pointerover">
<Style Selector="^:not(:hasnodate) /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:not(:hasnodate) /template/ PathIcon#PART_Icon">
<Setter Property="Opacity" Value="0" />
</Style>
</Style>
<Style Selector="^:disabled /template/ PathIcon#PART_Icon">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />
</Style>

View File

@ -25,25 +25,6 @@
<ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
<ControlTheme.Resources>
<ControlTheme x:Key="InputClearButton" TargetType="Button">
<Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonDefaultForeground}" />
<Setter Property="Button.Cursor" Value="Hand" />
<Setter Property="Button.Template">
<ControlTemplate TargetType="Button">
<!-- Background must be transparent or hit test will fail -->
<ContentControl Background="Transparent">
<PathIcon
Width="16"
Height="16"
Data="{DynamicResource TextBoxClearButtonData}"
Foreground="{TemplateBinding Foreground}" />
</ContentControl>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource TextBoxButtonPointeroverForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
<Setter Property="ToggleButton.Foreground" Value="{DynamicResource TextBoxButtonDefaultForeground}" />
<Setter Property="ToggleButton.Cursor" Value="Hand" />
@ -139,8 +120,9 @@
Name="PART_ClearButton"
Grid.Column="2"
Command="{Binding $parent[TextBox].Clear}"
Content="{DynamicResource IconButtonClearData}"
IsVisible="False"
Theme="{StaticResource InputClearButton}" />
Theme="{StaticResource InnerIconButton}" />
<ToggleButton
Name="PART_RevealButton"
Grid.Column="3"

View File

@ -139,11 +139,17 @@
<Setter Property="Template">
<ControlTemplate>
<DataValidationErrors>
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<Grid
Name="LayoutRoot"
Margin="{TemplateBinding Padding}"
ColumnDefinitions="*, Auto">
<Button
x:Name="PART_FlyoutButton"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="242"
MinWidth="242"
MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding Background}"
@ -154,7 +160,6 @@
DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
Foreground="{TemplateBinding Foreground}"
IsEnabled="{TemplateBinding IsEnabled}"
MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
Theme="{StaticResource DateTimePickerFlyoutButton}">
<Grid ColumnDefinitions="*, Auto">
<Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
@ -234,16 +239,36 @@
<Popup
Name="PART_Popup"
Grid.Column="0"
Grid.ColumnSpan="2"
IsLightDismissEnabled="True"
Placement="Bottom"
PlacementTarget="{TemplateBinding}"
WindowManagerAddShadowHint="False">
<TimePickerPresenter Name="PART_PickerPresenter" />
</Popup>
<Button
Name="ClearButton"
Grid.Column="1"
Margin="0,0,8,0"
Command="{Binding $parent[TimePicker].Clear}"
Content="{DynamicResource IconButtonClearData}"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
</Grid>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^.clearButton:pointerover, ^.ClearButton:pointerover">
<Style Selector="^:not(:hasnotime) /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:not(:hasnotime) /template/ PathIcon#PART_Icon">
<Setter Property="Opacity" Value="0" />
</Style>
</Style>
<Style Selector="^:disabled /template/ PathIcon#PART_Icon">
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonDisabledIconForeground}" />

View File

@ -70,4 +70,8 @@
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
<!-- end Solid -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#888D92" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#C6CACD" />
</ResourceDictionary>

View File

@ -70,4 +70,8 @@
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#D52515" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" />
<!-- end Solid -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" />
</ResourceDictionary>

View File

@ -9,4 +9,6 @@
<Thickness x:Key="ButtonBorderThickness">1</Thickness>
<CornerRadius x:Key="ButtonCornerRadius">3</CornerRadius>
<StreamGeometry x:Key="IconButtonClearData">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17.0352 16.8626C16.4597 17.4585 15.5101 17.4751 14.9142 16.8996L12.0368 14.121L9.25822 16.9984C8.68274 17.5943 7.73314 17.6109 7.13722 17.0354C6.5413 16.4599 6.52472 15.5103 7.1002 14.9144L9.87883 12.037L7.00147 9.2584C6.40555 8.68293 6.38897 7.73332 6.96445 7.1374C7.53992 6.54148 8.48953 6.52491 9.08545 7.10038L11.9628 9.87901L14.7414 7.00165C15.3169 6.40573 16.2665 6.38916 16.8624 6.96463C17.4584 7.54011 17.4749 8.48971 16.8995 9.08563L14.1208 11.963L16.9982 14.7416C17.5941 15.3171 17.6107 16.2667 17.0352 16.8626Z</StreamGeometry>
</ResourceDictionary>

View File

@ -11,7 +11,6 @@
<Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
<Thickness x:Key="TextBoxBorderThickness">1</Thickness>
<StreamGeometry x:Key="TextBoxClearButtonData">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17.0352 16.8626C16.4597 17.4585 15.5101 17.4751 14.9142 16.8996L12.0368 14.121L9.25822 16.9984C8.68274 17.5943 7.73314 17.6109 7.13722 17.0354C6.5413 16.4599 6.52472 15.5103 7.1002 14.9144L9.87883 12.037L7.00147 9.2584C6.40555 8.68293 6.38897 7.73332 6.96445 7.1374C7.53992 6.54148 8.48953 6.52491 9.08545 7.10038L11.9628 9.87901L14.7414 7.00165C15.3169 6.40573 16.2665 6.38916 16.8624 6.96463C17.4584 7.54011 17.4749 8.48971 16.8995 9.08563L14.1208 11.963L16.9982 14.7416C17.5941 15.3171 17.6107 16.2667 17.0352 16.8626Z</StreamGeometry>
<StreamGeometry x:Key="PasswordBoxRevealButtonData">M12 4C5 4 1 10 1 12C1 14 5 20 12 20C19 20 23 14 23 12C23 10 19 4 12 4ZM17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z</StreamGeometry>
<StreamGeometry x:Key="PasswordBoxHideButtonData">M2.02949 4.67856C2.7593 4.28654 3.66871 4.56038 4.06073 5.29018C6.21313 9.29726 8.83179 11.5 12.0001 11.5C15.1685 11.5 17.7871 9.29726 19.9395 5.29018C20.3315 4.56038 21.241 4.28655 21.9708 4.67856C22.7006 5.07058 22.9744 5.97999 22.5824 6.7098C21.9049 7.97104 21.1385 9.15419 20.2743 10.199L23.2001 14.1C23.6971 14.7627 23.5628 15.7029 22.9001 16.2C22.2373 16.697 21.2971 16.5627 20.8001 15.9L18.1186 12.3246C17.448 12.8501 16.7322 13.2957 15.9687 13.6441L17.4046 17.4733C17.6955 18.249 17.3025 19.1136 16.5268 19.4045C15.7511 19.6954 14.8865 19.3024 14.5956 18.5267L13.0956 14.5267C13.0852 14.4988 13.0756 14.4709 13.0669 14.4428C12.7193 14.4806 12.3638 14.5 12.0001 14.5C11.6365 14.5 11.281 14.4806 10.9333 14.4428C10.9246 14.4709 10.9151 14.4988 10.9046 14.5267L9.40463 18.5267C9.11375 19.3024 8.24913 19.6954 7.47345 19.4045C6.69777 19.1136 6.30476 18.249 6.59564 17.4733L8.03159 13.6441C7.26806 13.2957 6.55223 12.8501 5.88163 12.3246L3.20009 15.9C2.70303 16.5627 1.76283 16.697 1.10009 16.2C0.437347 15.7029 0.303032 14.7627 0.800088 14.1L3.72589 10.1989C2.86177 9.15415 2.09533 7.97101 1.41787 6.70979C1.02585 5.97999 1.29969 5.07057 2.02949 4.67856Z</StreamGeometry>
</ResourceDictionary>