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

Merge pull request #45 from irihitech/badge

Browse Source 
Optimize Badge
This commit is contained in:
Dong Bin
2024-02-26 01:00:31 +08:00
committed by GitHub
parent 8e718eb8b8 5e6db004ee
commit fbc84c4dc8
6 changed files with 400 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,126 +8,254 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="24"
HorizontalAlignment="Left"
ClipToBounds="False">
<StackPanel.Styles>
<Style Selector="u|Badge">
<Setter Property="Margin" Value="14" />
</Style>
<Style Selector="Border">
<Setter Property="Background" Value="Orange" />
</Style>
</StackPanel.Styles>
<TextBlock Text="Hello" />
<u:Badge
HorizontalAlignment="Center"
BadgeContent="500"
OverflowCount="100">
<Border Width="100" Height="50" />
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge BadgeContent="5" CornerPosition="TopLeft">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="TopRight">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="BottomLeft">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="BottomRight">
<Border Width="100" Height="50" />
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel
Margin="24"
HorizontalAlignment="Left"
ClipToBounds="False">
<StackPanel.Styles>
<Style Selector="u|Badge">
<Setter Property="Margin" Value="14" />
</Style>
<Style Selector="u|Badge > Border">
<Setter Property="Background" Value="Orange" />
<Setter Property="CornerRadius" Value="8" />
</Style>
</StackPanel.Styles>
<StackPanel Orientation="Horizontal">
<u:Badge
HorizontalAlignment="Center"
Header="500"
OverflowCount="100">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="SUCCEED!">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="Hello" />
<u:Badge Header="Hello" Dot="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5" CornerPosition="TopLeft">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="5" CornerPosition="TopRight">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="5" CornerPosition="BottomLeft">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="5" CornerPosition="BottomRight">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="VIP"
CornerPosition="TopLeft"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="TopRight"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="BottomLeft"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="BottomRight"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<u:Badge HorizontalAlignment="Stretch" Header="VIP">
<Border Height="50" />
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Primary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Secondary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Tertiary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Warning">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Danger">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Success">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Light Primary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Secondary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Tertiary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Warning">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Danger">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Success">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Inverted Primary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Secondary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Tertiary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Warning">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Danger">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Success">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Primary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Secondary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Tertiary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Warning"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Danger"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Success"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Light Primary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Secondary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Tertiary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Warning"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Danger"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Success"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<Border Background="LightGray" CornerRadius="4">
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Inverted Primary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Primary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Secondary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Tertiary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Warning"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Danger"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
</Border>
</StackPanel>
<u:Badge BadgeContent="SUCCEED!">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
<Border Height="50" />
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge
BadgeContent="VIP"
CornerPosition="TopLeft"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="TopRight"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="BottomLeft"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="BottomRight"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge BadgeContent="URSA" Classes="Primary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Secondary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Tertiary">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Warning">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Danger">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
BadgeContent="URSA"
Classes="Primary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Secondary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Tertiary"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Warning"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Danger"
Dot="True">
<Border Width="100" Height="50" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
<u:Badge
VerticalAlignment="Center"
BadgeContent="Hello"
Dot="True" />
</StackPanel>
</StackPanel>
</UserControl>
</ScrollViewer>
</UserControl>

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

