feat: Source & HoverMask.

demo/Ursa.Demo/Pages/AvatarDemo.axaml

@@ -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>

src/Ursa.Themes.Semi/Controls/Avatar.axaml

@@ -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>

src/Ursa/Controls/Avatar/Avatar.cs

@@ -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);
+    }
 }