在做WPF设计的时候遇到了一个问题，tabcontrol的切换。例如下图：

你会怎么做这个控件？

1.写5个tabitem样式？

2.写一个自定义控件？

3？

我们的目标是没有代码，这样怎么能符合我们的目标。

好吧，本人比较懒的写代码，最终发现了一个方法，只用一个样式就能解决所有问题！这个神器就是HeaderedContentControl。

HeaderedContentControl的Header和Content都是object类型的，所以可以实现我们需求的功能。

1.新建一个HeaderedContentControl。

2.创建content的数据模板

3.在模板中添加一个图片

4.给图片的source添加一个绑定。（什么也不用填，直接点确定）

5.回到HeaderedContentControl的页面，对headerTemple做同样的操作。

6.做完以上操作查看下代码，你的代码应该有下图的那些东西。

7.继续编辑HeaderedContentControl的模板。

8.出现模板编辑页面后分别给两个ContentSource命名。

9.看到ContentPresenter1有个contentSource指向header,那么给ContentPresenter2的contentsource指向content

10.给HeaderedContentControl加一个触发器，判断图片的显示个影藏。美工们按照代码敲吧，程序门肯定懂什么意思了。

11.注意，注意！我们研究下下面的代码。

 <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type CheckBox}},Path=IsChecked}" Value="True">

看到AncestorType={x:Type CheckBox}你会疑问怎么是checkbox，其实这边该填写的是上级元素，如果你的是tabitem，那边这边就是tablitem，如果是button，这边就填写button。path则是触发触发器的属性，我的是checkbox，最IsChecked时触发。如果你是tabitem，则是IsSelected时触发。

12.写完这个控件可以使用了。

13.最后一步，分别给HeaderedContentControl的Header和Content赋值。图片路径用绝对路径

 

举一反三：1.到这里就结束了，两张图片的切换下次你有了另一个选择HeaderedContentControl。当你的按钮都是两张图片切换的时候，当你的tabitem

的头部为两张图片切换的时候你都可以用HeaderedContentControl解决。

2.不一定是图片，文字切换，文字和图片的切换等等，HeaderedContentControl都可以满足你。

附tabitem写法

 

自己去做一遍吧，很有用的东西。有什么不懂得可以留言，或者去群里问我。

如果觉得对你有帮助，点个推荐吧！

更多的WPF/SL实战技巧！我们的目标是没有代码！