@@ -9,22 +9,23 @@
<ControlTheme x:Key="{x:Type u:Badge}" TargetType="{x:Type u:Badge}">
<!-- Set a very large corner radius to achieve pill look. -->
<Setter Property="u:Badge.CornerRadius" Value="100" />
<Setter Property="u:Badge.FontSize" Value="14" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
<Setter Property="u:Badge.ClipToBounds" Value="False" />
<Setter Property="u:Badge.HorizontalAlignment" Value="Center" />
<Setter Property="u:Badge.VerticalAlignment" Value="Center" />
<Setter Property="u:Badge.BorderThickness" Value="{DynamicResource BadgeBorderThickness}" />
<Setter Property="u:Badge.UseLayoutRounding" Value="False" />
<Setter Property="u:Badge.BorderBrush" Value="{DynamicResource BadgeBorderBrush}" />
<Setter Property="u:Badge.Template">
<Setter Property="CornerRadius" Value="{DynamicResource BadgeCornerRadius}" />
<Setter Property="BadgeFontSize" Value="{DynamicResource BadgeFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource BadgeForeground}" />
<Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="{DynamicResource BadgeBorderThickness}" />
<Setter Property="UseLayoutRounding" Value="False" />
<Setter Property="BorderBrush" Value="{DynamicResource BadgeBorderBrush}" />
<Setter Property="CornerPosition" Value="{DynamicResource BadgeCornerPosition}" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Badge}">
<Grid
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
ClipToBounds="False">
<ContentPresenter
Name="{x:Static u:Badge.PART_ContentPresenter}"
Margin="{TemplateBinding Padding}"
@@ -34,8 +35,8 @@
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
MinWidth="{DynamicResource BadgeHeight}"
MinHeight="{DynamicResource BadgeHeight}"
MinWidth="{DynamicResource BadgeMinWidth}"
MinHeight="{DynamicResource BadgeMinHeight}"
Padding="{DynamicResource BadgePadding}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
@@ -43,21 +44,21 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
IsVisible="{Binding !!Header, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin=".5,.5"
Theme="{TemplateBinding BadgeTheme}"
UseLayoutRounding="False">
<ContentPresenter
Name="{x:Static u:Badge.PART_BadgeContentPresenter}"
Name="{x:Static u:Badge.PART_HeaderPresenter}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False"
IsTabStop="False"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.Foreground="{DynamicResource BadgeForeground}">
TextElement.FontSize="{TemplateBinding BadgeFontSize}"
TextElement.Foreground="{TemplateBinding Foreground}">
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource BadgeContentConverter}">
<Binding Path="BadgeContent" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="Header" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="OverflowCount" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</ContentPresenter.Content>
@@ -83,7 +84,7 @@
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
Width="{DynamicResource BadgeDotHeight}"
Width="{DynamicResource BadgeDotWidth}"
Height="{DynamicResource BadgeDotHeight}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
@@ -91,7 +92,7 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
IsVisible="{Binding !!Header, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin=".5,.5" />
</Grid>
</ControlTemplate>
@@ -130,5 +131,56 @@
<Style Selector="^.Danger">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
</Style>
<Style Selector="^.Light">
<Style Selector="^.Primary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
</Style>
</Style>
<Style Selector="^.Inverted">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
<Style Selector="^.Primary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

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

@@ -1,10 +1,33 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="White" />
<SolidColorBrush x:Key="BadgeForeground" Color="White" />
<SolidColorBrush x:Key="BadgeBorderBrush" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" />
<!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FFFC725A" />
</ResourceDictionary>
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" />
<!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#FF003D8F" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#FF004B83" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#FF2E3238" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FF7E3100" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FFFC725A" />
<SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FF8E0805" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" />
<SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" />
<!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#FF40B4F3" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#FF888D92" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FFFC725A" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" />
</ResourceDictionary>

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

@@ -1,10 +1,33 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BadgeBorderBrush" Opacity="0.08" Color="#1C1F23" />
<SolidColorBrush x:Key="BadgeBorderBrush" Color="White"/>
<SolidColorBrush x:Key="BadgeForeground" Color="White" />
<!-- Solid -->
<SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" />
<SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#F93920" />
</ResourceDictionary>
<SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#3BB346" />
<!-- Light -->
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#0077FA" />
<SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#D4ECFF" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#CEEEFC" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#E6E8EA" />
<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="BadgeLightSuccessBadgeBackground" Color="#D0F0D1" />
<!-- Inverted -->
<SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="White" />
<SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#0077F0" />
<SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#0095EE" />
<SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#6B7075" />
<SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FC8800" />
<SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#F93920" />
<SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#3BB346" />
</ResourceDictionary>

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

