WPF 实际应用的小技巧(一)

在做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实战技巧!我们的目标是没有代码!

posted @ 2012-09-29 17:46  鱼胖  阅读(7695)  评论(7编辑  收藏  举报