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

简介:

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

html{border:0;}
ul,form{margin:0; padding:0}
body,div,th,td,li,dd,span,p,a{font-size:12px; font-family:Verdana,Arial,"宋体";color:#575757;}
h3,input{font-size:12px; font-family:Verdana,Arial,"宋体";color:#4465a2;}

body {
 /*background-color:#eaeaea;*/
 /*e5e5e5*/
 /*BACKGROUND: url(../images/header_bg.jpg) #fff repeat-x;*/
 BACKGROUND: url(../images/color_1.png) #fff repeat-x 0px -233px;
 margin:0px;
 padding:0px;
}

ul{list-style:none;}
h1,h2,h4,h5,h6{ font-size:14px; color:#333;}
img{border:0;}
a {color:#333333;text-decoration:none;}
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。


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style TargetType="Button">
 <Setter Property="Background" Value="Pink"/>
 <Setter Property="FontSize" Value="22"/>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Content="一线码农"/>
 </Grid>
</Window>

最后效果:

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

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



<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="mystyle" TargetType="Button">
 <Setter Property="Background" Value="Pink"/>
 <Setter Property="FontSize" Value="22"/>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Style="{StaticResource ResourceKey=mystyle}" Content="一线码农"/>
 </Grid>
</Window>

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

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


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="mystyle" TargetType="ContentControl">
 <Setter Property="Background" Value="Pink"/>
 <Setter Property="FontSize" Value="22"/>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Style="{StaticResource ResourceKey=mystyle}" 
 Content="Button" Height="23" Margin="132,99,0,0" Name="button1" Width="75" />
 <Label Style="{StaticResource ResourceKey=mystyle}" 
 Content="Label" Height="28" Margin="140,168,0,0" Name="label1" />
 </Grid>
</Window>

2:TargetType

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

3:BaseOn

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

<1>:继承


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="baseStyle" TargetType="Button">
 <Setter Property="FontSize" Value="22"/>
 </Style>
 <Style x:Key="childStyle" TargetType="Button"
 BasedOn="{StaticResource ResourceKey=baseStyle}">
 <Setter Property="Background" Value="Pink"/>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农"/>
 </Grid>
</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就能够简单的满足这些事件处理。

下面举个例子


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="childStyle" TargetType="Button">
 <Setter Property="Background" Value="BurlyWood"/>
 <Style.Triggers>
 <!-- 当IsMouseOver的时候,Button颜色变成粉色 -->
 <Trigger Property="IsMouseOver" Value="True">
 <Setter Property="Background" Value="Pink"/>
 </Trigger>
 </Style.Triggers>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农">
 </Button>
 </Grid>
</Window>

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

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


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="childStyle" TargetType="Button">
 <Setter Property="Background" Value="BurlyWood"/>
 <Style.Triggers>
 <MultiTrigger>
 <MultiTrigger.Conditions>
 <Condition Property="IsMouseOver" Value="True"></Condition>
 <Condition Property="IsPressed" Value="True"></Condition>
 </MultiTrigger.Conditions>
 <Setter Property="Background" Value="Pink"/>
 </MultiTrigger>
 </Style.Triggers>
 </Style>
 </Window.Resources>
 <Grid>
 <Button Style="{StaticResource ResourceKey=childStyle}" Content="一线码农">
 </Button>
 </Grid>
</Window>

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

<2>DataTrigger,MultiDataTrigger

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


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

效果:

=>

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

<3>EventTrigger

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

5:IsSealed

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

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


相关文章
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
376 0
|
3月前
|
C# 开发者 Windows
WPF 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
170 65
|
4月前
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
88 0
|
4月前
|
开发者 C# 存储
WPF开发者必读:资源字典应用秘籍,轻松实现样式与模板共享,让你的WPF应用更上一层楼!
【8月更文挑战第31天】在WPF开发中,资源字典是一种强大的工具,用于共享样式、模板、图像等资源,提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践,并通过示例展示了如何在项目中有效利用资源字典,实现资源的重用和动态绑定。
104 0
|
4月前
|
开发者 C# 存储
WPF开发者必读:样式与模板的艺术,轻松定制UI外观,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性,而模板则允许自定义控件布局与子控件,两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识,通过示例展示了如何创建并应用它们来改变按钮的外观,从而提升用户体验。
97 0
|
4月前
|
C# Windows IDE
WPF入门实战:零基础快速搭建第一个应用程序,让你的开发之旅更上一层楼!
【8月更文挑战第31天】在软件开发领域,WPF(Windows Presentation Foundation)是一种流行的图形界面技术,用于创建桌面应用程序。本文详细介绍如何快速搭建首个WPF应用,包括安装.NET Framework和Visual Studio、理解基础概念、创建新项目、设计界面、添加逻辑及运行调试等关键步骤,帮助初学者顺利入门并完成简单应用的开发。
142 0
|
4月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
45 0
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
254 1
|
7月前
|
C#
浅谈WPF之样式与资源
WPF通过样式,不仅可以方便的设置控件元素的展示方式,给用户呈现多样化的体验,还简化配置,避免重复设置元素的属性,以达到节约成本,提高工作效率的目的,样式也是资源的一种表现形式。本文以一个简单的小例子,简述如何设置WPF的样式以及资源的应用,仅供学习分享使用,如有不足之处,还请指正。
128 0
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
245 0