WPF Style和Trigger

Style

有这样一个button：

<Button Height="30" Width="80" Background="AliceBlue" BorderBrush="Red"></Button>

上面的代码定义了它的边框颜色与背景色。当我们需要创建再一个或多个风格一样的按钮时，为了方便我们就可以把样式提取出来。

    <Window.Resources>
        <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
            <Setter Property="Button.Background" Value="AliceBlue"/>
            <Setter Property="Button.BorderBrush" Value="Red"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Height="30" Width="80" Style="{DynamicResource buttonStyle}"></Button>
    </Grid>

这样我们再创建相同风格按钮时只需要引用被buttonStyle标记的style即可。

如果我们只指定TargetType不指定key值，这个style会自动应用到按钮上：

    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Button.Background" Value="AliceBlue"/>
            <Setter Property="Button.BorderBrush" Value="Red"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Height="30" Width="80"></Button>
    </Grid>

Trigger

Property triggers、Data triggers、Event triggers、MultiTrigger。其中Event triggers多应用在动画中所以在这先整理其他的三种。

Property triggers

        <Style x:Key="buttonStyle" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="30"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

触发器的property只能应用到依赖属性(DependencyProperty)上,上面的代码意思是当鼠标进入button范围时旋转三十度。触发器有一个特点是当不满足设置的条件时（IsMouseOver=false）会还原到原来的风格。

Data triggers

       <Style TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}"  Value="datatrigger">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

绑定的数据源满足条件时会触发，以上代码，在文本框中输入datatrigger时背景色会变为红色。

MultiTrigger

        <Style TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True"/>
                        <Condition Property="IsFocused" Value="True"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="Red"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>

满足多个条件时才会触发。