WinUI 3中继承使用视觉层的用户控件方案咨询

方法一：基于用户控件的继承复用 #

1. 创建基类用户控件（例如StyledBackgroundControl） #

先做一个包含所有背景视觉效果的基类，预留内容区域供子类替换：

XAML（StyledBackgroundControl.xaml）

<UserControl
    x:Class="YourApp.StyledBackgroundControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <!-- 承载视觉层效果的背景矩形 -->
        <Rectangle x:Name="_BackgroundRectangle" Fill="#F0F0F0" />
        <!-- 内容容器，子类自定义内容将放在这里 -->
        <ContentPresenter x:Name="_ContentPresenter" Margin="16" />
    </Grid>
</UserControl>

后台代码（StyledBackgroundControl.xaml.cs）
把视觉层效果逻辑封装在基类里，只写一次：

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Hosting;

namespace YourApp;

public sealed partial class StyledBackgroundControl : UserControl
{
    // 暴露Content属性，方便子类设置内容
    public object Content
    {
        get => _ContentPresenter.Content;
        set => _ContentPresenter.Content = value;
    }

    public StyledBackgroundControl()
    {
        InitializeComponent();
        Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        var backgroundVisual = ElementCompositionPreview.GetElementVisual(_BackgroundRectangle);
        var compositor = backgroundVisual.Compositor;

        // 添加高斯模糊效果
        var blurEffect = compositor.CreateGaussianBlurEffect();
        blurEffect.BlurAmount = 10f;
        var blurBrush = compositor.CreateEffectFactory(blurEffect).CreateBrush();
        backgroundVisual.Brush = blurBrush;

        // 添加阴影
        var dropShadow = compositor.CreateDropShadow();
        dropShadow.Color = Windows.UI.Colors.Black;
        dropShadow.BlurRadius = 15f;
        dropShadow.Offset = new System.Numerics.Vector3(0, 5, 0);
        ElementCompositionPreview.SetElementChildVisual(_BackgroundRectangle, dropShadow);

        // 添加上你的描边、光源等其他视觉效果
        // ... 原有逻辑代码
    }
}

2. 创建子类控件 #

比如需要一个文本展示控件，直接继承基类，只需要定义内容：

XAML（TextStyledControl.xaml）

<local:StyledBackgroundControl
    x:Class="YourApp.TextStyledControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourApp">

    <TextBlock Text="自定义文本内容" FontSize="20" Foreground="#333" />
</local:StyledBackgroundControl>

后台代码（TextStyledControl.xaml.cs）
无需重复背景逻辑，仅处理子类特有逻辑：

namespace YourApp;

public sealed partial class TextStyledControl : StyledBackgroundControl
{
    public TextStyledControl()
    {
        InitializeComponent();
    }

    // 子类特有的属性或方法，比如自定义文本依赖属性
    // ...
}

方法二：使用模板化控件（更灵活的复用方式） #

如果需要更灵活的样式定制，推荐用TemplatedControl分离视觉结构与逻辑：

1. 创建模板化基类控件 #

后台代码（StyledBackgroundTemplatedControl.cs）

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Hosting;

namespace YourApp;

public class StyledBackgroundTemplatedControl : Control
{
    public static readonly DependencyProperty ContentProperty =
        DependencyProperty.Register(nameof(Content), typeof(object), typeof(StyledBackgroundTemplatedControl), new PropertyMetadata(null));

    public object Content
    {
        get => GetValue(ContentProperty);
        set => SetValue(ContentProperty, value);
    }

    public StyledBackgroundTemplatedControl()
    {
        DefaultStyleKey = typeof(StyledBackgroundTemplatedControl);
        Loaded += OnLoaded;
    }

    private Rectangle? _backgroundRectangle;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _backgroundRectangle = GetTemplateChild("_BackgroundRectangle") as Rectangle;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        if (_backgroundRectangle == null) return;

        // 复用你之前的视觉层效果代码
        var backgroundVisual = ElementCompositionPreview.GetElementVisual(_backgroundRectangle);
        var compositor = backgroundVisual.Compositor;

        // 添加高斯模糊、阴影、描边等效果
        // ... 原有逻辑代码
    }
}

2. 在Generic.xaml中定义控件模板 #

在项目Themes/Generic.xaml中添加模板：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourApp">

    <Style TargetType="local:StyledBackgroundTemplatedControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:StyledBackgroundTemplatedControl">
                    <Grid>
                        <Rectangle x:Name="_BackgroundRectangle" Fill="#F0F0F0" />
                        <ContentPresenter Content="{TemplateBinding Content}" Margin="16" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3. 使用子类或直接实例化 #

直接在XAML中使用，或创建子类扩展：

<local:StyledBackgroundTemplatedControl>
    <!-- 自定义内容 -->
    <StackPanel>
        <TextBlock Text="标题" FontSize="24" />
        <TextBlock Text="详细描述" Margin="0,8,0,0" />
    </StackPanel>
</local:StyledBackgroundTemplatedControl>

关键注意点 #

• 基类中要确保背景元素的访问权限，或是通过GetTemplateChild获取模板元素，避免子类无法访问。
• 视觉层效果初始化最好放在Loaded事件或OnApplyTemplate之后，确保元素已加载完成。
• 如果需要动态修改背景效果，可以在基类中暴露对应的依赖属性（比如BlurAmount、ShadowColor），方便子类或外部调整。

内容的提问来源于stack exchange，提问作者Георгий Попов