Files
Ursa.Avalonia/src/Ursa.Themes.Semi/Controls/Badge.axaml
2025-09-16 20:49:05 +08:00

225 lines
13 KiB
XML

<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa">
<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" />
<ControlTheme x:Key="{x:Type u:Badge}" TargetType="{x:Type u:Badge}">
<!-- Set a very large corner radius to achieve pill look. -->
<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}">
<Panel
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
ClipToBounds="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}"
MinWidth="{DynamicResource BadgeMinWidth}"
MinHeight="{DynamicResource BadgeMinHeight}"
Padding="{DynamicResource BadgePadding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
RenderTransformOrigin=".5,.5"
Theme="{TemplateBinding BadgeTheme}"
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
Name="{x:Static u:Badge.PART_HeaderPresenter}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False"
IsTabStop="False"
TextElement.FontSize="{TemplateBinding BadgeFontSize}"
TextElement.Foreground="{TemplateBinding Foreground}"
ContentTemplate="{TemplateBinding HeaderTemplate}">
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource BadgeContentConverter}">
<Binding Path="Header" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="OverflowCount" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^[Dot=True] /template/ Border#PART_BadgeContainer">
<Setter Property="Padding" Value="0" />
<Setter Property="MinWidth" Value="{DynamicResource BadgeDotWidth}" />
<Setter Property="MinHeight" Value="{DynamicResource BadgeDotHeight}" />
</Style>
<Style Selector="^[Dot=True] /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[CornerPosition=TopRight] /template/ Border#PART_BadgeContainer">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[CornerPosition=BottomLeft] /template/ Border#PART_BadgeContainer">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^[CornerPosition=BottomRight] /template/ Border#PART_BadgeContainer">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^.Primary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
</Style>
<Style Selector="^.Secondary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
</Style>
<Style Selector="^.Tertiary /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
</Style>
<Style Selector="^.Success /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
</Style>
<Style Selector="^.Warning /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
</Style>
<Style Selector="^.Danger /template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
</Style>
<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="^/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>
<Style Selector="^.Secondary">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
</Style>
</Style>
<Style Selector="^.Tertiary">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
</Style>
</Style>
<Style Selector="^.Success">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
</Style>
</Style>
<Style Selector="^.Warning">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
</Style>
</Style>
<Style Selector="^.Danger">
<Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
</Style>
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
</Style>
</Style>
</Style>
<Style Selector="^.Inverted">
<Style Selector="^/template/ Border#PART_BadgeContainer">
<Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
<Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
</Style>
<Style Selector="^.Secondary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
</Style>
<Style Selector="^.Tertiary /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
</Style>
<Style Selector="^.Success /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
</Style>
<Style Selector="^.Warning /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
</Style>
<Style Selector="^.Danger /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>