feat: redesign inner PathIcon.

(cherry picked from commit 904b7caa75e968daba80610446b2941fcbd99a21)
This commit is contained in:
Zhang Dian 2024-11-18 16:01:15 +08:00
parent ea895c900d
commit 0404111e76
10 changed files with 92 additions and 41 deletions

View File

@ -270,18 +270,20 @@
</ControlTheme>
<ControlTheme x:Key="InnerIconButton" TargetType="Button">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="Button">
<ContentControl Background="Transparent">
<PathIcon
Width="16"
Height="16"
Margin="{TemplateBinding Padding}"
Theme="{DynamicResource InnerPathIcon}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Data="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" />
</ContentControl>
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">

View File

@ -2,7 +2,11 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<!-- Add Resources Here -->
<Design.PreviewWith>
<StackPanel Margin="20" Width="300" Height="400">
<CalendarDatePicker Classes="ClearButton" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
<Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
<Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
@ -76,19 +80,19 @@
<Button
Name="ClearButton"
Grid.Column="1"
Padding="0,0,8,0"
Theme="{DynamicResource InnerIconButton}"
Margin="8 0"
Content="{DynamicResource IconButtonClearData}"
Command="{Binding $parent[CalendarDatePicker].Clear}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
IsVisible="False" />
<Button
Name="PART_Button"
Grid.Column="1"
Padding="0,0,8,0"
Theme="{DynamicResource InnerIconButton}"
Margin="8 0"
Content="{DynamicResource CalendarDatePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
Focusable="False" />
<Popup
Name="PART_Popup"
Grid.Column="0"
@ -103,7 +107,6 @@
CornerRadius="{DynamicResource CalendarCornerRadius}">
<Calendar
Name="PART_Calendar"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
DisplayDate="{TemplateBinding DisplayDate}"
DisplayDateEnd="{TemplateBinding DisplayDateEnd}"

View File

@ -79,19 +79,18 @@
<Button
Name="ClearButton"
Grid.Column="1"
Margin="{DynamicResource ComboBoxClearButtonMargin}"
Theme="{DynamicResource InnerIconButton}"
Width="{DynamicResource ComboBoxIconWidth}"
Command="{Binding $parent[ComboBox].Clear}"
Content="{DynamicResource IconButtonClearData}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
IsVisible="False" />
<PathIcon
Name="DropDownGlyph"
Grid.Column="1"
Theme="{DynamicResource InnerPathIcon}"
Width="{DynamicResource ComboBoxIconWidth}"
Height="{DynamicResource ComboBoxIconHeight}"
Margin="{DynamicResource ComboBoxIconMargin}"
Data="{DynamicResource ComboBoxIcon}"
Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
IsHitTestVisible="False"

View File

@ -51,9 +51,9 @@
<PathIcon
Name="PART_PathIcon"
Grid.Column="1"
Width="{DynamicResource ExpanderIconSize}"
Height="{DynamicResource ExpanderIconSize}"
Data="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z">
Theme="{DynamicResource InnerPathIcon}"
Margin="{DynamicResource ExpanderIconMargin}"
Data="{DynamicResource ExpanderIcon}">
<PathIcon.Transitions>
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" />

View File

@ -29,6 +29,7 @@
<DockPanel>
<PathIcon
Name="PART_LinkGlyph"
Theme="{DynamicResource InnerPathIcon}"
Margin="{DynamicResource HyperlinkButtonLinkGlyphMargin}"
IsVisible="False"
Data="{DynamicResource HyperlinkButtonLinkGlyph}"

View File

@ -20,7 +20,48 @@
</ControlTemplate>
</Setter>
<Style Selector="^.Active /template/ Path#PART_Path">
<Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"></Setter>
<Setter Property="Fill" Value="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="InnerPathIcon" TargetType="PathIcon">
<Setter Property="Height" Value="16" />
<Setter Property="Width" Value="16" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate TargetType="PathIcon">
<Border Background="{TemplateBinding Background}">
<Viewbox
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Path
Name="PART_Path"
Width="24"
Height="24"
Data="{TemplateBinding Data}"
Fill="{TemplateBinding Foreground}" />
</Viewbox>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^.Active /template/ Path#PART_Path">
<Setter Property="Fill" Value="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
</Style>
<Style Selector="^.ExtraSmall">
<Setter Property="Height" Value="8" />
<Setter Property="Width" Value="8" />
</Style>
<Style Selector="^.Small">
<Setter Property="Height" Value="12" />
<Setter Property="Width" Value="12" />
</Style>
<Style Selector="^.Large">
<Setter Property="Height" Value="20" />
<Setter Property="Width" Value="20" />
</Style>
<Style Selector="^.ExtraLarge">
<Setter Property="Height" Value="24" />
<Setter Property="Width" Value="24" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -511,22 +511,26 @@
</ControlTheme>
<ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
<!-- Background must be transparent or hit test will fail -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="ToggleButton">
<!-- Background must be transparent or hit test will fail -->
<Panel Background="Transparent">
<Panel
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
<PathIcon
Width="16"
Height="16"
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource PasswordBoxRevealButtonData}"
IsVisible="{Binding $parent[ToggleButton].IsChecked, Converter={x:Static BoolConverters.Not}}" />
IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}" />
<PathIcon
Width="16"
Height="16"
Theme="{DynamicResource InnerPathIcon}"
Data="{DynamicResource PasswordBoxHideButtonData}"
IsVisible="{Binding $parent[ToggleButton].IsChecked}" />
IsVisible="{TemplateBinding IsChecked}" />
</Panel>
</ControlTemplate>
</Setter>

