WPF风格

构成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>

 

 

posted @ 2013-03-04 22:12  UncleNull  阅读(787)  评论(0编辑  收藏  举报