zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-03-11 12:10:48 +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"
HorizontalAlignment="Right"
IsChecked="True"
Theme="{DynamicResource SplitViewToggleSwitch}" />
Theme="{DynamicResource IconBorderlessToggleSwitch}"
Content="{StaticResource SemiIconSidebar}" />
<Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
<Panel>
<TextBlock

3
demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
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

3
demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
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>

51
demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
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>

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">
<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>

40
demo/Semi.Avalonia.Demo/Views/MainView.axaml
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>

34
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
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>