View File

@ -3,16 +3,13 @@
<Thickness x:Key="ComboBoxSelectorThickness">1</Thickness>
<Thickness x:Key="ComboBoxItemDefaultPadding">12 8</Thickness>
<Thickness x:Key="ComboBoxSelectorDefaultPadding">8 0</Thickness>
<Thickness x:Key="ComboBoxSelectorDefaultPadding">12 0 0 0</Thickness>
<x:Double x:Key="ComboBoxPopupMaxDropDownHeight">504</x:Double>
<Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>
<CornerRadius x:Key="ComboBoxPopupBoxCornerRadius">6</CornerRadius>
<Thickness x:Key="ComboBoxClearButtonMargin">0 0 8 0</Thickness>
<Thickness x:Key="ComboBoxIconMargin">0 0 12 0</Thickness>
<x:Double x:Key="ComboBoxIconWidth">12</x:Double>
<x:Double x:Key="ComboBoxIconHeight">12</x:Double>
<x:Double x:Key="ComboBoxIconWidth">32</x:Double>
<StreamGeometry x:Key="ComboBoxIcon">
M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
</StreamGeometry>

View File

@ -1,6 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontWeight x:Key="ExpanderHeaderFontWeight">600</FontWeight>
<x:Double x:Key="ExpanderIconSize">8</x:Double>
<Thickness x:Key="ExpanderIconMargin">8 0 0 0</Thickness>
<StreamGeometry x:Key="ExpanderIcon">
M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
</StreamGeometry>
<Thickness x:Key="ExpanderHeaderMargin">8 4</Thickness>
<Thickness x:Key="ExpanderHeaderPadding">8</Thickness>

View File

@ -1,8 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<x:Double x:Key="HyperlinkButtonFontSize">14</x:Double>
<FontWeight x:Key="HyperlinkButtonFontWeight">600</FontWeight>
<x:Double x:Key="HyperlinkButtonLinkGlyphWidth">14</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphHeight">14</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphWidth">16</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphHeight">16</x:Double>
<Thickness x:Key="HyperlinkButtonLinkGlyphMargin">0 0 4 0</Thickness>
<StreamGeometry x:Key="HyperlinkButtonLinkGlyph">M 12.9393 2.9393 C 15.182 0.69666 18.818 0.696668 21.0606 2.93931 C 23.3033 5.18195 23.3033 8.81799 21.0606 11.0606 L 18.3925 13.7288 C 18.4631 13.3298 18.5 12.9192 18.5 12.5 C 18.5 11.5751 18.3206 10.6921 17.9947 9.88386 L 18.9393 8.93931 C 20.0104 7.86824 20.0104 6.13169 18.9393 5.06063 C 17.8682 3.98956 16.1317 3.98956 15.0606 5.06062 L 11.0606 9.06063 C 9.98956 10.1317 9.98956 11.8682 11.0606 12.9393 C 11.3265 13.2052 11.6335 13.4051 11.961 13.539 L 9.75848 15.7415 C 9.47 15.5439 9.19556 15.3169 8.9393 15.0606 C 6.69666 12.818 6.69666 9.18195 8.9393 6.93931 L 12.9393 2.9393 Z M 2.9393 12.9393 L 5.60751 10.2711 C 5.53685 10.6701 5.49999 11.0808 5.49999 11.5001 C 5.49999 12.4249 5.67935 13.3079 6.00519 14.1161 L 5.06062 15.0607 C 3.98956 16.1317 3.98956 17.8683 5.06063 18.9393 C 6.13169 20.0104 7.86824 20.0104 8.9393 18.9393 L 12.9393 14.9393 C 14.0104 13.8683 14.0104 12.1317 12.9393 11.0607 C 12.7664 10.8878 12.5762 10.7428 12.3743 10.6258 L 14.5302 8.46985 C 14.7141 8.61357 14.8914 8.77007 15.0606 8.93934 C 17.3033 11.182 17.3033 14.818 15.0606 17.0607 L 11.0606 21.0607 C 8.81798 23.3033 5.18194 23.3033 2.9393 21.0607 C 0.696665 18.818 0.696663 15.182 2.9393 12.9393 Z</StreamGeometry>