AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

无废话WPF系列15：样式

2017-11-21 805
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

样式很好理解，就像CSS里的一样，无需多加解释

1. 样式中的Setter

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< Window  x:Class="DeepXAML.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:DeepXAML"      
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="250" Width="450">
     < Window.Resources >
         < Style  TargetType="Button">
             < Setter  Property="FontSize" Value="30"></ Setter >
             < Setter  Property="Margin" Value="10"></ Setter >
         </ Style >
     </ Window.Resources >      
     < StackPanel >
         < Button >New</ Button >
         < Button >Save</ Button >
         < Button >Exit</ Button >
     </ StackPanel >
</ Window >
< a  href="http://images.cnblogs.com/cnblogs_com/cnblogsfans/201102/201102271111593876.png">< img  style="background-image: none; border-right-width: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="https://images.cnblogs.com/cnblogs_com/cnblogsfans/201102/201102271112008793.png" width="244" height="137"></ a >

很明显，使用样式让我们代码更精简，而且界面的外观可以集中处理。

 

2. 样式中的Trigger

当某些条件满足时，触发一个行为

a. 基本Trigger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
< Window  x:Class="DeepXAML.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:DeepXAML"      
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="250" Width="450">
     < Window.Resources >
         < Style  TargetType="CheckBox">
             < Setter  Property="FontSize" Value="30"></ Setter >
             < Setter  Property="Margin" Value="10"></ Setter >
             < Style.Triggers >
                 < Trigger  Property="IsChecked" Value="true">
                     < Trigger.Setters >
                         < Setter  Property="Foreground"  Value="Red"></ Setter >
                     </ Trigger.Setters >
                 </ Trigger >   
             </ Style.Triggers >
         </ Style >
     </ Window.Resources >      
     < StackPanel >
         < CheckBox >.Net</ CheckBox >
         < CheckBox >Java</ CheckBox >
         < CheckBox >Ruby</ CheckBox >
         < CheckBox >Python</ CheckBox >
     </ StackPanel >
</ Window >
image

 

b. MultiTrigger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< Window  x:Class="DeepXAML.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:DeepXAML"      
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="250" Width="450">
     < Window.Resources >
         < Style  TargetType="CheckBox">
             < Setter  Property="FontSize" Value="30"></ Setter >
             < Setter  Property="Margin" Value="10"></ Setter >
             < Style.Triggers >
                 < MultiTrigger >
                     < MultiTrigger.Conditions >
                         < Condition  Property="IsChecked" Value="true"></ Condition >
                         < Condition  Property="Content" Value="Java"></ Condition >
                     </ MultiTrigger.Conditions >
                     < MultiTrigger.Setters >
                         < Setter  Property="Foreground" Value="Red"></ Setter >
                     </ MultiTrigger.Setters >
                 </ MultiTrigger >
             </ Style.Triggers >
         </ Style >
     </ Window.Resources >      
     < StackPanel >
         < CheckBox >.Net</ CheckBox >
         < CheckBox >Java</ CheckBox >
         < CheckBox >Ruby</ CheckBox >
         < CheckBox >Python</ CheckBox >
     </ StackPanel >
</ Window >

image

 

c. DataTrigger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< Window  x:Class="DeepXAML.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:DeepXAML"      
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="250" Width="450">
     < Window.Resources >
         < Style  TargetType="TextBox">
             < Setter  Property="Margin" Value="10"></ Setter >
             < Style.Triggers >
                 < DataTrigger  Binding="{Binding Path=Name}" Value="Jack">
                     < Setter  Property="Foreground" Value="Red"></ Setter >
                 </ DataTrigger >              
             </ Style.Triggers >
         </ Style >
     </ Window.Resources >
     < StackPanel  x:Name="stackPanel">
         < TextBox  Text="{Binding Path=Name}"></ TextBox >
         < TextBox  Text="{Binding Path=Age}"></ TextBox >
         < TextBox ></ TextBox >
     </ StackPanel >
</ Window >
1
2
3
4
5
6
7
8
9
10
11
12
13
public  MainWindow()
{
     InitializeComponent();
 
     Person p = new  Person { Name = "Jack" , Age = 30 };
     this .stackPanel.DataContext = p;           
}
 
public  class  Person
{
     public  string  Name { get ; set ; }
     public  int  Age { get ; set ; }
}
image

 

d. 多数据条件的trigger

MultiDataTrigger这个类似上面的MultiTrigger,不用细说了。

e. EventTrigger

是由事件来触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
< Window  x:Class="DeepXAML.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:DeepXAML"      
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="250" Width="450">
     < Window.Resources >
         < Style  TargetType="Button">
             < Setter  Property="Margin" Value="10"></ Setter >
             < Style.Triggers >
                 < EventTrigger  RoutedEvent="MouseEnter">
                     < BeginStoryboard >
                         < Storyboard >                           
                             < DoubleAnimation  To="20" Duration="0:0:0.2" Storyboard.TargetProperty="Width"></ DoubleAnimation >
                             < DoubleAnimation  To="70" Duration="0:0:0.2" Storyboard.TargetProperty="Height"></ DoubleAnimation >
                         </ Storyboard >
                     </ BeginStoryboard >
                 </ EventTrigger >
                 < EventTrigger  RoutedEvent="MouseLeave">
                     < BeginStoryboard >
                         < Storyboard >
                             < DoubleAnimation  To="100" Duration="0:0:0.2" Storyboard.TargetProperty="Width"></ DoubleAnimation >
                             < DoubleAnimation  To="20" Duration="0:0:0.2" Storyboard.TargetProperty="Height"></ DoubleAnimation >
                         </ Storyboard >
                     </ BeginStoryboard >
                 </ EventTrigger >
             </ Style.Triggers >
         </ Style >
     </ Window.Resources >
     < StackPanel  x:Name="stackPanel">
         < Button  Width="100" Height="20">OK</ Button >
     </ StackPanel >
</ Window >
 
< font  color="#ff0000">这里DoubleAnimation必须显示设置Button的Width和Height,不能是用默认的，否则会报错。</ font >
本文转自敏捷的水博客园博客，原文链接http://www.cnblogs.com/cnblogsfans/archive/2011/02/27/1966168.html如需转载请自行联系原作者

王德水
文章标签：
C#
关键词：
wpf样式
wpf废话
最美的回忆
目录
相关文章
关关长语
|
C#
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
关关长语
341 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：资源字典应用秘籍，轻松实现样式与模板共享，让你的WPF应用更上一层楼！
【8月更文挑战第31天】在WPF开发中，资源字典是一种强大的工具，用于共享样式、模板、图像等资源，提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践，并通过示例展示了如何在项目中有效利用资源字典，实现资源的重用和动态绑定。
土木林森
72 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：样式与模板的艺术，轻松定制UI外观，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性，而模板则允许自定义控件布局与子控件，两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识，通过示例展示了如何创建并应用它们来改变按钮的外观，从而提升用户体验。
土木林森
69 0
杰克.陈
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
原文:【WPF】右下角弹出自定义通知样式（Notification）——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
杰克.陈
3044 0
mingupup
|
3月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
mingupup
41 0
关关长语
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
235 1
老码识途
|
6月前
|
C#
浅谈WPF之样式与资源
WPF通过样式，不仅可以方便的设置控件元素的展示方式，给用户呈现多样化的体验，还简化配置，避免重复设置元素的属性，以达到节约成本，提高工作效率的目的，样式也是资源的一种表现形式。本文以一个简单的小例子，简述如何设置WPF的样式以及资源的应用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
117 0
关关长语
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
关关长语
207 0
关关长语
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
关关长语
222 0
关关长语
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
关关长语
122 0