WPF中的Style
一、Style基础知识
构成Style最重要的两种元素是Setter和Trigger
Setter类帮助我们设置控件的静态外观风格
Trigger类帮助我们设置控件的行为风格
Setter类的Property属性是用来指明你想为目标的哪个属性赋值；Value属性则是你提供的属性值：例如在Window的资源词典中放置一个针对TextBlock的Style，Style中使用若干 Setter来设定TextBlock的一些属性，这样程序中的TextBlock就会具有统一的风格，除非使用{x:Null}显示地清空Style.
Trigger类最基本的是触发器，Property是Trigger关键的属性名称，Value是触发条件，Trigger类还有一个Setters属性，此属性是一组Setter，一旦触发条件被满足，这组Setter 的“属性-值”就会被应用，触发条件不再满足后，各属性值会被还原。
二、案例
1、 Style中的Setter
<Window x:Class="Style中的Setter.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="TextBlock"> <Style.Setters> <Setter Property="FontSize" Value="24"/> <Setter Property="TextDecorations" Value="Underline"/> <Setter Property="FontStyle" Value="Italic"/> </Style.Setters> </Style> </Window.Resources> <StackPanel Margin="5"> <TextBlock Text="Hello Wpf"/> <TextBlock Text="This is a sample"/> <TextBlock Text="by time 2009" Style="{x:Null}"></TextBlock> </StackPanel> </Window>
Style中的Trigger
<Window x:Class="Style中的Trigger.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="CheckBox" x:Key="myStyle"> <Style.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter Property="FontSize" Value="20"/> <Setter Property="Foreground" Value="Orange"/> </Trigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel> <CheckBox Content="悄悄地我走了" Margin="5" Style="{StaticResource myStyle}"/> <CheckBox Content="正如我轻轻的来" Margin="5"/> <CheckBox Content="我挥一挥衣袖" Margin="5"/> <CheckBox Content="不带走一片云彩" Margin="5"/> </StackPanel> </Window>
如果想全部应用的话那就去掉x:Key="myStyle"
2、MultiTrigger:(叫MultiConditionTrigger更合适)因为必须多个条件同时满足的时候才会被触发，MultiTrigger比Trigger多了一个Conditions属性，需要同时成立的条件就被存储在这个集合中。
<Window.Resources> <Style TargetType="CheckBox"> <Style.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsChecked" Value="True"/> <Condition Property="Content" Value="正如我轻轻的来"/> </MultiTrigger.Conditions> <MultiTrigger.Setters> <Setter Property="FontSize" Value="20"/> <Setter Property="Foreground" Value="Orange"/> </MultiTrigger.Setters> </MultiTrigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel> <CheckBox Content="轻轻的我走了"/> <CheckBox Content="正如我轻轻的来"/> <CheckBox Content="我轻轻的招手"/> <CheckBox Content="不带走一片云彩"/> </StackPanel>
3、由数据触发的DataTrigger
<Window.Resources> <local:L2BConverter x:Key="cvtr"/> <Style TargetType="TextBox"> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource cvtr}}" Value="false"> <Setter Property="BorderBrush" Value="Red"/> <Setter Property="BorderThickness" Value="11"/> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel> <TextBox Margin="5"/> <TextBox Margin="5"/> <TextBox Margin="5"/> </StackPanel>
class L2BConverter:IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { int textLength = (int) value; return textLength > 6 ? true : false; } public object ConvertBack(object value, Type targerType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
4、多数据条件触发的MultiDataTrigger：有时我们会遇到要求多个数据同时满足时才能触发变化的需求，此时可以考虑使用MultiDataTrigger
<Window x:Class="多数据条件触发的MultiDataTrigger.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:多数据条件触发的MultiDataTrigger" xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="ListBoxItem"> <!--使用Style设置DataTemplate--> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ID}"/> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Age}"/> </StackPanel> </DataTemplate> </Setter.Value> </Setter> <!--MultiDataTrigger--> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=ID}" Value="2"/> <Condition Binding="{Binding Path=Name}" Value="Tom"/> </MultiDataTrigger.Conditions> <MultiDataTrigger.Setters> <Setter Property="Background" Value="Orange"/> </MultiDataTrigger.Setters> </MultiDataTrigger> </Style.Triggers> </Style> <!--数据源--> <!--<collections:ArrayList x:Key="stuList"> <local:Student ID="1" Name="One" Age="1"/> <local:Student ID="2" Name="Two" Age="2"/> <local:Student ID="3" Name="Three" Age="3"/> </collections:ArrayList>--> </Window.Resources> <StackPanel> <ListBox x:Name="list" Margin="5" /> </StackPanel> </Window>
List<Student> stuList=new List<Student>() { new Student(){ID = 1,Name = "One",Age = 1}, new Student(){ID = 2,Name = "Two",Age = 2}, new Student(){ID = 3,Name = "Three",Age = 3}, new Student(){ID = 2,Name = "Tom",Age = 4} }; this.list.ItemsSource = stuList; }
5、由事件触发的EventTrigger
EventTrigger是触发器中最特殊的一个。首先，它不是由属性值或数据的变化来触发而是由事件来触发；其次，被触发后它并非应用一组Setter，而是执行一段动画。
<Window x:Class="由事件触发的EventTrigger.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="Button"> <Style.Triggers> <!--鼠标进入--> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> <!--鼠标退出--> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Button Width="40" Height="40"></Button> </Grid> </Window>
