chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add AI style for IconButton. (#823)

Browse Source 
* feat: add AI style for IconButton.

* feat: update package references for CommunityToolkit.Mvvm, Semi.Avalonia, and add SkiaSharp.
This commit is contained in:
Zhang Dian
2025-11-15 15:37:25 +08:00
committed by GitHub
parent 76ea435618
commit fa94841ab9
3 changed files with 182 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
demo/Ursa.Demo/Pages/IconButtonDemo.axaml
View File

@@ -158,6 +158,52 @@
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</Border> </Border>
<Border Theme="{StaticResource CardBorder}">
<StackPanel HorizontalAlignment="Left" Spacing="16">
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{StaticResource SolidIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource SolidIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource SolidIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{StaticResource OutlineIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource OutlineIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource OutlineIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Primary" Classes="Colorful Primary" Theme="{StaticResource BorderlessIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Tertiary" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Content="Disabled" Classes="Colorful Primary" Theme="{StaticResource BorderlessIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Tertiary" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource SolidIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Tertiary" Theme="{StaticResource SolidIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource SolidIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource OutlineIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Tertiary" Theme="{StaticResource OutlineIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource OutlineIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16" LineSpacing="16">
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource BorderlessIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Tertiary" Theme="{StaticResource BorderlessIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconAIFilled}" Classes="Colorful Primary" Theme="{StaticResource BorderlessIconButton}" IsEnabled="False" />
</WrapPanel>
</StackPanel>
</Border>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

5
demo/Ursa.Demo/Ursa.Demo.csproj
View File

@@ -18,8 +18,9 @@
<PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" /> <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.--> <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" /> <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.0" /> <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
<PackageReference Include="Semi.Avalonia" Version="11.2.1.9" /> <PackageReference Include="Semi.Avalonia" Version="11.3.7.1" />
<PackageReference Include="SkiaSharp" Version="3.119.0" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>

156
src/Ursa.Themes.Semi/Controls/IconButton.axaml
View File

@@ -4,31 +4,90 @@
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa"
xmlns:converters="using:Ursa.Themes.Semi.Converters"> xmlns:converters="using:Ursa.Themes.Semi.Converters">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="400"> <StackPanel Margin="16" Spacing="16">
<u:IconButton Icon="{StaticResource SemiIconCamera}" <WrapPanel ItemSpacing="16">
Content="Button" Foreground="Black" /> <u:IconButton Content="Default" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" <u:IconButton Content="Primary" Classes="Primary" />
Classes="Primary" Content="Button" Foreground="Black" /> <u:IconButton Content="Secondary" Classes="Secondary" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" <u:IconButton Content="Tertiary" Classes="Tertiary" />
Classes="Secondary" Content="Button" /> <u:IconButton Content="Success" Classes="Success" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" <u:IconButton Content="Warning" Classes="Warning" />
IsEnabled="False" Classes="Tertiary" Content="Button" /> <u:IconButton Content="Danger" Classes="Danger" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" <u:IconButton Content="Disabled" Classes="Danger" IsEnabled="False" />
Theme="{DynamicResource SolidIconButton}" Classes="Success" Content="Button" /> </WrapPanel>
<u:IconButton Icon="{StaticResource SemiIconCamera}" <WrapPanel ItemSpacing="16">
Theme="{DynamicResource OutlineIconButton}" Classes="Warning" Content="Button" /> <u:IconButton Content="Default" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Icon="{StaticResource SemiIconCamera}" <u:IconButton Content="Primary" Classes="Primary" Theme="{DynamicResource SolidIconButton}" />
Theme="{DynamicResource BorderlessIconButton}" Classes="Danger" Content="Button" /> <u:IconButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource SolidIconButton}" />
<Button Content="Button" Foreground="Black" /> <u:IconButton Content="Success" Classes="Success" Theme="{DynamicResource SolidIconButton}" />
<Button Classes="Primary" Content="Button" Foreground="Black" /> <u:IconButton Content="Warning" Classes="Warning" Theme="{DynamicResource SolidIconButton}" />
<Button Classes="Secondary" Content="Button" /> <u:IconButton Content="Danger" Classes="Danger" Theme="{DynamicResource SolidIconButton}" />
<Button IsEnabled="False" Classes="Tertiary" Content="Button" /> <u:IconButton Content="Disabled" Classes="Danger" Theme="{DynamicResource SolidIconButton}" IsEnabled="False" />
<Button Theme="{DynamicResource SolidButton}" Classes="Success" Content="Button" /> </WrapPanel>
<Button Theme="{DynamicResource OutlineButton}" Classes="Warning" Content="Button" /> <WrapPanel ItemSpacing="16">
<Button Theme="{DynamicResource BorderlessButton}" Classes="Danger" Content="Button" /> <u:IconButton Content="Default" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Primary" Classes="Primary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Success" Classes="Success" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Warning" Classes="Warning" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Danger" Classes="Danger" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Disabled" Classes="Danger" Theme="{DynamicResource OutlineIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16">
<u:IconButton Content="Default" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Primary" Classes="Primary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Secondary" Classes="Secondary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Tertiary" Classes="Tertiary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Success" Classes="Success" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Warning" Classes="Warning" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Danger" Classes="Danger" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Disabled" Classes="Danger" Theme="{DynamicResource BorderlessIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16">
<u:IconButton Content="Default" Classes="Colorful" />
<u:IconButton Content="Primary" Classes="Colorful Primary" />
<u:IconButton Content="Secondary" Classes="Colorful Secondary" />
<u:IconButton Content="Tertiary" Classes="Colorful Tertiary" />
<u:IconButton Content="Success" Classes="Colorful Success" />
<u:IconButton Content="Warning" Classes="Colorful Warning" />
<u:IconButton Content="Danger" Classes="Colorful Danger" />
<u:IconButton Content="Disabled" Classes="Colorful Primary" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16">
<u:IconButton Content="Default" Classes="Colorful" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource SolidIconButton}" />
<u:IconButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource SolidIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16">
<u:IconButton Content="Default" Classes="Colorful" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource OutlineIconButton}" />
<u:IconButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource OutlineIconButton}" IsEnabled="False" />
</WrapPanel>
<WrapPanel ItemSpacing="16">
<u:IconButton Content="Default" Classes="Colorful" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Primary" Classes="Colorful Primary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Secondary" Classes="Colorful Secondary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Tertiary" Classes="Colorful Tertiary" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Success" Classes="Colorful Success" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Warning" Classes="Colorful Warning" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Danger" Classes="Colorful Danger" Theme="{DynamicResource BorderlessIconButton}" />
<u:IconButton Content="Disabled" Classes="Colorful Primary" Theme="{DynamicResource BorderlessIconButton}" IsEnabled="False" />
</WrapPanel>
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:IconButton}" TargetType="u:IconButton"> <ControlTheme x:Key="{x:Type u:IconButton}" TargetType="u:IconButton">
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" /> <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@@ -130,6 +189,12 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
</Style> </Style>
<Style Selector="^.Colorful">
<Style Selector="^.Primary /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultColorfulPrimaryForeground}" />
</Style>
</Style>
<Style Selector="^:pointerover /template/ Border#PART_Background"> <Style Selector="^:pointerover /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
@@ -314,6 +379,41 @@
</Style> </Style>
</Style> </Style>
<Style Selector="^.Colorful">
<Style Selector="^.Primary">
<Style Selector="^ /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryBackground}" />
</Style>
<Style Selector="^:pointerover /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulPrimaryPressedBackground}" />
</Style>
</Style>
<Style Selector="^.Tertiary">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidColorfulTertiaryForeground}" />
</Style>
<Style Selector="^ /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryBackground}" />
</Style>
<Style Selector="^:pointerover /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidColorfulTertiaryPressedBackground}" />
</Style>
</Style>
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
</Style> </Style>
@@ -348,6 +448,16 @@
<Style Selector="^.Danger /template/ Border#PART_Background"> <Style Selector="^.Danger /template/ Border#PART_Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style> </Style>
<Style Selector="^.Colorful">
<Style Selector="^.Primary">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonOutlineColorfulPrimaryForeground}" />
</Style>
<Style Selector="^ /template/ Border#PART_Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineColorfulPrimaryBorderBrush}" />
</Style>
</Style>
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style> </Style>