feat: Source & HoverMask.

This commit is contained in:
Zhang Dian
2024-06-19 00:18:56 +08:00
parent 8cbe044953
commit 395d67500a
3 changed files with 51 additions and 5 deletions

View File

@@ -9,8 +9,27 @@
<Design.DataContext>
<vm:AvatarDemoViewModel />
</Design.DataContext>
<StackPanel>
<UserControl.Resources>
<StreamGeometry x:Key="IconCamera">M7.44721 3.10557C7.786 2.428 8.47852 2 9.23607 2H14.7639C15.5215 2 16.214 2.428 16.5528 3.10557L17.5 5H20C21.6569 5 23 6.34315 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V8C1 6.34315 2.34315 5 4 5H6.5L7.44721 3.10557ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13ZM12 8C9.23858 8 7 10.2386 7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8Z</StreamGeometry>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<u:Avatar Content="{Binding Content}"
Command="{Binding ClickCommand}"/>
Command="{Binding ClickCommand}" />
<u:Avatar Content="{Binding Content}"
Command="{Binding ClickCommand}">
<u:Avatar.HoverMask>
<Border Opacity="0.6">
<Panel>
<Ellipse Fill="#16161A"
Width="{Binding $parent[u:Avatar].Width}"
Height="{Binding $parent[u:Avatar].Height}" />
<PathIcon Width="16" Height="16" Data="{StaticResource IconCamera}" />
</Panel>
</Border>
</u:Avatar.HoverMask>
</u:Avatar>
<u:Avatar Content="{Binding Content}"
Command="{Binding ClickCommand}"
Source="../Assets/Ursa.ico" />
</StackPanel>
</UserControl>

View File

@@ -12,13 +12,24 @@
<Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Avatar}">
<Panel>
<Ellipse Fill="{TemplateBinding Background}" />
<Ellipse
Fill="{TemplateBinding Background}"
IsVisible="{TemplateBinding Source,Converter={x:Static ObjectConverters.IsNull}}" />
<ContentPresenter
Name="PART_ContentPresenter"
IsVisible="{TemplateBinding Source,Converter={x:Static ObjectConverters.IsNull}}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<ContentPresenter
Name="{x:Static u:Avatar.PART_HoverMask}"
IsVisible="False"
Content="{TemplateBinding HoverMask}"
CornerRadius="{TemplateBinding CornerRadius}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Image Source="{TemplateBinding Source}" />
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" />
<ContentPresenter DockPanel.Dock="Bottom" />
@@ -26,6 +37,9 @@
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask">
<Setter Property="IsVisible" Value="True" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:AvatarGroup}" TargetType="{x:Type u:AvatarGroup}" />
</ResourceDictionary>

View File

@@ -1,8 +1,12 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Presenters;
using Avalonia.Media;
namespace Ursa.Controls;
[TemplatePart(PART_HoverMask, typeof(ContentPresenter))]
public class Avatar : Button
{
public const string PART_TopPresenter = "PART_TopPresenter";
@@ -15,9 +19,12 @@ public class Avatar : Button
public static readonly StyledProperty<double> GapProperty = AvaloniaProperty.Register<Avatar, double>(
nameof(Gap));
public static readonly StyledProperty<string> SourceProperty = AvaloniaProperty.Register<Avatar, string>(
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 bool ContentMotion
{
get => GetValue(ContentMotionProperty);
@@ -30,9 +37,15 @@ public class Avatar : Button
set => SetValue(GapProperty, value);
}
public string Source
public IImage? Source
{
get => GetValue(SourceProperty);
set => SetValue(SourceProperty, value);
}
public object? HoverMask
{
get => GetValue(HoverMaskProperty);
set => SetValue(HoverMaskProperty, value);
}
}