WPF触发器

WPF触发器

WPFtrigger的主要类型有：Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种。接下来用实例代码逐一进行介绍。

trigger主要运用的场景在Style、ControlTemplate、DataTemplate三个地方。在这些地方可以使用trigger，具体视情况而定。

1.在Style中使用各种trigger

1.1 普通属性trigger 当鼠标滑过时字体变成红色

<CheckBox Content="Style Trigger MouseOver Red">
    <CheckBox.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="SkyBlue"/>
            <Style.Triggers>
                <!--鼠标滑过时字体为红色-->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Resources>
</CheckBox>

1.2 普通属性MultiTrigger 当checkbox勾选并且鼠标滑过时字体变成绿色

<CheckBox Content="Style MultiTrigger Checked and MouseOver Green ">
    <CheckBox.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="SkyBlue"/>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True" />
                        <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Foreground" Value="Green"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Resources>
</CheckBox>

1.3 EventTrigger 鼠标划入长度变长 鼠标移出 长度变短

<CheckBox Content="Style EventTrigger " Width="70" HorizontalAlignment="Left">
    <CheckBox.Resources>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="SkyBlue"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                                 Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Width"
                                                 To="150"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                                 Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Width"
                                                 To="70"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </CheckBox.Resources>
</CheckBox>

2.在ControlTemplate中使用trigger

在ControlTemplate中使用的trigger主要是在controltemplate中的元素的触发器, 当属性的值发生改变时将会引发触发器。

属性为“Border” 的鼠标滑过时背景变色，其他的trigger同上面的style一样

<Button Content="ControlTemplate" Width="120" Height="30">
    <Button.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Gray"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <StackPanel>
                            <Border Height="10" Background="Red"></Border>
                            <Border x:Name="Border" CornerRadius="0" BorderThickness="1"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                        </StackPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#FFC2E0FF"/>
                                <Setter TargetName="Border" Property="BorderBrush" Value="#FF3399FF"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Resources>
</Button>

3.在DataTemplate中使用trigger

在DataTemplate中使用trigger可以根据绑定的数据不同显示不同的内容。

<TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" >
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Border CornerRadius="0" Margin="1"  x:Name="back" MinWidth="70"
                    Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove">
                <StackPanel Orientation="Horizontal" Margin="2">
                    <Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" />
                    <TextBlock Text="{Binding ShowText}" Margin="2 0"/>
                </StackPanel>
                <Border.ContextMenu>
                    <ContextMenu x:Name="menu" >
                        <MenuItem Header="Add Directory" x:Name="menu_addDir" Click="AddDir_Click" DataContext="{Binding}"/>
                        <MenuItem Header="Add Property" x:Name="menu_addChild"  Click="AddChild_Click" DataContext="{Binding}"/>
                        <MenuItem Header="Edit" Click="Modify_Click" DataContext="{Binding}"/>
                        <MenuItem Header="Delete" Click="Delete_Click" DataContext="{Binding}"/>
                    </ContextMenu>
                </Border.ContextMenu>
            </Border>
            <HierarchicalDataTemplate.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="False"/>
                        <Condition Binding="{Binding IsDir}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir.png" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TreeViewItem}},Path=IsExpanded}"  Value="True"/>
                        <Condition Binding="{Binding IsDir}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter TargetName="BGimage" Property="Source" Value="/Vdc3D.Coms.DModelEditor;component/Images/dir_open.png" />
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
                <DataTrigger Binding="{Binding IsDir}" Value="True">
                    <Setter TargetName="menu_addDir"  Property="Visibility" Value="Visible"/>
                    <Setter TargetName="menu_addChild"  Property="Visibility" Value="Visible"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsDir}" Value="False">
                    <Setter TargetName="menu_addDir"  Property="Visibility" Value="Collapsed"/>
                    <Setter TargetName="menu_addChild"  Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>