Merge pull request #525 from irihitech/iconbutton

Enhance Icon related Button in demo
This commit is contained in:
Dong Bin
2025-01-04 20:34:54 +08:00
committed by GitHub
9 changed files with 90 additions and 119 deletions

View File

@@ -25,7 +25,8 @@
Name="toggle"
HorizontalAlignment="Right"
IsChecked="True"
Theme="{DynamicResource SplitViewToggleSwitch}" />
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconSidebar}" />
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<Panel>
<TextBlock

View File

@@ -27,7 +27,8 @@
Name="toggle"
HorizontalAlignment="Right"
IsChecked="True"
Theme="{DynamicResource SplitViewToggleSwitch}" />
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconSidebar}" />
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<Panel>
<TextBlock

View File

@@ -109,7 +109,8 @@
ItemsSource="{Binding Songs}" />
<ToggleSwitch
Grid.Row="2"
Theme="{DynamicResource SplitViewToggleSwitch}"
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconSidebar}"
HorizontalAlignment="Left"
IsChecked="{Binding #SplitView.IsPaneOpen}">
</ToggleSwitch>

View File

@@ -34,16 +34,10 @@
<Button
Grid.Row="1"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_ResourceKey}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
<SelectableTextBlock
Grid.Row="2"
Grid.Column="0"
@@ -53,17 +47,11 @@
<Button
Grid.Row="2"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
<!-- Row 3-4-5 HEX -->
<TextBlock
@@ -82,16 +70,10 @@
<Button
Grid.Row="4"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
<SelectableTextBlock
Grid.Row="5"
Grid.Column="0"
@@ -100,16 +82,10 @@
<Button
Grid.Row="5"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
<!-- Row 6-7 Opacity -->
<TextBlock
@@ -128,16 +104,11 @@
<Button
Grid.Row="7"
Grid.Column="1"
Classes="Tertiary"
Padding="8"
Command="{Binding $parent[controls:ColorDetailControl].Copy}"
CommandParameter="{x:Static controls:ColorDetailControl.KEY_Opacity}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="{StaticResource SemiIconCopy}"
Foreground="{Binding $parent[Button].Foreground}" />
</Button>
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconCopy}" />
</Grid>
</StackPanel>
</ControlTemplate>

View File

@@ -1,31 +1,42 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="ThemeToggleSwitch"
<Design.PreviewWith>
<StackPanel Orientation="Horizontal">
<ToggleSwitch
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconStar}" />
<Button
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconStar}" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="IconBorderlessToggleSwitch"
BasedOn="{StaticResource ButtonToggleSwitch}"
TargetType="ToggleSwitch">
<Setter Property="Padding" Value="8" />
<Setter Property="OnContent" Value="{Binding $self.Content}" />
<Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
<Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
<Setter Property="OnContentTemplate">
<DataTemplate>
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
</DataTemplate>
<StaticResource ResourceKey="GeometryDataTemplate" />
</Setter>
<Setter Property="OffContent" Value="{Binding $self.Content}" />
<Setter Property="OffContentTemplate">
<DataTemplate>
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
</DataTemplate>
<StaticResource ResourceKey="GeometryDataTemplate" />
</Setter>
<Setter Property="ContentTemplate">
<DataTemplate>
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
</DataTemplate>
<StaticResource ResourceKey="GeometryDataTemplate" />
</Setter>
</ControlTheme>
<ControlTheme x:Key="SplitViewToggleSwitch"
BasedOn="{StaticResource ThemeToggleSwitch}"
TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
<Setter Property="Content" Value="{StaticResource SemiIconSidebar}" />
<ControlTheme x:Key="IconBorderlessButton"
BasedOn="{StaticResource BorderlessButton}"
TargetType="Button">
<Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
<Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
<Setter Property="ContentTemplate">
<StaticResource ResourceKey="GeometryDataTemplate" />
</Setter>
</ControlTheme>
<DataTemplate x:Key="GeometryDataTemplate" DataType="Geometry">
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
</DataTemplate>
</ResourceDictionary>

View File

@@ -21,7 +21,8 @@
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSwitch
Name="ExpandButton"
Theme="{DynamicResource SplitViewToggleSwitch}" />
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconSidebar}" />
<SelectableTextBlock
VerticalAlignment="Center"
Classes="H6"
@@ -36,34 +37,27 @@
Text="{ReflectionBinding #tab.SelectedItem.Header}" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel.Styles>
<Style Selector="Button">
<Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
<Setter Property="Padding" Value="8" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style>
<Style Selector="PathIcon">
<Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
</Style>
</StackPanel.Styles>
<Button
Theme="{DynamicResource IconBorderlessButton}"
Command="{Binding OpenUrlCommand}"
CommandParameter="{Binding DocumentationUrl}"
Content="{StaticResource SemiIconGlobe}" />
<Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding DocumentationUrl}">
<PathIcon Data="{StaticResource SemiIconGlobe}" />
</Button>
<Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding RepoUrl}">
<PathIcon Data="{StaticResource SemiIconGithubLogo}" />
</Button>
<Button
Theme="{DynamicResource IconBorderlessButton}"
Command="{Binding OpenUrlCommand}"
CommandParameter="{Binding RepoUrl}"
Content="{StaticResource SemiIconGithubLogo}" />
<ToggleSwitch
Theme="{DynamicResource ThemeToggleSwitch}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}"
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Command="{Binding ToggleThemeCommand}"
OnContent="{StaticResource SemiIconMoon}"
OffContent="{StaticResource SemiIconSun}"/>
OffContent="{StaticResource SemiIconSun}" />
<Button>
<PathIcon Data="{StaticResource SemiIconMenu}" />
<Button
Theme="{DynamicResource IconBorderlessButton}"
Content="{StaticResource SemiIconMenu}">
<Button.Flyout>
<MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
</Button.Flyout>

