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

Merge pull request #544 from irihitech/avatar

Browse Source 
Enhance Avatar & Badge
This commit is contained in:
Dong Bin
2025-01-17 16:10:12 +08:00
committed by GitHub
parent ea4268ed11 a366ca6f0c
commit 2ab46bd77e
12 changed files with 391 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/Ursa.Demo/Pages/AvatarDemo.axaml
View File

@@ -93,5 +93,11 @@
</u:Avatar.HoverMask> </u:Avatar.HoverMask>
</u:Avatar> </u:Avatar>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Padding="4" />
<u:Avatar Content="Semi" Padding="10" />
</StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

319
demo/Ursa.Demo/Pages/BadgeDemo.axaml
View File

@@ -16,341 +16,306 @@
<StackPanel.Styles> <StackPanel.Styles>
<Style Selector="u|Badge"> <Style Selector="u|Badge">
<Setter Property="Margin" Value="14" /> <Setter Property="Margin" Value="10" />
<Style Selector="^ Border">
<Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
<Setter Property="CornerRadius" Value="8" />
<Style Selector="^ TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style>
</Style> </Style>
</StackPanel.Styles> </StackPanel.Styles>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge <u:Badge Header="5">
HorizontalAlignment="Center" <u:Avatar Classes="Square Blue" Content="BM" />
Header="500"
OverflowCount="100">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="SUCCEED!"> <u:Badge Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Blue" Content="YL" />
<TextBlock Text="■■■"/> </u:Badge>
</Border> <!-- <u:Badge> -->
<!-- <u:Badge.Header> -->
<!-- <PathIcon -->
<!-- Theme="{StaticResource PathIcon}" -->
<!-- Data="{StaticResource SemiIconLock}" /> -->
<!-- </u:Badge.Header> -->
<!-- <u:Avatar Classes="Square Blue" Content="YL" /> -->
<!-- </u:Badge> -->
<u:Badge Header="NEW">
<u:Avatar Classes="Square LightBlue" Content="WF" />
</u:Badge> </u:Badge>
<u:Badge Header="Hello" />
<u:Badge Header="Hello" Dot="True" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="5" CornerPosition="TopLeft"> <u:Badge Header="99">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Teal" Content="ZH" />
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="5" CornerPosition="TopRight"> <u:Badge Header="100">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Teal" Content="HS" />
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="5" CornerPosition="BottomLeft"> <u:Badge Header="99" OverflowCount="10">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Green" Content="DY" />
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="5" CornerPosition="BottomRight"> <u:Badge Header="1000" OverflowCount="999">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Green" Content="TT" />
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge <u:Badge Classes="Danger" Header="VIP" CornerPosition="TopRight">
Header="VIP" <u:Avatar Classes="Square Amber" Content="ZH" />
CornerPosition="TopLeft"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge Classes="Danger" Header="VIP" CornerPosition="BottomRight">
Header="VIP" <u:Avatar Classes="Square Amber" Content="HS" />
CornerPosition="TopRight"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge Classes="Danger" Header="VIP" CornerPosition="TopLeft">
Header="VIP" <u:Avatar Classes="Square Orange" Content="DY" />
CornerPosition="BottomLeft"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge Classes="Danger" Header="VIP" CornerPosition="BottomLeft">
Header="VIP" <u:Avatar Classes="Square Orange" Content="TT" />
CornerPosition="BottomRight"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5">
<u:Avatar Classes="Square Indigo" Content="XZ" />
</u:Badge>
<u:Badge Header="5" Classes="Light">
<u:Avatar Classes="Square Indigo" Content="YB" />
</u:Badge>
<u:Badge Header="5" Classes="Inverted">
<u:Avatar Classes="Square LightGreen" Content="LX" />
</u:Badge>
<u:Badge Header="5" Dot="True">
<u:Avatar Classes="Square LightGreen" Content="YZ" />
</u:Badge>
<u:Badge Header="5" Classes="Light" Dot="True">
<u:Avatar Classes="Square Lime" Content="HW" />
</u:Badge>
<Border
Background="{DynamicResource SemiColorFill0}"
CornerRadius="4">
<u:Badge Header="5" Classes="Inverted" Dot="True">
<u:Avatar Classes="Square Lime" Content="XM" />
</u:Badge>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5">
<u:Avatar Classes="Square Violet" Content="MR" />
</u:Badge>
<u:Badge Header="5" Classes="Secondary">
<u:Avatar Classes="Square Violet" Content="YL" />
</u:Badge>
<u:Badge Header="5" Classes="Tertiary">
<u:Avatar Classes="Square Red" Content="ZW" />
</u:Badge>
<u:Badge Header="5" Classes="Warning">
<u:Avatar Classes="Square Red" Content="JL" />
</u:Badge>
<u:Badge Header="5" Classes="Danger">
<u:Avatar Classes="Square Pink" Content="RT" />
</u:Badge>
<u:Badge Header="5" Classes="Primary" Dot="True">
<u:Avatar Classes="Square Pink" Content="YF" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5" />
<u:Badge Classes="Light" Header="NEW" />
<u:Badge Classes="Danger" Header="99" OverflowCount="10" />
<u:Badge Classes="Primary" Dot="True" />
<u:Badge Classes="Secondary" Dot="True" />
<u:Badge Classes="Tertiary" Dot="True" />
<u:Badge Classes="Success" Dot="True" />
<u:Badge Classes="Warning" Dot="True" />
<u:Badge Classes="Danger" Dot="True" />
</StackPanel>
<u:Badge HorizontalAlignment="Stretch" Header="VIP"> <u:Badge HorizontalAlignment="Stretch" Header="VIP">
<Border Height="50"> <Border Theme="{StaticResource CardBorder}" Margin="0">
<TextBlock Text="■■■"/> <TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Stretch Space"
FontWeight="600" />
</Border> </Border>
</u:Badge> </u:Badge>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Primary"> <u:Badge Header="URSA" Classes="Primary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Secondary"> <u:Badge Header="URSA" Classes="Secondary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Tertiary"> <u:Badge Header="URSA" Classes="Tertiary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Success"> <u:Badge Header="URSA" Classes="Success">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Warning"> <u:Badge Header="URSA" Classes="Warning">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Danger"> <u:Badge Header="URSA" Classes="Danger">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Light Primary"> <u:Badge Header="URSA" Classes="Light Primary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Secondary"> <u:Badge Header="URSA" Classes="Light Secondary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Tertiary"> <u:Badge Header="URSA" Classes="Light Tertiary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Success"> <u:Badge Header="URSA" Classes="Light Success">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Warning"> <u:Badge Header="URSA" Classes="Light Warning">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Light Danger"> <u:Badge Header="URSA" Classes="Light Danger">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Indigo" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Inverted Primary"> <u:Badge Header="URSA" Classes="Inverted Primary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Secondary"> <u:Badge Header="URSA" Classes="Inverted Secondary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Tertiary"> <u:Badge Header="URSA" Classes="Inverted Tertiary">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Success"> <u:Badge Header="URSA" Classes="Inverted Success">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Warning"> <u:Badge Header="URSA" Classes="Inverted Warning">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge Header="URSA" Classes="Inverted Danger"> <u:Badge Header="URSA" Classes="Inverted Danger">
<Border Width="100" Height="50"> <u:Avatar Classes="Square LightGreen" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Primary" Classes="Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Secondary" Classes="Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Tertiary" Classes="Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Success" Classes="Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Warning" Classes="Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Danger" Classes="Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Lime" Content="Solid" />
<TextBlock Text="Solid"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Primary" Classes="Light Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Secondary" Classes="Light Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Tertiary" Classes="Light Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Success" Classes="Light Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Warning" Classes="Light Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Light Danger" Classes="Light Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Violet" Content="Light" />
<TextBlock Text="Light"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
<Border Background="{DynamicResource SemiGrey2}" CornerRadius="4">
<Border Background="{DynamicResource SemiColorFill0}" CornerRadius="4">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Primary" Classes="Inverted Primary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Secondary" Classes="Inverted Secondary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Tertiary" Classes="Inverted Tertiary"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Success" Classes="Inverted Success"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Warning" Classes="Inverted Warning"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge
Header="URSA" Header="URSA"
Classes="Inverted Danger" Classes="Inverted Danger"
Dot="True"> Dot="True">
<Border Width="100" Height="50"> <u:Avatar Classes="Square Pink" Content="Inverted" />
<TextBlock Text="Inverted"/>
</Border>
</u:Badge> </u:Badge>
</StackPanel> </StackPanel>
</Border> </Border>

