zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-26 11:17:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance Icon related Button in demo.

Browse Source
This commit is contained in:
Zhang Dian
2025-01-04 02:16:48 +08:00
parent 67fd0c4ca3
commit 86848b548f
7 changed files with 75 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
View File

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

3
demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
View File

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

3
demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
View File

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

51
demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
View File

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

47
demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
View File

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

40
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

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

34
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
View File

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