WPF觸發器(Trigger)

WPF觸發器(Trigger、DataTrigger、EventTrigger)

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

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

　　1.在Style中使用各種trigger

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

　　a.普通屬性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>

　　b.普通屬性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>

　　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的強大之處

　　本文來自lhx527099095的博客，原文地址：http://blog.csdn.net/lhx527099095/article/details/8029207

 

WPF快速指導6：觸發器     本文摘要：     1：屬性觸發器；     2：數據觸發器；     3：事件觸發器；

    Style、ControlTemplate 和 DataTemplate 都有觸發器集合。     屬性觸發器只檢查WPF從屬屬性，而數據觸發器則可檢查任何一種可綁定的屬性。屬性觸發器一般用來檢查WPF可視元素的屬性，而數據觸發器則通常用來檢查不可視對象的屬性。     屬性觸發器：通過此機制，一個屬性的更改會在另一個屬性中觸發即時或動態更改。     數據觸發器：通過此機制，事件會在屬性中觸發動態更改。     數據觸發器：EventTrigger，它根據事件的引發來啟動一組操作，但這類操作僅限於動畫。

一：屬性觸發器     查看代碼片段1：

   <Style TargetType="ListBoxItem"> <Setter Property="Opacity" Value="0.5" /> <Setter Property="MaxHeight" Value="75" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Trigger.Setters> <Setter Property="Opacity" Value="1.0" /> </Trigger.Setters> </Trigger> </Style.Triggers> </Style>

    表示在ListBoxItem的IsSelected屬性變為True的時候，其另外一個屬性Opacity的值變為1.0。 1.1單個觸發器     代碼片段1就是單個觸發器。 1.2多個觸發器     可以為ListBoxItem設置多個觸發器。 1.3多條件屬性觸發器     多條件觸發器就是說，同時滿足幾個條件的時候才觸發行為。     如代碼片段2： 

               <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsFocused" Value="True"></Condition> <Condition Property="Content" Value="{x:Null}"></Condition> </MultiTrigger.Conditions> <Setter Property="ToolTip" Value="content is null!"></Setter> </MultiTrigger>

二：數據觸發器     使用 DataTrigger，可以在數據對象的屬性值與指定的 Value 匹配時設置屬性值。例如，在顯示 Employee 對象列表時，可能希望前景色根據每個 Employee 的當前出勤情況而變化。（例如，用紫色前景色顯示當前正在休假的 Employee。）     查看代碼片段3

       <Window.Resources> <c:Places x:Key="PlacesData"/> <Style TargetType="ListBoxItem"> <Style.Triggers> <DataTrigger Binding="{Binding Path=State}" Value="WA"> <Setter Property="Foreground" Value="Red" /> </DataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=Name}" Value="Portland" /> <Condition Binding="{Binding Path=State}" Value="OR" /> </MultiDataTrigger.Conditions> <Setter Property="Background" Value="Cyan" /> </MultiDataTrigger> </Style.Triggers> </Style> <DataTemplate DataType="{x:Type c:Place}"> <Canvas Width="160" Height="20"> <TextBlock FontSize="12" Width="130" Canvas.Left="0" Text="{Binding Path=Name}"/> <TextBlock FontSize="12" Width="30" Canvas.Left="130" Text="{Binding Path=State}"/> </Canvas> </DataTemplate> </Window.Resources> <StackPanel> <TextBlock FontSize="18" Margin="5" FontWeight="Bold" HorizontalAlignment="Center">Data Trigger Sample</TextBlock> <ListBox Width="180" HorizontalAlignment="Center" Background="Honeydew" ItemsSource="{Binding Source={StaticResource PlacesData}}"/> </StackPanel>

2.1單條件觸發     以上的DataTrigger就是一個單條件觸發器。 2.2多條件觸發     以上的MultiDataTrigger就是一個多條件觸發器。

三：事件觸發器     屬性觸發器用來檢查從屬屬性的值，數據觸發器用來檢查CLR屬性的值，而事件觸發器用來監視事件。當一個事件發生的時候，事件觸發器就會通過引發相關的動畫事件來響應。     如代碼片段4:

    <Style TargetType="ListBoxItem"> <Setter Property="Opacity" Value="0.5" /> <Setter Property="MaxHeight" Value="75" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Trigger.Setters> <Setter Property="Opacity" Value="1.0" /> </Trigger.Setters> </Trigger> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="MaxHeight" To="90" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Mouse.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="MaxHeight" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style>

 

 

 

標簽: C#, WPF