70
demo/Ursa.Demo/Pages/IntroductionDemo.axaml
View File

@@ -133,58 +133,38 @@
</StackPanel> </StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8"> <StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
<u:Divider HorizontalContentAlignment="Right">Badge</u:Divider> <u:Divider HorizontalContentAlignment="Right">
<u:Badge Header="Badge" />
</u:Divider>
<WrapPanel Orientation="Horizontal"> <WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" CornerPosition="TopRight"> <u:Badge Classes="Light" Header="Pyro">
<Border Classes="Hover"> <u:Avatar Classes="Red" Content="火" />
<TextBlock Text="Pyro"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge Classes="Inverted" Header="500" OverflowCount="99">
HorizontalAlignment="Center" <u:Avatar Classes="Square Blue" Content="水" />
CornerPosition="TopRight"
Header="500"
OverflowCount="99">
<Border Classes="Hover">
<TextBlock Text="Hydro"/>
</Border>
</u:Badge> </u:Badge>
<u:Badge <u:Badge Classes="Secondary" Dot="True">
Header="Ursa" <u:Avatar Classes="Square Green" Content="风" />
CornerPosition="TopRight" </u:Badge>
Dot="True"> <u:Badge Classes="Tertiary" Header="Electro">
<Border Classes="Hover"> <u:Avatar Classes="Square Violet" Content="雷" />
<TextBlock Text="Ameno"/> </u:Badge>
</Border> <u:Badge Classes="Success" Header="Dendro" CornerPosition="BottomLeft">
<u:Avatar Classes="Square Lime" Content="草" />
</u:Badge>
<u:Badge Classes="Warning" Header="Cryo" CornerPosition="BottomRight">
<u:Avatar Classes="Square LightBlue" Content="冰" />
</u:Badge>
<u:Badge Classes="Danger" Header="Geo" CornerPosition="TopRight">
<u:Avatar Classes="Square Amber" Content="岩" />
</u:Badge> </u:Badge>
<u:Badge Header="Ursa" /> <u:Badge Header="Ursa" />
<u:Badge Header="Ursa" Dot="True" /> <u:Badge Dot="True" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" Classes="Secondary">
<Border Classes="Hover">
<TextBlock Text="Electro"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Tertiary" CornerPosition="BottomLeft">
<Border Classes="Hover">
<TextBlock Text="Dendro"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Warning" CornerPosition="BottomRight">
<Border Classes="Hover">
<TextBlock Text="Cryo"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Danger" CornerPosition="TopRight">
<Border Classes="Hover">
<TextBlock Text="Geo"/>
</Border>
</u:Badge>
</WrapPanel> </WrapPanel>
<u:Divider>DualBadge</u:Divider> <u:Divider>
<u:DualBadge Content="DualBadge" />
</u:Divider>
<WrapPanel Orientation="Horizontal"> <WrapPanel Orientation="Horizontal">
<u:DualBadge Header="downloads"> <u:DualBadge Header="downloads">
<u:DualBadge.Icon> <u:DualBadge.Icon>

