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>

效果

1

示例代碼

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