构成Style的最重要的两个元素是Setter和Trigger,Setter类帮助我们设置控件的静态外观风格,Trigger则帮助我们设置控件的行为风格。
- Style中的Setter
Setter设置器,什么的设置器?属性的,我们给属性赋值时一般都采用“属性名=属性值”的形式。Setter类的Property属性用来指明你想为目标的那个属性值赋值;Setter类的Value属性则是你体统的属性值。
<Grid> <Grid.Resources> <Style x:Key="myStyle" TargetType="TextBox"> <Setter Property="Foreground" Value="Red"></Setter> <Setter Property="FontSize" Value="24"></Setter> <Setter Property="TextDecorations" Value="Underline"></Setter> </Style> </Grid.Resources> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBox Grid.Row="0" Width="100" Height="40" Style="{StaticResource myStyle}"></TextBox> <TextBox Grid.Row="1" Text="HelloWorld" Width="100" Height="40"></TextBox> </Grid>
Style中的Trigger
Trigger触发器,即当某些条件满足时会触发一些行为。
1.基本Trigger
Trigger类也有Property和Value两个属性,Property是Trigger关注的属性名称,Value是触发条件,Trigger类还有一个Setters属性,一旦触发条件被满足,这组Setters就会被应用,当条件不满足,属性值就会被还原。
<Grid> <Grid.Resources> <Style x:Key="myStyle" TargetType="CheckBox"> <Style.Triggers> <Trigger Property="IsChecked" Value="true"> <Trigger.Setters> <Setter Property="FontSize" Value="20"> </Setter> <Setter Property="Foreground" Value="Orange"></Setter> </Trigger.Setters> </Trigger> </Style.Triggers> </Style> </Grid.Resources> <CheckBox Style="{StaticResource myStyle}" Content="Hello"></CheckBox> </Grid>
2.MultiTrigger
多个条件同时成立时才会被触发。
<Style x:Key="myStyle2" TargetType="CheckBox"> <Style.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsChecked" Value="true"></Condition> <Condition Property="Content" Value="Hello"></Condition> </MultiTrigger.Conditions> <Setter Property="FontSize" Value="72"></Setter> </MultiTrigger> </Style.Triggers> </Style>
3.DataTrigger
DataTrigger对象的Binding会把数据源源不断地送过来,一旦送来的值与Value的值一致,即触发
<Window x:Class="MultiDataTrigger.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="ListBoxItem"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ID}" Width="60"></TextBlock> <TextBlock Text="{Binding Name}" Width="120"></TextBlock> <TextBlock Text="{Binding Age}" Width="60"></TextBlock> </StackPanel> </DataTemplate> </Setter.Value> </Setter> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding ID}" Value="2"></Condition> <Condition Binding="{Binding Name}" Value="Tom"></Condition> </MultiDataTrigger.Conditions> <Setter Property="Background" Value="Orange"></Setter> </MultiDataTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <ListBox x:Name="listBoxStudent"></ListBox> </Grid> </Window>
效果拔群呀!!!
4.由事件触发的EventTrigger
EventTrigger是触发器中最特殊的一个。首先,它不是由属性值或数据的变化触发而是由事件来触发;其次,被触发后它并非应用一组Setter,而是执行一段动画。因此,UI层的动画效果往往与EventTrigger相关联。
<Window x:Class="EventTriggerSample.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" Content="OK"></Button> </Grid> </Window>