从 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>

每个 GraphicInfo 都会有对应的 ImageView，并且控件内部可以随时拿到 GraphicInfo.View。

---

6️⃣ 总结

初版：

• 直接用 DataContext，代码简单，但容易冲突。

优化版：

• 定义 Graphic 依赖属性。
• 在回调里处理 info.View = this。
• 在 ItemTemplate 中用 Graphic="{Binding}" 绑定整个对象。

最终收获：

• 控件内部的 DataContext 和外部彻底解耦。
• 可以优雅支持 ItemsControl、ListBox 等批量场景。
• 控件更通用、可维护性更好。

---

✍ 结论：

在 WPF 自定义控件中，推荐为关键数据对象定义依赖属性，而不是直接依赖 DataContext。
在 ItemTemplate 里，使用 Graphic="{Binding}" 是最简洁优雅的写法，能把当前项整个传给控件，便于控件内部逻辑处理。