天天看点

8天入门wpf—— 第三天 样式

说起样式,大家第一反应肯定是css,好的,先上一段代码。

我们知道css实现了内容与样式的分离,既然wpf跟webform非常类似,那么肯定也有一套能够实现css的功能,是的。这就是wpf的style。

一:style类

首先我们看看style里面有哪些东西,在vs里面我们可以通过按f12查看类的定义。

8天入门wpf—— 第三天 样式

下面我们一一解读下:

1:setters

从上图我们知道setters的类型是setterbasecollection,可以看得出是一个存放setterbase的集合,setterbase派生出了两个类

setter和eventsetter,下面我们看看setter类的定义。

8天入门wpf—— 第三天 样式

这里我们看到了两个非常重要kv属性property和value,我们拿css找找对应关系。

html => style.targettype

border => property

0 => value

估计大家想迫不及待的试一试,好了,我先做一个简单的demo。

最后效果:

8天入门wpf—— 第三天 样式

仔细看看,是不是找到了css的感觉,有人肯定要问,这不就是标签选择器吗?能不能做成“id选择器”,当然可以,我们只需要给style取一个名字,

然后在控件上引用一下就ok了。

现在我们添加一个label,如果我们也需要同样的“背景色”和“字体”,那么我们是否要重新写一个label的样式吗?答案肯定是否定的,聪明的你肯定会

想到”基类“。我们发现label和button都是继承自contentcontrol,都属于内容控件,那么何不在targettype中定义为contentcontrol不就ok了吗?

8天入门wpf—— 第三天 样式

2:targettype

我们在说setter的时候也提到了,其实targettype也就是将样式施加到某一个对象上,具体的也没什么好说的。

3:baseon

我们知道css具有“继承和覆盖”的特性,同样我们的wpf中也是具有的。

<1>:继承

效果:

8天入门wpf—— 第三天 样式

从上例中,我们看到childstyle继承到了basestyle中的fontsize,最终的效果也是我们期望看到的。

<2>:覆盖

我们知道css遵循“就近原则”。

①:“行内”覆盖“嵌入”,“嵌入”覆盖“外部”

8天入门wpf—— 第三天 样式

我们可以清楚的看到,行内样式覆盖了嵌入样式。

②:同级别遵循“就近”。

8天入门wpf—— 第三天 样式

从button的颜色上看,我们可以获知pink已经被burlywood覆盖。

4:triggers

顾名思义,是触发器的意思,我们可以认为是wpf在style中注入了一些很简单,很sb的js代码。

wpf中有5种trigger,都是继承自triggerbase类。

<1> trigger,mulitrigger

我们知道js是事件驱动机制的,比如触发mouseover,mouseout,click等事件来满足我们要处理的逻辑,那么wpf在不用写c#代码的情况下

用trigger就能够简单的满足这些事件处理。

下面举个例子

最后的效果就是当ismouseover=true的情况下,button的background变成pink。

然而trigger只能满足在单一的条件下触发,那么我想在多个条件同时满足的情况下才能触发有没有办法做到呢?刚好mulitrigger就可以帮你实现。

这里我们看到,只有满足了ismouseover和ispressed的时候,我们的button才会变成粉色。

<2>datatrigger,multidatatrigger

这个跟上面的trigger有什么不同呢?其实也就是datatrigger多了一个binding的属性,当然它的实际应用也是最广泛的。

8天入门wpf—— 第三天 样式

=>

8天入门wpf—— 第三天 样式

当我们选中radio的时候,字体变大,同样multidatatrigger这个多条件的使用道理也是一样的,这里就不介绍了。

<3>eventtrigger

这个trigger与动画有关,目前项目中还没接触到,留给大家自己研究研究。

5:issealed

用于标记style是只读的,类似我们在c#中的seal关键字,来达到不允许让继承类使用,wpf使用seal常常在c#代码里面控制,在xaml中我们

是找不到的,有兴趣的话,大家自己研究研究。

继续阅读