17
src/Ursa.Themes.Semi/Controls/Avatar.axaml
View File

@@ -1,14 +1,20 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa">
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"> <Design.PreviewWith>
<converters:DivideByTwoConverter x:Key="DivideByTwoConverter" /> <StackPanel Margin="20" Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Padding="4" />
<u:Avatar Content="Semi" Padding="10" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}"> <ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
<Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" /> <Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" />
<Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" /> <Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" /> <Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" />
<Setter Property="Padding" Value="3" />
<Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" /> <Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
<Setter Property="Height" Value="{Binding $self.Width}" /> <Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
@@ -25,13 +31,18 @@
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" /> Background="{TemplateBinding Background}" />
<Viewbox
Margin="{TemplateBinding Padding}"
StretchDirection="DownOnly">
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" Name="PART_ContentPresenter"
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}" IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="Center" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" /> VerticalContentAlignment="Center" />
</Viewbox>
<Image Source="{TemplateBinding Source}" /> <Image Source="{TemplateBinding Source}" />
<ContentPresenter <ContentPresenter
Name="PART_HoverMask" Name="PART_HoverMask"

82
src/Ursa.Themes.Semi/Controls/Badge.axaml
View File

@@ -3,7 +3,30 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa" xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"
xmlns:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here --> <Design.PreviewWith>
<StackPanel Orientation="Horizontal" Margin="20" Width="300" Spacing="10">
<u:Badge Header="5">
<u:Avatar Classes="Square Blue" Content="BM" />
</u:Badge>
<u:Badge Dot="True">
<u:Avatar Classes="Square Blue" Content="YL" />
</u:Badge>
<u:Badge>
<u:Badge.Header>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconLock}" />
</u:Badge.Header>
<u:Avatar Classes="Square Blue" Content="YL" />
</u:Badge>
<u:Badge Header="NEW">
<u:Avatar Classes="Square LightBlue" Content="WF" />
</u:Badge>
<u:Badge Classes="Light" Header="Pyro" CornerPosition="BottomLeft">
<u:Avatar Classes="Red" Content="火" />
</u:Badge>
</StackPanel>
</Design.PreviewWith>
<converters:BadgeContentOverflowConverter x:Key="BadgeContentConverter" /> <converters:BadgeContentOverflowConverter x:Key="BadgeContentConverter" />
@@ -22,7 +45,7 @@
<Setter Property="CornerPosition" Value="{DynamicResource BadgeCornerPosition}" /> <Setter Property="CornerPosition" Value="{DynamicResource BadgeCornerPosition}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Badge}"> <ControlTemplate TargetType="{x:Type u:Badge}">
<Grid <Panel
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"
ClipToBounds="False"> ClipToBounds="False">
@@ -39,16 +62,19 @@
MinWidth="{DynamicResource BadgeMinWidth}" MinWidth="{DynamicResource BadgeMinWidth}"
MinHeight="{DynamicResource BadgeMinHeight}" MinHeight="{DynamicResource BadgeMinHeight}"
Padding="{DynamicResource BadgePadding}" Padding="{DynamicResource BadgePadding}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}"
RenderTransformOrigin=".5,.5" RenderTransformOrigin=".5,.5"
Theme="{TemplateBinding BadgeTheme}" Theme="{TemplateBinding BadgeTheme}"
UseLayoutRounding="False"> UseLayoutRounding="False">
<Border.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.Or}">
<Binding Path="Header" RelativeSource="{RelativeSource TemplatedParent}" Converter="{x:Static ObjectConverters.IsNotNull}" />
<Binding Path="Dot" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Border.IsVisible>
<ContentPresenter <ContentPresenter
Name="{x:Static u:Badge.PART_HeaderPresenter}" Name="{x:Static u:Badge.PART_HeaderPresenter}"
HorizontalAlignment="Center" HorizontalAlignment="Center"
@@ -65,40 +91,17 @@
</ContentPresenter.Content> </ContentPresenter.Content>
</ContentPresenter> </ContentPresenter>
</Border> </Border>
</Grid> </Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^[Dot=True]"> <Style Selector="^[Dot=True] /template/ Border#PART_BadgeContainer">
<Setter Property="Template"> <Setter Property="Padding" Value="0" />
<ControlTemplate TargetType="{x:Type u:Badge}"> <Setter Property="MinWidth" Value="{DynamicResource BadgeDotWidth}" />
<Grid <Setter Property="MinHeight" Value="{DynamicResource BadgeDotHeight}" />
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" </Style>
VerticalAlignment="{TemplateBinding VerticalAlignment}" <Style Selector="^[Dot=True] /template/ ContentPresenter#PART_HeaderPresenter">
ClipToBounds="False"> <Setter Property="IsVisible" Value="False" />
<ContentPresenter
Name="{x:Static u:Badge.PART_ContentPresenter}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{DynamicResource BadgeContentForeground}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
Width="{DynamicResource BadgeDotWidth}"
Height="{DynamicResource BadgeDotHeight}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}"
RenderTransformOrigin=".5,.5" />
</Grid>
</ControlTemplate>
</Setter>
</Style> </Style>
<Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer"> <Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer">
@@ -138,6 +141,12 @@
</Style> </Style>
<Style Selector="^.Light"> <Style Selector="^.Light">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
</Style>
<Style Selector="^.Primary"> <Style Selector="^.Primary">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
@@ -191,6 +200,7 @@
<Style Selector="^/template/ Border#PART_BadgeContainer"> <Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" /> <Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
</Style> </Style>
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
<Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" /> <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
</Style> </Style>

