Trigger

Posted 2020-10-19 lulus

Trigger分类

Trigger
MultiTrigger
DataTrigger
MultiDataTrigger
EventTrigger

EventTrigger

指定触发的事件，触发事件之后执行的内容，这里写了两个动画效果

<CheckBox Content="随着鼠标划入划出，长度改变" HorizontalAlignment="Left" Width="70">
    <CheckBox.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="OrangeRed"></Setter>
            <Style.Triggers>
                <!--当鼠标划入，增加长度-->
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!--这里设置了一个动画，持续时间是0.2秒，改变属性为Width，目标数值是200-->
                                <DoubleAnimation Duration="0:0:0.2" 
                                                 Storyboard.TargetProperty="Width" 
                                                 To="200"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <!--当鼠标划出，减小长度-->
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" 
                                                 Storyboard.TargetProperty="Width" 
                                                 To="70"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Resources>
</CheckBox>

Trigger

<Grid>
    <Grid.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Foreground" Value="DarkOrange"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="DarkRed"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <Button Content="鼠标滑过时，修改字体颜色" Style="{StaticResource ButtonStyle}"></Button>
</Grid>

DataTrigger

根据值，设置对应的效果
这里设置的是行头和单元格的效果，也可以设置为其他属性

<Window.Resources>
    <!--单元格的样式-->
    <Style TargetType="DataGridCell" x:Key="ColorCell">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Type}" Value="0">
                <Setter Property="Background" Value="Pink"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Type}" Value="1">
                <Setter Property="Background" Value="Coral"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Type}" Value="2">
                <Setter Property="Background" Value="Crimson"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <DataGrid ItemsSource="{Binding }" AutoGenerateColumns="False">
        <!--行头的样式-->
        <DataGrid.RowHeaderStyle>
            <Style TargetType="DataGridRowHeader">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Type}" Value="0">
                        <Setter Property="Background" Value="Pink"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="1">
                        <Setter Property="Background" Value="Coral"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="2">
                        <Setter Property="Background" Value="Crimson"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DataGrid.RowHeaderStyle>
        <DataGrid.Columns>
            <DataGridTextColumn Header="Type值" Width="*" Binding="{Binding TypeValue}"/>
            <DataGridTextColumn Header="Type效果" Width="*" Binding="{Binding Type}" CellStyle="{StaticResource ColorCell}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

效果

 

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/Trigger