feat: Add Badge and Badge demo.
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:local="using:Ursa.Demo">
|
||||
<Application.Styles>
|
||||
<StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml" />
|
||||
<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
|
||||
<StyleInclude Source="avares://Ursa.Themes.Semi/Index.axaml" />
|
||||
</Application.Styles>
|
||||
</Application>
|
||||
|
||||
190
demo/Ursa.Demo/Pages/BadgeDemo.axaml
Normal file
190
demo/Ursa.Demo/Pages/BadgeDemo.axaml
Normal file
@@ -0,0 +1,190 @@
|
||||
<UserControl
|
||||
x:Class="Ursa.Demo.Pages.BadgeDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:u="https://irihi.tech/ursa"
|
||||
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>
|
||||
</StackPanel.Styles>
|
||||
<TextBlock Text="Hello" />
|
||||
<u:Badge
|
||||
HorizontalAlignment="Center"
|
||||
BadgeContent="500"
|
||||
OverflowCount="100">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<u:Badge BadgeContent="5" CornerPosition="TopLeft">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="5" CornerPosition="TopRight">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="5" CornerPosition="BottomLeft">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="5" CornerPosition="BottomRight">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
</StackPanel>
|
||||
<u:Badge BadgeContent="SUCCEED!">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
|
||||
<Border Height="50" Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<u:Badge
|
||||
BadgeContent="VIP"
|
||||
CornerPosition="TopLeft"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="VIP"
|
||||
CornerPosition="TopRight"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="VIP"
|
||||
CornerPosition="BottomLeft"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="VIP"
|
||||
CornerPosition="BottomRight"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<u:Badge BadgeContent="URSA" Classes="Primary">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="URSA" Classes="Secondary">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="URSA" Classes="Tertiary">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="URSA" Classes="Warning">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge BadgeContent="URSA" Classes="Danger">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<u:Badge
|
||||
BadgeContent="URSA"
|
||||
Classes="Primary"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="URSA"
|
||||
Classes="Secondary"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="URSA"
|
||||
Classes="Tertiary"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="URSA"
|
||||
Classes="Warning"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
<u:Badge
|
||||
BadgeContent="URSA"
|
||||
Classes="Danger"
|
||||
Dot="True">
|
||||
<Border
|
||||
Width="100"
|
||||
Height="50"
|
||||
Background="LightYellow" />
|
||||
</u:Badge>
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
|
||||
<u:Badge
|
||||
VerticalAlignment="Center"
|
||||
BadgeContent="Hello"
|
||||
Dot="True" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
18
demo/Ursa.Demo/Pages/BadgeDemo.axaml.cs
Normal file
18
demo/Ursa.Demo/Pages/BadgeDemo.axaml.cs
Normal file
@@ -0,0 +1,18 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Ursa.Demo.Pages;
|
||||
|
||||
public partial class BadgeDemo : UserControl
|
||||
{
|
||||
public BadgeDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,11 @@ public partial class BannerDemo : UserControl
|
||||
InitializeComponent();
|
||||
this.DataContext = new BannerDemoViewModel();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
|
||||
public class BannerDemoViewModel: ViewModelBase
|
||||
|
||||
@@ -16,10 +16,20 @@
|
||||
<vm:MainWindowViewModel />
|
||||
</Design.DataContext>
|
||||
|
||||
<TabControl TabStripPlacement="Left">
|
||||
<Grid RowDefinitions="Auto, *">
|
||||
<ToggleButton
|
||||
Grid.Row="0"
|
||||
HorizontalAlignment="Right"
|
||||
Content="Update Theme"
|
||||
IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
|
||||
<TabControl Grid.Row="1" TabStripPlacement="Left">
|
||||
<TabItem Header="Badge">
|
||||
<pages:BadgeDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="Banner">
|
||||
<pages:BannerDemo />
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</Grid>
|
||||
|
||||
</Window>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Interactivity;
|
||||
using Avalonia.Styling;
|
||||
|
||||
namespace Ursa.Demo.Views;
|
||||
|
||||
@@ -8,4 +11,14 @@ public partial class MainWindow : Window
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private void ToggleButton_OnIsCheckedChanged(object? sender, RoutedEventArgs e)
|
||||
{
|
||||
var app = Application.Current;
|
||||
if (app is not null)
|
||||
{
|
||||
var theme = app.ActualThemeVariant;
|
||||
app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
134
src/Ursa.Themes.Semi/Controls/Badge.axaml
Normal file
134
src/Ursa.Themes.Semi/Controls/Badge.axaml
Normal 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,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,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
10
src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
Normal 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,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,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
10
src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
Normal 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,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
8
src/Ursa.Themes.Semi/Themes/Shared/Badge.axaml
Normal 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,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>
|
||||
|
||||
9
src/Ursa/Common/CornerPosition.cs
Normal file
9
src/Ursa/Common/CornerPosition.cs
Normal file
@@ -0,0 +1,9 @@
|
||||
namespace Ursa.Common;
|
||||
|
||||
public enum CornerPosition
|
||||
{
|
||||
TopLeft,
|
||||
TopRight,
|
||||
BottomLeft,
|
||||
BottomRight,
|
||||
}
|
||||
105
src/Ursa/Controls/Badge.cs
Normal file
105
src/Ursa/Controls/Badge.cs
Normal file
@@ -0,0 +1,105 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Metadata;
|
||||
using Avalonia.Controls.Presenters;
|
||||
using Avalonia.Controls.Primitives;
|
||||
using Avalonia.Media;
|
||||
using Avalonia.Styling;
|
||||
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 const string PART_ContentPresenter = "PART_ContentPresenter";
|
||||
public const string PART_BadgeContainer = "PART_BadgeContainer";
|
||||
public const string PART_BadgeContentPresenter = "PART_BadgeContentPresenter";
|
||||
|
||||
private ContentPresenter? _content;
|
||||
private Border? _badgeContainer;
|
||||
private ContentPresenter? _badgeContent;
|
||||
|
||||
public static readonly StyledProperty<ControlTheme> BadgeThemeProperty = AvaloniaProperty.Register<Badge, ControlTheme>(
|
||||
nameof(BadgeTheme));
|
||||
public ControlTheme BadgeTheme
|
||||
{
|
||||
get => GetValue(BadgeThemeProperty);
|
||||
set => SetValue(BadgeThemeProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<bool> DotProperty = AvaloniaProperty.Register<Badge, bool>(
|
||||
nameof(Dot));
|
||||
public bool Dot
|
||||
{
|
||||
get => GetValue(DotProperty);
|
||||
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
|
||||
{
|
||||
get => GetValue(CornerPositionProperty);
|
||||
set => SetValue(CornerPositionProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<int> OverflowCountProperty = AvaloniaProperty.Register<Badge, int>(
|
||||
nameof(OverflowCount));
|
||||
public int OverflowCount
|
||||
{
|
||||
get => GetValue(OverflowCountProperty);
|
||||
set => SetValue(OverflowCountProperty, value);
|
||||
}
|
||||
|
||||
static Badge()
|
||||
{
|
||||
BadgeContentProperty.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()
|
||||
{
|
||||
base.OnLoaded();
|
||||
UpdateBadgePosition();
|
||||
}
|
||||
|
||||
protected override Size ArrangeOverride(Size finalSize)
|
||||
{
|
||||
UpdateBadgePosition();
|
||||
return base.ArrangeOverride(finalSize);
|
||||
}
|
||||
|
||||
private void UpdateBadgePosition()
|
||||
{
|
||||
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)
|
||||
{
|
||||
_badgeContainer.RenderTransform = new TransformGroup()
|
||||
{
|
||||
Children = new Transforms()
|
||||
{
|
||||
new TranslateTransform(horizontal*_badgeContainer.Bounds.Width/2,vertical*_badgeContainer.Bounds.Height/2)
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/Ursa/Converters/BadgeContentOverflowConverter.cs
Normal file
20
src/Ursa/Converters/BadgeContentOverflowConverter.cs
Normal file
@@ -0,0 +1,20 @@
|
||||
using System.Globalization;
|
||||
using Avalonia.Data.Converters;
|
||||
|
||||
namespace Ursa.Converters;
|
||||
|
||||
public class BadgeContentOverflowConverter: IMultiValueConverter
|
||||
{
|
||||
public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
|
||||
{
|
||||
string overflowMark = parameter is string s ? s : "+";
|
||||
if (double.TryParse(values[0]?.ToString(), out var b) && values[1] is int i and > 0)
|
||||
{
|
||||
if (b > i)
|
||||
{
|
||||
return i + overflowMark;
|
||||
}
|
||||
}
|
||||
return values[0];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user