《15天玩轉WPF》—— Style 中的 Trigger

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>

這裏面涉及到了動畫的知識,敬請期待動畫相關文章. . .

效果動態圖:

在這裏插入圖片描述


作者:浪子花夢

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章