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

Merge pull request #275 from irihitech/avatar

Browse Source 
Add Avatar Control
This commit is contained in:
Dong Bin
2024-06-28 21:28:04 +08:00
committed by GitHub
parent 889eb0853d a95d06a444
commit ce9b2686fb
15 changed files with 387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/Ursa.Themes.Semi/Controls/Avatar.axaml Normal file
View File

@@ -0,0 +1,140 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa"
xmlns:converters="clr-namespace:Ursa.Converters;assembly=Ursa">
<converters:DivideByTwoConverter x:Key="DivideByTwoConverter" />
<ControlTheme x:Key="{x:Type u:Avatar}" TargetType="{x:Type u:Avatar}">
<Setter Property="Foreground" Value="{DynamicResource AvatarForeground}" />
<Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource AvatarFontWeight}" />
<Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
<Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="CornerRadius" Value="{DynamicResource AvatarCircleCornerRadius}" />
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Avatar}">
<Border
CornerRadius="{TemplateBinding CornerRadius}"
ClipToBounds="True">
<Panel>
<Border
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" />
<ContentPresenter
Name="PART_ContentPresenter"
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Image Source="{TemplateBinding Source}" />
<ContentPresenter
Name="PART_HoverMask"
IsVisible="False"
Content="{TemplateBinding HoverMask}"
CornerRadius="{TemplateBinding CornerRadius}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask">
<Setter Property="IsVisible"
Value="{Binding HoverMask,RelativeSource={RelativeSource TemplatedParent},
Converter={x:Static ObjectConverters.IsNotNull}}" />
</Style>
<Style Selector="^.Red">
<Setter Property="Background" Value="{DynamicResource AvatarRedBackground}" />
</Style>
<Style Selector="^.Pink">
<Setter Property="Background" Value="{DynamicResource AvatarPinkBackground}" />
</Style>
<Style Selector="^.Purple">
<Setter Property="Background" Value="{DynamicResource AvatarPurpleBackground}" />
</Style>
<Style Selector="^.Violet">
<Setter Property="Background" Value="{DynamicResource AvatarVioletBackground}" />
</Style>
<Style Selector="^.Indigo">
<Setter Property="Background" Value="{DynamicResource AvatarIndigoBackground}" />
</Style>
<Style Selector="^.Blue">
<Setter Property="Background" Value="{DynamicResource AvatarBlueBackground}" />
</Style>
<Style Selector="^.LightBlue">
<Setter Property="Background" Value="{DynamicResource AvatarLightBlueBackground}" />
</Style>
<Style Selector="^.Cyan">
<Setter Property="Background" Value="{DynamicResource AvatarCyanBackground}" />
</Style>
<Style Selector="^.Teal">
<Setter Property="Background" Value="{DynamicResource AvatarTealBackground}" />
</Style>
<Style Selector="^.Green">
<Setter Property="Background" Value="{DynamicResource AvatarGreenBackground}" />
</Style>
<Style Selector="^.LightGreen">
<Setter Property="Background" Value="{DynamicResource AvatarLightGreenBackground}" />
</Style>
<Style Selector="^.Lime">
<Setter Property="Background" Value="{DynamicResource AvatarLimeBackground}" />
</Style>
<Style Selector="^.Yellow">
<Setter Property="Background" Value="{DynamicResource AvatarYellowBackground}" />
</Style>
<Style Selector="^.Amber">
<Setter Property="Background" Value="{DynamicResource AvatarAmberBackground}" />
</Style>
<Style Selector="^.Orange">
<Setter Property="Background" Value="{DynamicResource AvatarOrangeBackground}" />
</Style>
<Style Selector="^.Grey">
<Setter Property="Background" Value="{DynamicResource AvatarGreyBackground}" />
</Style>
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="{DynamicResource AvatarSquareCornerRadius}" />
</Style>
<Style Selector="^.ExtraExtraSmall">
<Setter Property="Width" Value="{DynamicResource AvatarExtraExtraSmallWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarExtraExtraSmallFontSize}" />
</Style>
<Style Selector="^.ExtraSmall">
<Setter Property="Width" Value="{DynamicResource AvatarExtraSmallWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarExtraSmallFontSize}" />
</Style>
<Style Selector="^.Small">
<Setter Property="Width" Value="{DynamicResource AvatarSmallWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarSmallFontSize}" />
</Style>
<Style Selector="^.Default">
<Setter Property="Width" Value="{DynamicResource AvatarDefaultWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarDefaultFontSize}" />
</Style>
<Style Selector="^.Medium">
<Setter Property="Width" Value="{DynamicResource AvatarMediumWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarMediumFontSize}" />
</Style>
<Style Selector="^.Large">
<Setter Property="Width" Value="{DynamicResource AvatarLargeWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarLargeFontSize}" />
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="{DynamicResource AvatarLargeSquareCornerRadius}" />
</Style>
</Style>
<Style Selector="^.ExtraLarge">
<Setter Property="Width" Value="{DynamicResource AvatarExtraLargeWidth}" />
<Setter Property="FontSize" Value="{DynamicResource AvatarExtraLargeFontSize}" />
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="{DynamicResource AvatarExtraLargeSquareCornerRadius}" />
</Style>
</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="Avatar.axaml" />
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="ButtonGroup.axaml" />

19
src/Ursa.Themes.Semi/Themes/Dark/Avatar.axaml Normal file
View File