48
src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
View File

@@ -3,32 +3,32 @@
<SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" /> <SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeContentForeground" Color="White" /> <SolidColorBrush x:Key="BadgeContentForeground" Color="White" />
<!-- Solid --> <!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" /> <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" /> <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#FF888D92" /> <SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" /> <SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFFFAE43" /> <SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FFFC725A" /> <SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FC725A" />
<!-- Light --> <!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#FF54A9FF" /> <SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#FF003D8F" /> <SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#053170" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#FF40B4F3" /> <SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#FF004B83" /> <SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#003761" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#FF888D92" /> <SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#FF2E3238" /> <SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" /> <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" /> <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#123C19" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFFFAE43" /> <SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FF7E3100" /> <SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#551F03" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FFFC725A" /> <SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FC725A" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FF8E0805" /> <SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#6C090B" />
<!-- Inverted --> <!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" /> <SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#FF54A9FF" /> <SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#FF40B4F3" /> <SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#FF888D92" /> <SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#888D92" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" /> <SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#5DC264" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFFFAE43" /> <SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FFFC725A" /> <SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FC725A" />
</ResourceDictionary> </ResourceDictionary>

24
src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
View File

@@ -3,32 +3,32 @@
<SolidColorBrush x:Key="BadgeForeground" Color="White" /> <SolidColorBrush x:Key="BadgeForeground" Color="White" />
<SolidColorBrush x:Key="BadgeContentForeground" Color="#1C1F23" /> <SolidColorBrush x:Key="BadgeContentForeground" Color="#1C1F23" />
<!-- Solid --> <!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" /> <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" /> <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#6B7075" /> <SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FC8800" /> <SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#F93920" /> <SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
<!-- Light --> <!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#0077FA" /> <SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#D4ECFF" /> <SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#0095EE" /> <SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#CEEEFC" /> <SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#E9F7FD" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#6B7075" /> <SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#E6E8EA" /> <SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#F9F9F9" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FFEFD0" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FEE0D5" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#3BB346" /> <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#D0F0D1" /> <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#ECF7EC" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FFF8EA" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FEF2ED" />
<!-- Inverted --> <!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="White" /> <SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="White" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077F0" /> <SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#0095EE" /> <SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#6B7075" /> <SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FC8800" /> <SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#F93920" /> <SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
</ResourceDictionary> </ResourceDictionary>