View File

@@ -23,21 +23,22 @@
BorderThickness="0"
Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="0"
MinHeight="0"
DockPanel.Dock="Top"
RenderTransform="{x:Null}">
<RepeatButton.IsVisible>
<MultiBinding
Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="0">
<Binding Path="VerticalScrollBarVisibility"
RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</RepeatButton.IsVisible>
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Width="8"
Height="8"
Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
</RepeatButton>
@@ -49,20 +50,21 @@
Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="0"
DockPanel.Dock="Bottom"
MinHeight="0"
RenderTransform="{x:Null}">
<RepeatButton.IsVisible>
<MultiBinding
Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
ConverterParameter="100">
<Binding Path="VerticalScrollBarVisibility"
RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</RepeatButton.IsVisible>
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Width="8"
Height="8"
Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
</RepeatButton>
@@ -287,7 +289,7 @@
<Setter Property="Content">
<Template>
<Ellipse Fill="{Binding $parent[MenuItem].Foreground}"
Margin="4" Width="8" Height="8" />
Margin="4" Width="6" Height="6" />
</Template>
</Setter>
</Style>
@@ -297,7 +299,7 @@
<Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
<Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}"/>
<Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
<!-- Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future. -->
<Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
<Setter Property="Template">
@@ -396,4 +398,4 @@
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

View File

@@ -377,9 +377,10 @@
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
<Setter Property="Cursor" Value="Hand" />
@@ -404,15 +405,18 @@
<ContentPresenter
Name="PART_OnContentPresenter"
IsVisible="{TemplateBinding IsChecked}"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter
Name="PART_OffContentPresenter"
IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
<ContentPresenter
Name="PART_ContentPresenter"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentPresenter.IsVisible>
@@ -432,24 +436,20 @@
<Setter Property="RenderTransform" Value="scale(0.98)" />
</Style>
<Style Selector="^ /template/ Border#Background">
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="Background" Value="{TemplateBinding Background}" />
</Style>
<Style Selector="^:pointerover /template/ Border#Background">
<Style Selector="^:pointerover">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#Background">
<Style Selector="^:pressed">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
<Style Selector="^:disabled /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
<Style Selector="^.Large">
@@ -460,15 +460,5 @@
<Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
<Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
</Style>
<Style Selector="^ /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
</Style>
<Style Selector="^:disabled /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
<!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -1,8 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="MenuScrollViewerUpButtonGlyph" ResourceKey="SemiIconChevronUp" />
<StaticResource x:Key="MenuScrollViewerDownButtonGlyph" ResourceKey="SemiIconChevronDown" />
<StaticResource x:Key="MenuScrollViewerUpButtonGlyph" ResourceKey="SemiIconCaretUp" />
<StaticResource x:Key="MenuScrollViewerDownButtonGlyph" ResourceKey="SemiIconCaretDown" />
<StaticResource x:Key="MenuItemExpandIconGlyph" ResourceKey="SemiIconChevronRight" />
<StaticResource x:Key="MenuCheckGlyph" ResourceKey="SemiIconCheckBoxTick" />
<StaticResource x:Key="MenuCheckGlyph" ResourceKey="SemiIconTick" />
<!-- MenuFlyout -->
<StaticResource x:Key="MenuFlyoutBorderThickness" ResourceKey="SemiBorderThicknessControl" />
<Thickness x:Key="MenuFlyoutPadding">0 4</Thickness>
@@ -16,7 +16,7 @@
<StaticResource x:Key="MenuItemCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
<x:Double x:Key="MenuItemSeparatorHeight">1</x:Double>
<StaticResource x:Key="MenuItemSeparatorMargin" ResourceKey="SemiThicknessSuperTight" />
<Thickness x:Key="MenuItemIconMargin">0 0 12 0</Thickness>
<Thickness x:Key="MenuItemIconMargin">0 0 8 0</Thickness>
<Thickness x:Key="MenuItemInputGestureTextMargin">4 0</Thickness>
<Thickness x:Key="MenuItemExpandIconMargin">4 0</Thickness>
</ResourceDictionary>