@@ -0,0 +1,19 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="AvatarForeground" Color="White" />
<SolidColorBrush x:Key="AvatarRedBackground" Color="#D73324" />
<SolidColorBrush x:Key="AvatarPinkBackground" Color="#C72261" />
<SolidColorBrush x:Key="AvatarPurpleBackground" Color="#89289F" />
<SolidColorBrush x:Key="AvatarVioletBackground" Color="#6439B5" />
<SolidColorBrush x:Key="AvatarIndigoBackground" Color="#3444A3" />
<SolidColorBrush x:Key="AvatarBlueBackground" Color="#1D75DB" />
<SolidColorBrush x:Key="AvatarLightBlueBackground" Color="#0A81CC" />
<SolidColorBrush x:Key="AvatarCyanBackground" Color="#0E8999" />
<SolidColorBrush x:Key="AvatarTealBackground" Color="#0A9588" />
<SolidColorBrush x:Key="AvatarGreenBackground" Color="#32953D" />
<SolidColorBrush x:Key="AvatarLightGreenBackground" Color="#679934" />
<SolidColorBrush x:Key="AvatarLimeBackground" Color="#84B00C" />
<SolidColorBrush x:Key="AvatarYellowBackground" Color="#D2AF0F" />
<SolidColorBrush x:Key="AvatarAmberBackground" Color="#CA8F1E" />
<SolidColorBrush x:Key="AvatarOrangeBackground" Color="#D56F0F" />
<SolidColorBrush x:Key="AvatarGreyBackground" Color="#555B61" />
</ResourceDictionary>

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

@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<MergeResourceInclude Source="Avatar.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="ButtonGroup.axaml" />

19
src/Ursa.Themes.Semi/Themes/Light/Avatar.axaml Normal file
View File

@@ -0,0 +1,19 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="AvatarForeground" Color="White" />
<SolidColorBrush x:Key="AvatarRedBackground" Color="#FB9078" />
<SolidColorBrush x:Key="AvatarPinkBackground" Color="#F27396" />
<SolidColorBrush x:Key="AvatarPurpleBackground" Color="#C96FD1" />
<SolidColorBrush x:Key="AvatarVioletBackground" Color="#A67FDD" />
<SolidColorBrush x:Key="AvatarIndigoBackground" Color="#8090D3" />
<SolidColorBrush x:Key="AvatarBlueBackground" Color="#65B2FC" />
<SolidColorBrush x:Key="AvatarLightBlueBackground" Color="#62C3F5" />
<SolidColorBrush x:Key="AvatarCyanBackground" Color="#58CBD3" />
<SolidColorBrush x:Key="AvatarTealBackground" Color="#54D1C1" />
<SolidColorBrush x:Key="AvatarGreenBackground" Color="#7DD182" />
<SolidColorBrush x:Key="AvatarLightGreenBackground" Color="#ADD37E" />
<SolidColorBrush x:Key="AvatarLimeBackground" Color="#B7E35B" />
<SolidColorBrush x:Key="AvatarYellowBackground" Color="#FCE865" />
<SolidColorBrush x:Key="AvatarAmberBackground" Color="#F6D86F" />
<SolidColorBrush x:Key="AvatarOrangeBackground" Color="#FDC165" />
<SolidColorBrush x:Key="AvatarGreyBackground" Color="#A7ABB0" />
</ResourceDictionary>

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

@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<MergeResourceInclude Source="Avatar.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="ButtonGroup.axaml" />

29
src/Ursa.Themes.Semi/Themes/Shared/Avatar.axaml Normal file
View File

@@ -0,0 +1,29 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontWeight x:Key="AvatarFontWeight">600</FontWeight>
<CornerRadius x:Key="AvatarCircleCornerRadius">100</CornerRadius>
<CornerRadius x:Key="AvatarSquareCornerRadius">3</CornerRadius>
<x:Double x:Key="AvatarExtraExtraSmallWidth">20</x:Double>
<x:Double x:Key="AvatarExtraExtraSmallFontSize">10</x:Double>
<x:Double x:Key="AvatarExtraSmallWidth">24</x:Double>
<x:Double x:Key="AvatarExtraSmallFontSize">10</x:Double>
<x:Double x:Key="AvatarSmallWidth">32</x:Double>
<x:Double x:Key="AvatarSmallFontSize">12</x:Double>
<x:Double x:Key="AvatarDefaultWidth">40</x:Double>
<x:Double x:Key="AvatarDefaultFontSize">18</x:Double>
<x:Double x:Key="AvatarMediumWidth">48</x:Double>
<x:Double x:Key="AvatarMediumFontSize">20</x:Double>
<x:Double x:Key="AvatarLargeWidth">72</x:Double>
<x:Double x:Key="AvatarLargeFontSize">32</x:Double>
<CornerRadius x:Key="AvatarLargeSquareCornerRadius">6</CornerRadius>
<x:Double x:Key="AvatarExtraLargeWidth">128</x:Double>
<x:Double x:Key="AvatarExtraLargeFontSize">64</x:Double>
<CornerRadius x:Key="AvatarExtraLargeSquareCornerRadius">12</CornerRadius>
</ResourceDictionary>

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

@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<MergeResourceInclude Source="Avatar.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="ButtonGroup.axaml" />

26
src/Ursa/Controls/Avatar/Avatar.cs Normal file
View File

@@ -0,0 +1,26 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
namespace Ursa.Controls;
public class Avatar : Button
{
public static readonly StyledProperty<IImage?> SourceProperty = AvaloniaProperty.Register<Avatar, IImage?>(
nameof(Source));
public static readonly StyledProperty<object?> HoverMaskProperty = AvaloniaProperty.Register<Avatar, object?>(
nameof(HoverMask));
public IImage? Source
{
get => GetValue(SourceProperty);
set => SetValue(SourceProperty, value);
}
public object? HoverMask
{
get => GetValue(HoverMaskProperty);
set => SetValue(HoverMaskProperty, value);
}
}

22
src/Ursa/Converters/DivideByTwoConverter.cs Normal file
View File

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