4
src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
View File

@@ -6,9 +6,9 @@
<x:Double x:Key="BadgeMinHeight">18</x:Double> <x:Double x:Key="BadgeMinHeight">18</x:Double>
<x:Double x:Key="BadgeDotWidth">8</x:Double> <x:Double x:Key="BadgeDotWidth">8</x:Double>
<x:Double x:Key="BadgeDotHeight">8</x:Double> <x:Double x:Key="BadgeDotHeight">8</x:Double>
<Thickness x:Key="BadgePadding">6,0</Thickness> <Thickness x:Key="BadgePadding">4,0</Thickness>
<Thickness x:Key="BadgeBorderThickness">1</Thickness> <Thickness x:Key="BadgeBorderThickness">1</Thickness>
<x:Double x:Key="BadgeFontSize">10</x:Double> <x:Double x:Key="BadgeFontSize">12</x:Double>
<CornerRadius x:Key="BadgeCornerRadius">100</CornerRadius> <CornerRadius x:Key="BadgeCornerRadius">100</CornerRadius>
<common:CornerPosition x:Key="BadgeCornerPosition">TopRight</common:CornerPosition> <common:CornerPosition x:Key="BadgeCornerPosition">TopRight</common:CornerPosition>
</ResourceDictionary> </ResourceDictionary>

