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

 1 html{border:0;}
2 ul,form{margin:0; padding:0}
3 body,div,th,td,li,dd,span,p,a{font-size:12px; font-family:Verdana,Arial,"宋体";color:#575757;}
4 h3,input{font-size:12px; font-family:Verdana,Arial,"宋体";color:#4465a2;}
5
6 body {
7 /**/
8 /*e5e5e5*/
9 /*BACKGROUND: url(../images/header_bg.jpg) #fff repeat-x;*/
10 BACKGROUND: url(../images/color_1.png) #fff repeat-x 0px -233px;
11 margin:0px;
12 padding:0px;
13 }
14
15 ul{list-style:none;}
16 h1,h2,h4,h5,h6{ font-size:14px; color:#333;}
17 img{border:0;}
18 a {color:#333333;text-decoration:none;}
19 a:hover{color:#ff0000;text-decoration:underline;}

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

一:Style类

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

下面我们一一解读下:

1:Setters

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

Setter和EventSetter,下面我们看看Setter类的定义。

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

html{border:0;}

html    => Style.TargetType

border =>   Property

0        =>   Value

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

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style TargetType="Button">
8 <Setter Property="Background" Value="Pink"/>
9 <Setter Property="FontSize" Value="22"/>
10 </Style>
11 </Window.Resources>
12 <Grid>
13 <Button Content="一线码农"/>
14 </Grid>
15 </Window>

最后效果:

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

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

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="mystyle" TargetType="Button">
8 <Setter Property="Background" Value="Pink"/>
9 <Setter Property="FontSize" Value="22"/>
10 </Style>
11 </Window.Resources>
12 <Grid>
13 <Button Style="{StaticResource ResourceKey=mystyle}" Content="一线码农"/>
14 </Grid>
15 </Window>

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

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

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="mystyle" TargetType="ContentControl">
8 <Setter Property="Background" Value="Pink"/>
9 <Setter Property="FontSize" Value="22"/>
10 </Style>
11 </Window.Resources>
12 <Grid>
13 <Button Style="{StaticResource ResourceKey=mystyle}"
14 Content="Button" Height="23" Margin="132,99,0,0" Name="button1" Width="75" />
15 <Label Style="{StaticResource ResourceKey=mystyle}"
16 Content="Label" Height="28" Margin="140,168,0,0" Name="label1" />
17 </Grid>
18 </Window>

2:TargetType

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

3:BaseOn

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

<1>:继承

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="baseStyle" TargetType="Button">
8 <Setter Property="FontSize" Value="22"/>
9 </Style>
10 <Style x:Key="childStyle" TargetType="Button"
11 BasedOn="{StaticResource ResourceKey=baseStyle}">
12 <Setter Property="Background" Value="Pink"/>
13 </Style>
14 </Window.Resources>
15 <Grid>
16 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农"/>
17 </Grid>
18 </Window>

效果:

从上例中,我们看到childStyle继承到了baseStyle中的fontSize,最终的效果也是我们期望看到的。

<2>:覆盖

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

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

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

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

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

4:Triggers

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

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

<1> Trigger,MuliTrigger

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

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

下面举个例子

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="childStyle" TargetType="Button">
8 <Setter Property="Background" Value="BurlyWood"/>
9 <Style.Triggers>
10 <!-- 当IsMouseOver的时候,Button颜色变成粉色 -->
11 <Trigger Property="IsMouseOver" Value="True">
12 <Setter Property="Background" Value="Pink"/>
13 </Trigger>
14 </Style.Triggers>
15 </Style>
16 </Window.Resources>
17 <Grid>
18 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农">
19 </Button>
20 </Grid>
21 </Window>

最后的效果就是当isMouseOver=true的情况下,button的Background变成Pink。

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

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="childStyle" TargetType="Button">
8 <Setter Property="Background" Value="BurlyWood"/>
9 <Style.Triggers>
10 <MultiTrigger>
11 <MultiTrigger.Conditions>
12 <Condition Property="IsMouseOver" Value="True"></Condition>
13 <Condition Property="IsPressed" Value="True"></Condition>
14 </MultiTrigger.Conditions>
15 <Setter Property="Background" Value="Pink"/>
16 </MultiTrigger>
17 </Style.Triggers>
18 </Style>
19 </Window.Resources>
20 <Grid>
21 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农">
22 </Button>
23 </Grid>
24 </Window>

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

<2>DataTrigger,MultiDataTrigger

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

 1 <Window x:Class="WpfApplication1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:sys="clr-namespace:System;assembly=mscorlib"
5 Title="MainWindow" Height="350" Width="525">
6 <Window.Resources>
7 <Style x:Key="childStyle" TargetType="Control">
8 <Setter Property="Background" Value="BurlyWood"/>
9 <Style.Triggers>
10 <!-- 绑定当前的radio单选框,如果按钮选中,触发字体设置 -->
11 <DataTrigger Binding="{Binding ElementName=radio, Path=IsChecked}" Value="True">
12 <Setter Property="FontSize" Value="20"/>
13 </DataTrigger>
14 </Style.Triggers>
15 </Style>
16 </Window.Resources>
17 <Grid>
18 <RadioButton Style="{StaticResource ResourceKey=childStyle}"
19 Name="radio" Content="我要变成20号字"></RadioButton>
20 </Grid>
21 </Window>

效果:

           =>            

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

<3>EventTrigger

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

5:IsSealed

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

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

WPF03(样式)的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. BootStrap_02之全局样式及组件

    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...

  3. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  4. x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法

    这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...

  5. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  6. WPF样式之画刷结合样式

    第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...

  7. JavaScript特性(attribute)、属性(property)和样式(style)

    最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...

  8. 邮件中嵌入html中要注意的样式

    工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...

  9. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

随机推荐

  1. tcpdump 进行抓包

    tcpdump 进行抓包是怎么回事? tcp抓包是怎么搞的?

  2. 解决Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.7

    一般情况下可能是文件格式有问题,将正确的文件内容替换掉错误的文件内容,不断地尝试,直到文件不报错,当然也有可能是下面的原因:下面是2.7.1版本的方法,其他类似) 或者是:进入该jar包指示的路径,删 ...

  3. iOS学习笔记31-从图册获取图片和视频

    一.从图册中获取本地图片和视频 从图册中获取文件,我们使用的是UIImagePickerController,这个类我们在之前的摄像头中使用过,这里是链接:iOS学习笔记27-摄像头,这里我们使用的是 ...

  4. webpack错误Chunk.entry was removed. Use hasRuntime()

    这个错误在从webpack1升级webpack2或webpack3时候都遇到了,起初查到的都是extract-text-webpack-plugin版本的问题,升级了还是不管用.搜索引擎上查不到其他的 ...

  5. 模拟tap事件和longTap事件

    移动端模拟tap和longTap事件,基本原理就是在touchstart和touchend事件中,计算触摸的位移和时间差,位移在一定范围内(轻微滑动),时间小于150ms为tap事件,时间大于300m ...

  6. spring-boot项目热部署以及spring-devtools导致同类不能转换

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  7. bzoj 3625小朋友和二叉树 多项式求逆+多项式开根 好题

    题目大意 给定n种权值 给定m \(F_i表示权值和为i的二叉树个数\) 求\(F_1,F_2...F_m\) 分析 安利博客 \(F_d=F_L*F_R*C_{mid},L+mid+R=d\) \( ...

  8. C#连接数据库SQL(2005)

    原文发布时间为:2008-07-24 -- 来源于本人的百度文章 [由搬家工具导入] 总算把这起步的路走了.首先来总结一下进行数据库编程的全过程,这里用的是SQL SERVER(1)建立SqlConn ...

  9. Oracle Dual 表详解

    1.DUAL表的用途Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中--查看当前连接用户SQL> select user from dua ...

  10. 标准C程序设计七---100

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...