【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）的关键属性，其含义和用法如下：
- PlacementTarget 的核心作用
表示上下文菜单挂载的目标控件。当用户右键点击某个控件时，该控件会自动成为 ContextMenu 的 PlacementTarget。
这里ContextMenu 是想把 它自己的DataContext，关联到 “挂载”它 的控件。
- 代码中的具体分析
<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 访问触发菜单的原始控件及其数据上下文。
| 属性 | 含义 |
|---|---|
PlacementTarget | 表示上下文菜单挂载的目标控件。 |
TemplatedParent | 模板对应的控件 |
RelativeSource Self | ContextMenu 本身 |
✅ 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}" />
✨ 总结
| 模块 | 说明 |
|---|---|
| 控件定义 | 派生自 Control，提供依赖属性和默认行为 |
| LoadImageCommand | 控件内部默认提供实现，外部可覆盖 |
| ContextMenu 命令绑定 | 需要手动通过 PlacementTarget.TemplatedParent 指向控件 |
| Button 等普通控件 | 使用 RelativeSource={RelativeSource TemplatedParent} 更简单 |