WPF中觸發器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger幾種

WPF中有種叫做觸發器的東西（記住不是數據庫的trigger哦）。它的主要作用是根據trigger的不同條件來自動更改外觀屬性，或者執行動畫等操作。

WPFtrigger的主要類型有：Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger幾種。從字面意思上我們想大家已經知道個大概，接下來我將還會用實例代碼逐一進行介紹。trigger主要運用的場景在Style、ControlTemplate、DataTemplate三個地方。在這些地方可以使用trigger，具體視情況而定。

1.在Style中使用各種trigger

在style中使用的trigger主要是屬性的觸發器，當屬性的值發生改變是將會引發觸發器。

a.普通屬性trigger  當鼠標滑過時字體變成紅色

<span>  </span><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> 

b.普通屬性MultiTrigger  當checkbox勾選並且鼠標滑過時字體變成綠色

<span>  </span><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> 

c.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> 

這是一個treeview控件 根據綁定的isdir值不同 可以顯示icon是一個目錄（文件夾）或者是一個文件，看是不是很簡單呢

 

以上只是簡單的介紹了trigger的一些用法，具體的功能大家可以自由發揮，這也是wpf的強大之處