从 DataContext 到依赖属性：WPF 自定义控件 ImageView 的优化之路

最近我在做一个 WPF 项目，需要封装一个 ImageView 控件，用来显示图像并处理鼠标交互。
在实际开发中，我遇到了一系列和 数据绑定 有关的问题：

控件需要和 GraphicInfo 数据对象绑定，并且把自身写回 GraphicInfo.View。
控件内部要用到第三方控件 HSmartWindowControlWPF，需要在 OnApplyTemplate 里做初始化。
控件需要支持在 ItemsControl（例如 ListBox）中批量使用。

在这个过程中，我从最初直接用 DataContext，一路优化到定义依赖属性、支持 ItemTemplate 绑定，踩了不少坑。
这篇文章就总结一下这个过程，给遇到类似问题的朋友做个参考。

1️⃣ 初版：直接使用 DataContext

最初我的写法是这样的：

public override void OnApplyTemplate()
{base.OnApplyTemplate();hSmart = (HSmartWindowControlWPF)GetTemplateChild("PART_hSmart");hSmart.Loaded += Hsmart_Loaded;hSmart.HMouseMove += HSmart_HMouseMove;// 用 DataContext 拿到当前 GraphicInfoif (DataContext is GraphicInfo info){info.View = this; // 把自己写回去}
}

然后在 XAML 使用：

<local:ImageView DataContext="{Binding MyGraphic}" />

或者是，ImageView 外部有个ItemList ，ImageView 就会自动关联到Itemlist的子项，ImageView 以ItemList 的子项为DataContext。

这种方式虽然能用，但很快就遇到了几个问题：

DataContext 被控件内部占用：如果控件内部也需要绑定自己的属性，就会和外部冲突。
在 ItemList 中不直观：每个 Item 的 DataContext 都是当前 GraphicInfo，但从外部看不清楚绑定了什么。
无法精确控制：如果控件将来要绑定别的对象，很难扩展。

2️⃣ 第一步优化：定义依赖属性

更好的做法是给控件定义一个依赖属性，例如 Graphic：

public class ImageView : Control
{static ImageView(){DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageView),new FrameworkPropertyMetadata(typeof(ImageView)));}// 定义 Graphic 依赖属性public GraphicInfo Graphic{get => (GraphicInfo)GetValue(GraphicProperty);set => SetValue(GraphicProperty, value);}public static readonly DependencyProperty GraphicProperty =DependencyProperty.Register(nameof(Graphic), typeof(GraphicInfo), typeof(ImageView),new PropertyMetadata(null, OnGraphicChanged));private static void OnGraphicChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){if (d is ImageView view && e.NewValue is GraphicInfo info){// 在绑定时回写info.View = view;}}public override void OnApplyTemplate(){base.OnApplyTemplate();hSmart = (HSmartWindowControlWPF)GetTemplateChild("PART_hSmart");if (hSmart != null){hSmart.Loaded += Hsmart_Loaded;hSmart.HMouseMove += HSmart_HMouseMove;}}
}

单独使用

XAML 使用方式变成：

<local:ImageView Graphic="{Binding MyGraphic}" />

✅ 这样 ImageView 的 DataContext 可以自由使用，不再和外部冲突。
✅ 依赖属性还能在回调里做初始化逻辑，代码更加集中。

3️⃣ 在 ItemsControl 中使用

接下来要支持在 ItemsControl 中批量显示多个 GraphicInfo：

<ItemsControl ItemsSource="{Binding saveInfo.Graphics}"><ItemsControl.ItemTemplate><DataTemplate><sw:ImageView Graphic="{Binding}" /></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>

这里的 {Binding} 什么都不写，等价于 {Binding Path=.}，也就是把当前 GraphicInfo 传给 Graphic 属性，非常简洁。

如果写成 Graphic="{Binding SomeProperty}"，就只会绑定 GraphicInfo 的某个属性，而不是整个对象。

4️⃣ 为什么要用 `{Binding}`？

很多朋友第一次看到这种写法可能会疑惑：啥都不写有啥意义？

其实意义很大！
在 ItemsControl.ItemTemplate 里，当前 DataContext 就是当前项本身，{Binding} 直接把整个对象传给控件的依赖属性。

这有几个好处：

语义清晰：一眼就能看出控件拿到的是当前项本身，而不是某个属性。
方便控件内部处理：可以在依赖属性回调里直接访问整个对象。
和命令参数类似：就像我们常用的 CommandParameter="{Binding}"，也是把当前项传给命令执行逻辑。

如果不用 {Binding} 会怎么样？

假设你不写 {Binding}，直接这样：

<sw:ImageView />

那么 ImageView.Graphic 就是 null，控件里完全拿不到当前 GraphicInfo，也就无法回写 info.View = this。

你就得在后台代码里自己找当前项、手动设置，这就麻烦多了，也破坏了 MVVM 模式。

5️⃣ 优化结果

经过这一轮优化，ImageView 变得更健壮、可扩展，也能在 ItemList 中使用。

最终效果：

<ListBox ItemsSource="{Binding Graphics}"><ListBox.ItemTemplate><DataTemplate><sw:ImageView Graphic="{Binding}" /></DataTemplate></ListBox.ItemTemplate>
</ListBox>