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

2
demo/Ursa.Demo/App.axaml
View File

@@ -4,7 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Ursa.Demo"> xmlns:local="using:Ursa.Demo">
<Application.Styles> <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" /> <StyleInclude Source="avares://Ursa.Themes.Semi/Index.axaml" />
</Application.Styles> </Application.Styles>
</Application> </Application>

190
demo/Ursa.Demo/Pages/BadgeDemo.axaml Normal file
View 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
View 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);
}
}

5
demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
View File

@@ -14,6 +14,11 @@ public partial class BannerDemo : UserControl
InitializeComponent(); InitializeComponent();
this.DataContext = new BannerDemoViewModel(); this.DataContext = new BannerDemoViewModel();
} }
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
} }
public class BannerDemoViewModel: ViewModelBase public class BannerDemoViewModel: ViewModelBase

20
demo/Ursa.Demo/Views/MainWindow.axaml
View File

@@ -16,10 +16,20 @@
<vm:MainWindowViewModel /> <vm:MainWindowViewModel />
</Design.DataContext> </Design.DataContext>
<TabControl TabStripPlacement="Left"> <Grid RowDefinitions="Auto, *">
<TabItem Header="Banner"> <ToggleButton
<pages:BannerDemo /> Grid.Row="0"
</TabItem> HorizontalAlignment="Right"
</TabControl> 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> </Window>

13
demo/Ursa.Demo/Views/MainWindow.axaml.cs
View File

@@ -1,4 +1,7 @@
using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Styling;
namespace Ursa.Demo.Views; namespace Ursa.Demo.Views;
@@ -8,4 +11,14 @@ public partial class MainWindow : Window
{ {
InitializeComponent(); 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
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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>

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

@@ -8,10 +8,10 @@
<ResourceDictionary> <ResourceDictionary>
<ResourceDictionary.ThemeDictionaries> <ResourceDictionary.ThemeDictionaries>
<ResourceInclude x:Key="Dark" Source="./Themes/Dark/_index.axaml" /> <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.ThemeDictionaries>
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/Banner.axaml" /> <ResourceInclude Source="../Controls/_index.axaml" />
<ResourceInclude Source="Themes/Shared/_index.axaml" /> <ResourceInclude Source="Themes/Shared/_index.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- 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> </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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </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"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>
</ResourceDictionary> </ResourceDictionary>

9
src/Ursa/Common/CornerPosition.cs Normal file
View File

@@ -0,0 +1,9 @@
namespace Ursa.Common;
public enum CornerPosition
{
TopLeft,
TopRight,
BottomLeft,
BottomRight,
}

105
src/Ursa/Controls/Badge.cs Normal file
View 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
View 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];
}
}