Trigger,觸發器,當某些條件滿足時會觸發一個行爲,比如:值的變化,動畫的發生等。
觸發器比較像事件,但事件一般是由用戶操作觸發的
觸發器一般具有:
Trigger / DataTrigger | 數據變化觸發型 |
---|---|
MultiTrigger / MultiDataTrigger | 多條件觸發型 |
EventTrigger | 事件觸發型 |
其中有 Data的,都是基於數據的,沒有的則對於控件而言 . . .
文章目錄
基本 Trigger
Trigger 有 Property 和 Value兩個屬性,Property 是關注的屬性名稱,Value 是觸發條件。
Setters 用來設置觸發條件滿足時做出的反應 . . .
當 CheckBox的IsChecked屬性爲 true時,前景色和字體會改變,代碼如下:
<Window.Resources>
<Style TargetType="CheckBox">
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Foreground" Value="Orange"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<CheckBox Content="悄悄的我走了" Margin="5"/>
<CheckBox Content="正如我悄悄的來" Margin="5,0"/>
<CheckBox Content="我揮一揮衣袖" Margin="5"/>
<CheckBox Content="不帶走一片雲彩" Margin="5,0"/>
</StackPanel>
效果圖如下:
MultiTrigger
多個條件同時成立時纔會被觸發,有一個 Conditions屬性,條件放在其中 . . .
當 CheckBox被選中,且 Content爲 “正如我悄悄的來” 時纔會觸發,代碼如下:
<Window.Resources>
<Style TargetType="CheckBox">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="true"/>
<Condition Property="Content" Value="正如我悄悄的來"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Foreground" Value="Orange"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
效果圖如下:
由數據觸發的 DataTrigger
程序中經常會遇到基於數據執行某些判斷情況,我們可以使用 DataTrigger . . .
當 TextBox的 Text長度小於7 個字符時其 Border會保持紅色,代碼如下:
<Window.Resources>
<local:L2BConverter x:Key="cvtr"/>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static
RelativeSource.Self},Path=Text.Length,
Converter={StaticResource cvtr}}" Value="false">
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Margin="5"/>
<TextBox Margin="5,0"/>
<TextBox Margin="5"/>
</StackPanel>
其中我們將自身當作數據源,關注的是 text的 Length,我們需要通過這個 Length來進行判斷,這裏我們需要 Converter,Converter如下:
public class L2BConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
CultureInfo culture)
{
int textLength = (int)value;
return textLength > 6 ? true : false;
}
public object ConvertBack(object value, Type targetType, object parameter,
CultureInfo culture)
{
throw new NotImplementedException();
}
}
效果動態圖如下:
多數據條件觸發的 MultiDataTrigger
有的時候我們需要多種數據同時滿足來顯示一種效果
<Window.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" Width="60"/>
<TextBlock Text="{Binding Name}" Width="120"/>
<TextBlock Text="{Binding Age}" Width="60"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=ID}" Value="2"/>
<Condition Binding="{Binding Path=Name}" Value="Tom"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="Orange"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<ListBox x:Name="listBoxStudent" Margin="5"/>
</StackPanel>
在後臺插入數據:
List<Student> list = new List<Student>()
{
new Student(){ID = 1,Name="huameng",Age = 1},
new Student(){ID = 2,Name="huameng",Age = 1},
new Student(){ID = 2,Name="Tom",Age = 1},
new Student(){ID = 1,Name="huameng",Age = 1},
new Student(){ID = 1,Name="huameng",Age = 1},
};
this.listBoxStudent.ItemsSource = list;
Student 類這裏就不定義了 . . .
這裏的觸發器使用過程和上面的差不多
首先,這裏我們先設置模板風格,然後設置觸發器 . . .
效果如下:
由事件觸發的 EventTrigger
EventTrigger 是一個比較特殊的一個,它不是由屬性值或數據的變化來觸發,而是由事件來觸發,觸發後並非是應用一組 Setter,而是執行一段動畫。所以 UI層的動畫效果經常與 EventTrigger相關聯 . . .
創建一個 Button的 Style,其中包含兩個 EventTrigger,一個由 MouseEnter 事件觸發,另一個由 MouseLeave 事件觸發,代碼如下 :
<Window.Resources>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="150" Duration="0:0:0.2"
Storyboard.TargetProperty="Width"/>
<DoubleAnimation To="150" Duration="0:0:0.2"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Width"/>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Height"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Canvas>
<Button Width="40" Height="40" Content="OK"/>
</Canvas>
這裏面涉及到了動畫的知識,敬請期待動畫相關文章. . .
效果動態圖: