备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

无废话WPF系列15：样式

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

样式很好理解，就像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废话
最美的回忆
目录
相关文章
关关长语
|
9月前
|
C#
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
关关长语
166 0
老码识途
|
3月前
|
C#
浅谈WPF之样式与资源
WPF通过样式，不仅可以方便的设置控件元素的展示方式，给用户呈现多样化的体验，还简化配置，避免重复设置元素的属性，以达到节约成本，提高工作效率的目的，样式也是资源的一种表现形式。本文以一个简单的小例子，简述如何设置WPF的样式以及资源的应用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
44 0
关关长语
|
9月前
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
131 1
杰克.陈
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
原文:【WPF】右下角弹出自定义通知样式（Notification）——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
杰克.陈
2823 0
关关长语
|
9月前
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
关关长语
86 0
关关长语
|
9月前
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
关关长语
114 0
关关长语
|
9月前
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
关关长语
71 0
关关长语
|
9月前
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
关关长语
72 0
谷艳爽faye
|
10月前
|
C#
WPF属性---重复样式和触发器
WPF属性---重复样式和触发器
谷艳爽faye
71 0
青城Dev
|
前端开发 C#
wpf引用样式
wpf引用样式
青城Dev
96 0