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

feat: use Classes instead of Themes.

Browse Source
This commit is contained in:
Zhang Dian
2023-07-28 00:55:18 +08:00
parent 45b2f5eb41
commit 33761cf80c
4 changed files with 164 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
demo/Ursa.Demo/Pages/DualBadgeDemo.axaml
View File

@@ -8,101 +8,140 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<u:DualBadge>
2.4k
</u:DualBadge>
<u:DualBadge>
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<UserControl.Styles>
<Style Selector="StackPanel > u|DualBadge">
<Setter Property="Margin" Value="0 0 10 0" />
</Style>
</UserControl.Styles>
<u:DualBadge
Header="downloads">
2.4k
</u:DualBadge>
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock Text="Flat:" />
<StackPanel Orientation="Horizontal">
<u:DualBadge>
2.4k
</u:DualBadge>
<u:DualBadge>
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<u:DualBadge
Header="downloads">
2.4k
</u:DualBadge>
<u:DualBadge
Header="downloads">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
</StackPanel>
<u:DualBadge
Header="downloads">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<TextBlock Text="FlatSquare:" />
<StackPanel Orientation="Horizontal">
<u:DualBadge Classes="FlatSquare">
2.4k
</u:DualBadge>
<u:DualBadge Classes="FlatSquare">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<u:DualBadge
Classes="FlatSquare"
Header="downloads">
2.4k
</u:DualBadge>
<u:DualBadge
Classes="FlatSquare"
Header="downloads">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
</StackPanel>
<!--
<u:DualBadge Classes="FlatSquare">
2.4k
</u:DualBadge>
<TextBlock Text="Plastic:" />
<StackPanel Orientation="Horizontal">
<u:DualBadge Classes="Plastic">
2.4k
</u:DualBadge>
<u:DualBadge Classes="Plastic">
<u:DualBadge.Icon>
<PathIcon
Width="12"
Height="12"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<u:DualBadge
Classes="Plastic"
Header="downloads">
2.4k
</u:DualBadge>
<u:DualBadge
Classes="Plastic"
Header="downloads">
<u:DualBadge.Icon>
<PathIcon
Width="12"
Height="12"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
</StackPanel>
<u:DualBadge Classes="FlatSquare">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<u:DualBadge
Classes="FlatSquare"
Header="downloads">
2.4k
</u:DualBadge>
<u:DualBadge
Classes="FlatSquare"
Header="downloads">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
-->
<u:DualBadge Theme="{StaticResource ForTheBadge}">
2.4K
</u:DualBadge>
<u:DualBadge Theme="{StaticResource ForTheBadge}">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4K
</u:DualBadge>
<u:DualBadge
Theme="{StaticResource ForTheBadge}"
Header="DOWNLOADS">
2.4K
</u:DualBadge>
<u:DualBadge
Theme="{StaticResource ForTheBadge}"
Header="DOWNLOADS">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4K
</u:DualBadge>
</StackPanel>
<TextBlock Text="ForTheBadge:" />
<StackPanel Orientation="Horizontal">
<u:DualBadge Classes="ForTheBadge">
2.4K
</u:DualBadge>
<u:DualBadge Classes="ForTheBadge">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4K
</u:DualBadge>
<u:DualBadge
Classes="ForTheBadge"
Header="DOWNLOADS">
2.4K
</u:DualBadge>
<u:DualBadge
Classes="ForTheBadge"
Header="DOWNLOADS">
<u:DualBadge.Icon>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
</u:DualBadge.Icon>
2.4K
</u:DualBadge>
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>

38
src/Ursa.Themes.Semi/Controls/DualBadge.axaml
View File

@@ -59,31 +59,23 @@
</ControlTemplate>
</Setter>
<Style Selector="^.FlatSquare">
<Setter Property="CornerRadius" Value="0" />
</Style>
<Style Selector="^.Plastic">
<Setter Property="Padding" Value="4 0" />
<Setter Property="HeaderBackground" Value="{DynamicResource DualBadgePlasticHeaderBackground}" />
<Setter Property="Background" Value="{DynamicResource DualBadgePlasticBackground}" />
</Style>
<Style Selector="^.ForTheBadge">
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Padding" Value="10 6" />
</Style>
<Style Selector="^:header-empty">
<Setter Property="HeaderBackground" Value="{Binding Background, RelativeSource={RelativeSource Self}}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="FlatSquare"
BasedOn="{StaticResource {x:Type u:DualBadge}}"
TargetType="u:DualBadge">
<Setter Property="CornerRadius" Value="0" />
</ControlTheme>
<ControlTheme
x:Key="Plastic"
BasedOn="{StaticResource {x:Type u:DualBadge}}"
TargetType="u:DualBadge">
<Setter Property="Background">
</Setter>
</ControlTheme>
<ControlTheme
x:Key="ForTheBadge"
BasedOn="{StaticResource {x:Type u:DualBadge}}"
TargetType="u:DualBadge">
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Padding" Value="6 6" />
</ControlTheme>
</ResourceDictionary>

10
src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml
View File

@@ -1,13 +1,21 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="DualBadgeDefaultIconForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<LinearGradientBrush x:Key="DualBadgeDefaultHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF555B61" Offset="0" />
<GradientStop Color="#FF41464C" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF5AC262" Offset="0" />
<GradientStop Color="#FF3BB346" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="DualBadgePlasticHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF555B61" Offset="0" />
<GradientStop Color="#FF2E3238" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="DualBadgePlasticBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF5AC262" Offset="0" />
<GradientStop Color="#FF30953B" Offset="1" />
</LinearGradientBrush>
</ResourceDictionary>

11
src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml
View File

@@ -1,14 +1,21 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="DualBadgeDefaultIconForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<LinearGradientBrush x:Key="DualBadgeDefaultHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF555B61" Offset="0" />
<GradientStop Color="#FF41464C" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF5AC262" Offset="0" />
<GradientStop Color="#FF3BB346" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="DualBadgePlasticHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF555B61" Offset="0" />
<GradientStop Color="#FF2E3238" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="DualBadgePlasticBackground" StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Color="#FF5AC262" Offset="0" />
<GradientStop Color="#FF30953B" Offset="1" />
</LinearGradientBrush>
</ResourceDictionary>