feat: add Gap property to Avatar.

This commit is contained in:
Zhang Dian
2025-01-14 21:28:41 +08:00
parent dae550ece7
commit e57036163d
4 changed files with 42 additions and 12 deletions

View File

@@ -93,5 +93,11 @@
</u:Avatar.HoverMask> </u:Avatar.HoverMask>
</u:Avatar> </u:Avatar>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Gap="4" />
<u:Avatar Content="Semi" Gap="10" />
</StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

View File

@@ -3,12 +3,20 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa"> xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa">
<converters:DivideByTwoConverter x:Key="DivideByTwoConverter" /> <Design.PreviewWith>
<StackPanel Margin="20" Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Gap="4" />
<u:Avatar Content="Semi" Gap="10" />
</StackPanel>
</Design.PreviewWith>
<converters:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter" />
<ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}"> <ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
<Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" /> <Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" />
<Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" /> <Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" /> <Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" />
<Setter Property="Gap" Value="3" />
<Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" /> <Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
<Setter Property="Height" Value="{Binding $self.Width}" /> <Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
@@ -24,14 +32,20 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" /> Background="{TemplateBinding Background}">
<ContentPresenter </Border>
Name="PART_ContentPresenter" <Viewbox
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}" Margin="{TemplateBinding Gap, Converter={StaticResource DoubleToThicknessConverter}}"
CornerRadius="{TemplateBinding CornerRadius}" StretchDirection="DownOnly">
Content="{TemplateBinding Content}" <ContentPresenter
HorizontalContentAlignment="Center" Name="PART_ContentPresenter"
VerticalContentAlignment="Center" /> IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
</Viewbox>
<Image Source="{TemplateBinding Source}" /> <Image Source="{TemplateBinding Source}" />
<ContentPresenter <ContentPresenter
Name="PART_HoverMask" Name="PART_HoverMask"

View File

@@ -7,12 +7,21 @@ namespace Ursa.Controls;
public class Avatar : Button public class Avatar : Button
{ {
public static readonly StyledProperty<double> GapProperty = AvaloniaProperty.Register<Avatar, double>(
nameof(Gap));
public static readonly StyledProperty<IImage?> SourceProperty = AvaloniaProperty.Register<Avatar, IImage?>( public static readonly StyledProperty<IImage?> SourceProperty = AvaloniaProperty.Register<Avatar, IImage?>(
nameof(Source)); nameof(Source));
public static readonly StyledProperty<object?> HoverMaskProperty = AvaloniaProperty.Register<Avatar, object?>( public static readonly StyledProperty<object?> HoverMaskProperty = AvaloniaProperty.Register<Avatar, object?>(
nameof(HoverMask)); nameof(HoverMask));
public double Gap
{
get => GetValue(GapProperty);
set => SetValue(GapProperty, value);
}
[ExcludeFromCodeCoverage] [ExcludeFromCodeCoverage]
public IImage? Source public IImage? Source
{ {

View File

@@ -1,18 +1,19 @@
using System.Globalization; using System.Globalization;
using Avalonia;
using Avalonia.Data.Converters; using Avalonia.Data.Converters;
namespace Ursa.Converters; namespace Ursa.Converters;
public class DivideByTwoConverter : IValueConverter public class DoubleToThicknessConverter : IValueConverter
{ {
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture) public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{ {
if (value is double d) if (value is double d)
{ {
return d / 2; return new Thickness(d, 0);
} }
return value; return AvaloniaProperty.UnsetValue;
} }
public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)