@@ -1,8 +1,14 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<x:Double x:Key="BadgeHeight">18</x:Double>
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:Ursa.Common;assembly=Ursa">
<x:Double x:Key="BadgeMinWidth">18</x:Double>
<x:Double x:Key="BadgeMinHeight">18</x:Double>
<x:Double x:Key="BadgeDotWidth">8</x:Double>
<x:Double x:Key="BadgeDotHeight">8</x:Double>
<Thickness x:Key="BadgePadding">6,0</Thickness>
<Thickness x:Key="BadgeBorderThickness">1</Thickness>
<x:Double x:Key="BadgeFontSize">8</x:Double>
</ResourceDictionary>
<x:Double x:Key="BadgeFontSize">10</x:Double>
<CornerRadius x:Key="BadgeCornerRadius">100</CornerRadius>
<common:CornerPosition x:Key="BadgeCornerPosition">TopRight</common:CornerPosition>
</ResourceDictionary>

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

@@ -1,7 +1,6 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Presenters;
using Avalonia.Controls.Primitives;
using Avalonia.Interactivity;
using Avalonia.Media;
@@ -10,18 +9,14 @@ using Ursa.Common;
namespace Ursa.Controls;
[TemplatePart(PART_ContentPresenter, typeof(ContentPresenter))]
[TemplatePart(PART_BadgeContainer, typeof(Border))]
[TemplatePart(PART_BadgeContentPresenter, typeof(ContentPresenter))]
public class Badge: ContentControl
public class Badge: HeaderedContentControl
{
public const string PART_ContentPresenter = "PART_ContentPresenter";
public const string PART_BadgeContainer = "PART_BadgeContainer";
public const string PART_BadgeContentPresenter = "PART_BadgeContentPresenter";
private ContentPresenter? _content;
public const string PART_HeaderPresenter = "PART_HeaderPresenter";
private Border? _badgeContainer;
private ContentPresenter? _badgeContent;
public static readonly StyledProperty<ControlTheme> BadgeThemeProperty = AvaloniaProperty.Register<Badge, ControlTheme>(
nameof(BadgeTheme));
@@ -39,14 +34,6 @@ public class Badge: ContentControl
set => SetValue(DotProperty, value);
}
public static readonly StyledProperty<object?> BadgeContentProperty = AvaloniaProperty.Register<Badge, object?>(
nameof(BadgeContent));
public object? BadgeContent
{
get => GetValue(BadgeContentProperty);
set => SetValue(BadgeContentProperty, value);
}
public static readonly StyledProperty<CornerPosition> CornerPositionProperty = AvaloniaProperty.Register<Badge, CornerPosition>(
nameof(CornerPosition));
public CornerPosition CornerPosition
@@ -63,17 +50,24 @@ public class Badge: ContentControl
set => SetValue(OverflowCountProperty, value);
}
public static readonly StyledProperty<double> BadgeFontSizeProperty = AvaloniaProperty.Register<Badge, double>(
nameof(BadgeFontSize));
public double BadgeFontSize
{
get => GetValue(BadgeFontSizeProperty);
set => SetValue(BadgeFontSizeProperty, value);
}
static Badge()
{
BadgeContentProperty.Changed.AddClassHandler<Badge>((badge, args) => badge.UpdateBadgePosition());
HeaderProperty.Changed.AddClassHandler<Badge>((badge, args) => badge.UpdateBadgePosition());
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
_content = e.NameScope.Find<ContentPresenter>(PART_ContentPresenter);
_badgeContainer = e.NameScope.Find<Border>(PART_BadgeContainer);
_badgeContent = e.NameScope.Find<ContentPresenter>(PART_BadgeContentPresenter);
}
protected override void OnLoaded(RoutedEventArgs e)
@@ -92,7 +86,7 @@ public class Badge: ContentControl
{
var vertical = CornerPosition is CornerPosition.BottomLeft or CornerPosition.BottomRight ? 1 : -1;
var horizontal = CornerPosition is CornerPosition.TopRight or CornerPosition.BottomRight ? 1 : -1;
if (_badgeContainer is not null && _content?.Child is not null)
if (_badgeContainer is not null && base.Presenter?.Child is not null)
{
_badgeContainer.RenderTransform = new TransformGroup()
{