【WPF】WPF 自定义控件 实战详解，含命令实现

🧩《WPF 自定义控件》实战详解

本文将围绕如何编写一个自定义控件（如带右键菜单的图片控件 ImageView），逐步讲解其定义、命令绑定与 ContextMenu 中常见的语法技巧。

🧱 一、创建一个 WPF 自定义控件的步骤

WPF 中自定义控件有两类：用户控件（UserControl） 和 派生控件（Custom Control）。本文聚焦于后者，它更灵活、可样式化、适合复用。

✅ 步骤 1：创建控件类

public class ImageView : Control
{
    static ImageView()
    {
        DefaultStyleKeyProperty.OverrideMetadata(
            typeof(ImageView), 
            new FrameworkPropertyMetadata(typeof(ImageView)));
    }
}

DefaultStyleKeyProperty 决定了这个控件使用哪份样式模板。

✅ 步骤 2：添加默认样式（Generic.xaml）

在 Themes/Generic.xaml 中添加样式模板：

<Style TargetType="{x:Type v:ImageView}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="v:ImageView">
                <Border BorderBrush="Gray" BorderThickness="1">
                    <Grid>
                        <!-- 图像显示容器 -->
                        <Image x:Name="PART_Image" Stretch="Uniform" />

                        <!-- 右键菜单 -->
                        <Image.ContextMenu>
                            <ContextMenu DataContext="{Binding PlacementTarget.TemplatedParent, RelativeSource={RelativeSource Self}}">
                                <MenuItem Header="加载图片"
                                          Command="{Binding LoadImageCommand}" />
                            </ContextMenu>
                        </Image.ContextMenu>

                        <!-- 如果使用普通按钮，也可以如下绑定 -->
                        <Button Content="加载图片"
                                Command="{Binding LoadImageCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Margin="5"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

⚙️ 二、如何在控件中添加可绑定并有默认实现的命令

你可以像这样定义一个 ICommand 类型的依赖属性，并设置默认行为：

public class ImageView : Control
{
    public ImageView()
    {
        LoadImageCommand = new DelegateCommand(OnLoadImage);
    }

    public static readonly DependencyProperty LoadImageCommandProperty =
        DependencyProperty.Register(nameof(LoadImageCommand), typeof(ICommand), typeof(ImageView), new PropertyMetadata(null));

    public ICommand LoadImageCommand
    {
        get => (ICommand)GetValue(LoadImageCommandProperty);
        set => SetValue(LoadImageCommandProperty, value);
    }

    private void OnLoadImage()
    {
        var dlg = new OpenFileDialog { Filter = "图像文件|*.png;*.jpg;*.bmp" };
        if (dlg.ShowDialog() == true)
        {
            string path = dlg.FileName;
            var bitmap = new BitmapImage(new Uri(path));
            _image?.SetValue(Image.SourceProperty, bitmap);
        }
    }

    private Image _image;

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _image = GetTemplateChild("PART_Image") as Image;
    }
}

🔍 三、如何正确绑定控件命令

🧠 1. ContextMenu 中绑定命令（特殊情况）

由于 ContextMenu 是一个“弹出式”控件，不在视觉树中，它不会继承控件的 DataContext，所以我们需要通过 PlacementTarget 来手动指定：

<ContextMenu DataContext="{Binding PlacementTarget.TemplatedParent, RelativeSource={RelativeSource Self}}">
    <MenuItem Header="加载图片"
              Command="{Binding LoadImageCommand}" />
</ContextMenu>

✅ 解释：

在WPF中，PlacementTarget 是上下文菜单（ContextMenu）的关键属性，其含义和用法如下：

1. PlacementTarget 的核心作用
   表示上下文菜单挂载的目标控件。当用户右键点击某个控件时，该控件会自动成为 ContextMenu 的 PlacementTarget。

这里ContextMenu 是想把 它自己的DataContext，关联到 “挂载”它 的控件。

2. 代码中的具体分析

<ContextMenu DataContext="{Binding PlacementTarget.TemplatedParent, RelativeSource={RelativeSource Self}}">
    <MenuItem Command="{Binding AddPictrueCmd}" Header="加载图片" />
</ContextMenu>

绑定路径解析：

{Binding PlacementTarget.TemplatedParent, RelativeSource={RelativeSource Self}}

RelativeSource Self：绑定源是 ContextMenu 自身。

何时需要 RelativeSource Self？ 当绑定的路径需要以 控件自身的属性（如
PlacementTarget、Tag、TemplatedParent 等）为起点时，必须用 RelativeSource Self
明确指定绑定的起点。 反之，如果路径是从当前 DataContext 开始的（如 {Binding UserName}），则不需要。

PlacementTarget：获取触发菜单的控件。

TemplatedParent：获取目标控件的模板化父级（就是应用了控件模板的控件）。

最终效果：
ContextMenu 的 DataContext 被设置为 应用了触发菜单的控件外层模板 的控件。
例如：如果菜单挂载在模板内的子控件上，则 TemplatedParent 指向该模板的实际宿主控件（如自定义的 ImageView 控件）。

在绑定中，可通过 PlacementTarget 访问触发菜单的原始控件及其数据上下文。

✅ 2. 普通控件（如 Button）绑定命令（更简单）

如果你在模板中放的是 <Button>，它本身在视觉树中，是 ImageView 的一部分，因此可以直接这样绑定：

<Button Content="加载图片"
        Command="{Binding LoadImageCommand, RelativeSource={RelativeSource TemplatedParent}}" />

🔍 为什么用 TemplatedParent？

因为在模板中，默认的 DataContext 是 ControlTemplate 的上下文，不是控件本身。如果你要访问 ImageView 暴露的命令，需要这样回溯绑定。

✅ 四、使用控件方式示例

✅ 默认使用（使用控件自带的加载逻辑）

<v:ImageView Width="300" Height="200" />

✅ 外部 ViewModel 控制加载行为（替换默认命令）

<v:ImageView LoadImageCommand="{Binding MyCustomLoadCommand}" />

✨ 总结