37
src/Ursa/Controls/Badge.cs
View File

@@ -18,40 +18,44 @@ public class Badge: HeaderedContentControl
private Border? _badgeContainer; private Border? _badgeContainer;
public static readonly StyledProperty<ControlTheme> BadgeThemeProperty = AvaloniaProperty.Register<Badge, ControlTheme>( public static readonly StyledProperty<ControlTheme> BadgeThemeProperty =
nameof(BadgeTheme)); AvaloniaProperty.Register<Badge, ControlTheme>(nameof(BadgeTheme));
public ControlTheme BadgeTheme public ControlTheme BadgeTheme
{ {
get => GetValue(BadgeThemeProperty); get => GetValue(BadgeThemeProperty);
set => SetValue(BadgeThemeProperty, value); set => SetValue(BadgeThemeProperty, value);
} }
public static readonly StyledProperty<bool> DotProperty = AvaloniaProperty.Register<Badge, bool>( public static readonly StyledProperty<bool> DotProperty =
nameof(Dot)); AvaloniaProperty.Register<Badge, bool>(nameof(Dot));
public bool Dot public bool Dot
{ {
get => GetValue(DotProperty); get => GetValue(DotProperty);
set => SetValue(DotProperty, value); set => SetValue(DotProperty, value);
} }
public static readonly StyledProperty<CornerPosition> CornerPositionProperty = AvaloniaProperty.Register<Badge, CornerPosition>( public static readonly StyledProperty<CornerPosition> CornerPositionProperty =
nameof(CornerPosition)); AvaloniaProperty.Register<Badge, CornerPosition>(nameof(CornerPosition));
public CornerPosition CornerPosition public CornerPosition CornerPosition
{ {
get => GetValue(CornerPositionProperty); get => GetValue(CornerPositionProperty);
set => SetValue(CornerPositionProperty, value); set => SetValue(CornerPositionProperty, value);
} }
public static readonly StyledProperty<int> OverflowCountProperty = AvaloniaProperty.Register<Badge, int>( public static readonly StyledProperty<int> OverflowCountProperty =
nameof(OverflowCount)); AvaloniaProperty.Register<Badge, int>(nameof(OverflowCount));
public int OverflowCount public int OverflowCount
{ {
get => GetValue(OverflowCountProperty); get => GetValue(OverflowCountProperty);
set => SetValue(OverflowCountProperty, value); set => SetValue(OverflowCountProperty, value);
} }
public static readonly StyledProperty<double> BadgeFontSizeProperty = AvaloniaProperty.Register<Badge, double>( public static readonly StyledProperty<double> BadgeFontSizeProperty =
nameof(BadgeFontSize)); AvaloniaProperty.Register<Badge, double>(nameof(BadgeFontSize));
public double BadgeFontSize public double BadgeFontSize
{ {
@@ -62,6 +66,7 @@ public class Badge: HeaderedContentControl
static Badge() static Badge()
{ {
HeaderProperty.Changed.AddClassHandler<Badge>((badge, _) => badge.UpdateBadgePosition()); HeaderProperty.Changed.AddClassHandler<Badge>((badge, _) => badge.UpdateBadgePosition());
DotProperty.Changed.AddClassHandler<Badge>((badge, _) => badge.UpdateBadgePosition());
} }
protected override void OnApplyTemplate(TemplateAppliedEventArgs e) protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
@@ -88,12 +93,14 @@ public class Badge: HeaderedContentControl
var horizontal = CornerPosition is CornerPosition.TopRight or CornerPosition.BottomRight ? 1 : -1; var horizontal = CornerPosition is CornerPosition.TopRight or CornerPosition.BottomRight ? 1 : -1;
if (_badgeContainer is not null && Presenter?.Child is not null) if (_badgeContainer is not null && Presenter?.Child is not null)
{ {
_badgeContainer.RenderTransform = new TransformGroup() _badgeContainer.RenderTransform = new TransformGroup
{ {
Children = new Transforms() Children =
{ [
new TranslateTransform(horizontal*_badgeContainer.Bounds.Width/2,vertical*_badgeContainer.Bounds.Height/2) new TranslateTransform(
} horizontal * _badgeContainer.Bounds.Width / 2,
vertical * _badgeContainer.Bounds.Height / 2)
]
}; };
} }
} }

