Merge pull request #45 from irihitech/badge

Optimize Badge
This commit is contained in:
Dong Bin
2024-02-26 01:00:31 +08:00
committed by GitHub
6 changed files with 400 additions and 174 deletions

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>