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

feat: Add Badge and Badge demo.

Browse Source
This commit is contained in:
rabbitism
2023-02-20 11:13:51 +08:00
parent d6227788e7
commit 9208b1cd7e
19 changed files with 554 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/Ursa.Themes.Semi/Controls/Badge.axaml Normal file
View File

@@ -0,0 +1,134 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<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="u:Badge.CornerRadius" Value="100" />
<Setter Property="u:Badge.FontSize" Value="8" />
<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">
<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}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
MinWidth="{DynamicResource BadgeHeight}"
MinHeight="{DynamicResource BadgeHeight}"
Padding="{DynamicResource BadgePadding}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin=".5,.5"
Theme="{TemplateBinding BadgeTheme}"
UseLayoutRounding="False">
<ContentPresenter
Name="{x:Static u:Badge.PART_BadgeContentPresenter}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Focusable="False"
IsTabStop="False"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.Foreground="{DynamicResource BadgeForeground}">
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource BadgeContentConverter}">
<Binding Path="BadgeContent" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="OverflowCount" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^[Dot=True]">
<Setter Property="u:Badge.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}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
Name="{x:Static u:Badge.PART_BadgeContainer}"
Width="{DynamicResource BadgeDotHeight}"
Height="{DynamicResource BadgeDotHeight}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="{Binding !!BadgeContent, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin=".5,.5" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer">
<Setter Property="u:Badge.HorizontalAlignment" Value="Left" />
<Setter Property="u:Badge.VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[CornerPosition=TopRight] /template/ Border#PART_BadgeContainer">
<Setter Property="u:Badge.HorizontalAlignment" Value="Right" />
<Setter Property="u:Badge.VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[CornerPosition=BottomLeft] /template/ Border#PART_BadgeContainer">
<Setter Property="u:Badge.HorizontalAlignment" Value="Left" />
<Setter Property="u:Badge.VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^[CornerPosition=BottomRight] /template/ Border#PART_BadgeContainer">
<Setter Property="u:Badge.HorizontalAlignment" Value="Right" />
<Setter Property="u:Badge.VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^.Primary">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="u:Badge.Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
</Style>
</ControlTheme>
</ResourceDictionary>

1
src/Ursa.Themes.Semi/Controls/_index.axaml
View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

4
src/Ursa.Themes.Semi/Index.axaml
View File

@@ -8,10 +8,10 @@
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceInclude x:Key="Dark" Source="./Themes/Dark/_index.axaml" />
<ResourceInclude x:Key="Light" Source="Themes/Light/_index.axaml" />
<ResourceInclude x:Key="Light" Source="./Themes/Light/_index.axaml" />
</ResourceDictionary.ThemeDictionaries>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/Banner.axaml" />
<ResourceInclude Source="../Controls/_index.axaml" />
<ResourceInclude Source="Themes/Shared/_index.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

10
src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml Normal file
View File

@@ -0,0 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BadgeBorderBrush" Color="White" />
<SolidColorBrush x:Key="BadgeForeground" Color="White" />
<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>

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

@@ -1,3 +1,13 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BannerInformationBackground" Color="#FF053170" />
<SolidColorBrush x:Key="BannerInformationBorderBrush" Color="#FF54A9FF" />
<SolidColorBrush x:Key="BannerWarningBackground" Color="#FF551F03" />
<SolidColorBrush x:Key="BannerWarningBorderBrush" Color="#FFFFAE43" />
<SolidColorBrush x:Key="BannerErrorBackground" Color="#FF6C090B" />
<SolidColorBrush x:Key="BannerErrorBorderBrush" Color="#FFFC725A" />
<SolidColorBrush x:Key="BannerSuccessBackground" Color="#FF123C19" />
<SolidColorBrush x:Key="BannerSuccessBorderBrush" Color="#FF5DC264" />
<SolidColorBrush x:Key="BannerCloseButtonForeground" Opacity="0.6" Color="#FFF9F9F9" />
</ResourceDictionary>

1
src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

10
src/Ursa.Themes.Semi/Themes/Light/Badge.axaml Normal file
View File

@@ -0,0 +1,10 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BadgeBorderBrush" Color="White" />
<SolidColorBrush x:Key="BadgeForeground" Color="White" />
<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>

1
src/Ursa.Themes.Semi/Themes/Light/_index.axaml
View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

8
src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml Normal file
View File

@@ -0,0 +1,8 @@
<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>
<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>

1
src/Ursa.Themes.Semi/Themes/Shared/_index.axaml
View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>