9
src/Ursa/Converters/BadgeContentOverflowConverter.cs
View File

@@ -7,14 +7,15 @@ public class BadgeContentOverflowConverter: IMultiValueConverter
{ {
public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture) public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
{ {
string overflowMark = parameter is string s ? s : "+"; var overflowMark = parameter as string ?? "+";
if (double.TryParse(values[0]?.ToString(), out var b) && values[1] is int i and > 0) if (double.TryParse(values[0]?.ToString(), out var b) && values[1] is int count and > 0)
{ {
if (b > i) if (b > count)
{ {
return i + overflowMark; return $"{count}{overflowMark}";
} }
} }
return values[0]; return values[0];
} }
} }

22
src/Ursa/Converters/DivideByTwoConverter.cs
View File

@@ -1,22 +0,0 @@
using System.Globalization;
using Avalonia.Data.Converters;
namespace Ursa.Converters;
public class DivideByTwoConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is double d)
{
return d / 2;
}
return value;
}
public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

79
tests/HeadlessTest.Ursa/Controls/BadgeTests/BadgeTests.cs Normal file
View File

@@ -0,0 +1,79 @@
using Avalonia.Controls;
using Avalonia.Controls.Presenters;
using Avalonia.Controls.Templates;
using Avalonia.Headless.XUnit;
using UrsaControls = Ursa.Controls;
namespace HeadlessTest.Ursa.Controls.BadgeTests;
public class BadgeTests
{
[AvaloniaFact]
public void Badge_Container_Should_DisAppear_If_Header_Is_Null_And_Dot_Equals_False()
{
// Arrange
var window = new Window();
var badge = new UrsaControls.Badge
{
Header = string.Empty,
Dot = true
};
window.Content = badge;
window.Show();
Assert.True(badge.IsVisible);
var badgeContainer = badge.GetTemplateChildren().OfType<Border>()
.FirstOrDefault(a => a.Name == UrsaControls.Badge.PART_BadgeContainer);
Assert.NotNull(badgeContainer);
Assert.True(badgeContainer.IsVisible);
// Act
badge.Header = null;
// Assert
Assert.True(badgeContainer.IsVisible);
// Act
badge.Dot = false;
// Assert
Assert.False(badgeContainer.IsVisible);
}
[AvaloniaFact]
public void Badge_Container_Should_Overflow_If_Number_Larger_Than_OverflowCount()
{
// Arrange
var window = new Window();
var badge = new UrsaControls.Badge
{
Header = 0,
OverflowCount = 10
};
window.Content = badge;
window.Show();
Assert.True(badge.IsVisible);
var header = badge.GetTemplateChildren().OfType<ContentPresenter>()
.FirstOrDefault(a => a.Name == UrsaControls.Badge.PART_HeaderPresenter);
Assert.NotNull(header);
Assert.Equal(header.Content, 0);
// Act
badge.Header = 10;
// Assert
Assert.Equal(header.Content, 10);
// Act
badge.Header = 11;
Assert.Equal(header.Content, "10+");
// Act
badge.OverflowCount = 100;
Assert.Equal(header.Content, 11);
}
}