Refactor ImagePreviewer Add CoverIndicatorContent support

This commit is contained in:
chinboy
2025-12-19 16:17:39 +08:00
parent 0c68ab0e46
commit e4cd7d6e0c
4 changed files with 46 additions and 20 deletions
@@ -1,11 +1,20 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using Avalonia.Interactivity;
using Avalonia.Metadata;
namespace AtomUI.Desktop.Controls;
public class ImagePreviewer : AbstractImagePreviewer
{
#region 公共属性定义
public static readonly StyledProperty<object?> CoverIndicatorContentProperty =
AvaloniaProperty.Register<ImagePreviewer, object?>(nameof(CoverIndicatorContent));
public static readonly StyledProperty<IDataTemplate?> CoverIndicatorContentTemplateProperty =
AvaloniaProperty.Register<ImagePreviewer, IDataTemplate?>(nameof(CoverIndicatorContentTemplate));
public static readonly StyledProperty<string?> CoverImageSrcProperty =
AvaloniaProperty.Register<ImagePreviewer, string?>(nameof(CoverImageSrc));
@@ -14,6 +23,19 @@ public class ImagePreviewer : AbstractImagePreviewer
get => GetValue(CoverImageSrcProperty);
set => SetValue(CoverImageSrcProperty, value);
}
[DependsOn(nameof(CoverIndicatorContentTemplate))]
public object? CoverIndicatorContent
{
get => GetValue(CoverIndicatorContentProperty);
set => SetValue(CoverIndicatorContentProperty, value);
}
public IDataTemplate? CoverIndicatorContentTemplate
{
get => GetValue(CoverIndicatorContentTemplateProperty);
set => SetValue(CoverIndicatorContentTemplateProperty, value);
}
#endregion
#region 内部属性定义
@@ -8,7 +8,7 @@ using Avalonia.Interactivity;
namespace AtomUI.Desktop.Controls;
internal class ImagePreviewerCover : TemplatedControl, IMotionAwareControl
internal class ImagePreviewerCover : ContentControl, IMotionAwareControl
{
#region 公共属性定义
public static readonly StyledProperty<PreviewImageSource?> ImageSourceProperty =
@@ -2,8 +2,6 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
xmlns:imagepreviewlang="using:AtomUI.Desktop.Controls.ImagePreviewerLang"
x:ClassModifier="internal">
<ControlTheme x:Key="{x:Type atom:ImagePreviewerCover}" TargetType="atom:ImagePreviewerCover">
<Setter Property="Template">
@@ -14,22 +12,17 @@
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<atom:ImagePreviewRenderer Source="{TemplateBinding ImageSource}" Stretch="Uniform"/>
<atom:ImagePreviewRenderer Source="{TemplateBinding ImageSource}" Stretch="Uniform" />
<Border Name="Mask" Opacity="{TemplateBinding MaskOpacity}">
<StackPanel Name="MaskLayout"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<antdicons:EyeOutlined />
<TextBlock
Text="{DynamicResource {x:Static imagepreviewlang:ImagePreviewerLangResourceKey.Preview}}" />
</StackPanel>
<ContentPresenter Name="MaskContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="ClipToBounds" Value="True" />
<Setter Property="IsMotionEnabled" Value="{DynamicResource {x:Static atom:SharedTokenKey.EnableMotion}}" />
@@ -38,12 +31,6 @@
<Setter Property="TemplatedControl.Foreground"
Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorTextLightSolid}}" />
</Style>
<Style Selector="^ /template/ StackPanel#MaskLayout">
<Setter Property="Spacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXXS}}" />
</Style>
<Style Selector="^ /template/ atom|Icon">
<Setter Property="StrokeBrush" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorTextLightSolid}}" />
</Style>
<Style Selector="^:pointerover">
<Setter Property="MaskOpacity" Value="1" />
@@ -2,6 +2,8 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
xmlns:imagepreviewlang="using:AtomUI.Desktop.Controls.ImagePreviewerLang"
x:ClassModifier="internal">
<ControlTheme x:Key="{x:Type atom:ImagePreviewer}" TargetType="atom:ImagePreviewer">
<Setter Property="Template">
@@ -13,7 +15,9 @@
CornerRadius="{TemplateBinding CornerRadius}">
<atom:ImagePreviewerCover ImageSource="{TemplateBinding EffectiveCoverImage}"
Width="{TemplateBinding CoverWidth}"
Height="{TemplateBinding CoverHeight}"/>
Height="{TemplateBinding CoverHeight}"
Content="{TemplateBinding CoverIndicatorContent}"
ContentTemplate="{TemplateBinding CoverIndicatorContentTemplate}"/>
</Border>
</ControlTemplate>
</Setter>
@@ -22,5 +26,18 @@
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="IsMotionEnabled" Value="{DynamicResource {x:Static atom:SharedTokenKey.EnableMotion}}" />
<Setter Property="CoverIndicatorContentTemplate">
<DataTemplate>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Spacing="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXXS}}">
<antdicons:EyeOutlined StrokeBrush="{DynamicResource {x:Static atom:SharedTokenKey.ColorTextLightSolid}}"/>
<TextBlock
Text="{DynamicResource {x:Static imagepreviewlang:ImagePreviewerLangResourceKey.Preview}}" />
</StackPanel>
</DataTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>