WPF 雜談——Trigger觸發器

筆者在使用的WPF過程中，見過的觸發器有三種：Trigger、DataTrigger、EventTrigger。其中最為常用的要屬Trigger。至於觸發器的作用就是當某個屬性的值發生變化，應該去做某事。當然這是筆者自身的理解。比較簡單。那么這三者之間有什么不同呢？這便是這章要討論的目地。WPF的Style筆者喜歡把他看作CSS的樣式。那么Trigger觸發器你們可以理解為CSS樣式中類似於:hover 偽類。這樣子筆者做一個列子吧。如下，當鼠標移動在文本上面的，前景色變成為紅色。

<Grid>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
</Grid>

執行結果

鼠標移在上面

相信從上面的例子你至少可以明白觸發器的作用。而且作用還不小呢？好了。這一點筆者就不需要在重復的去講解了。那么DataTrigger又跟Trigger有什么區別呢？可以說作用上來講沒有什么區別，但是在面向對象卻是不一樣子的。Trigger都是專對於控件自身的依賴屬性(dependency properties)。DataTrigger是一般專對於另的控件的屬性，而且都是用綁定來實現的。如下面的例子。

    <Grid>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>

那么例子的效果跟上一例子一樣子。代碼上面也沒有多大的差別。主要是修改了觸發器的寫法而以。但是我們要認識到一點：Trigger一般都是跟屬性直接關聯。而DataTrigger是通過綁定來關聯。所以DataTrigger一般用於寫另一個控件上的屬性在當前控件的觸發效果。當然也可以綁定自身，如上。那么在舉一個綁定另一個控件的屬性吧。如下

<StackPanel Orientation="Vertical">
        <ToggleButton Name="Changer" Content="變紅" Width="75" Height="30"></ToggleButton>
        <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName= Changer}" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>

執行結果：

最后一個Eventtrigger一般用於動畫效果的處理。上面倆個觸發器作用對象都是屬性。而這個卻是作用於事件的。表示當前某個事件發生后要觸發。筆者自己寫例子太麻煩了。就到國外復制一個例子過來說明。如下

    <StackPanel Orientation="Vertical">
        <TextBlock Text="I am Aomi" HorizontalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>

例子的功能很簡單就是當鼠標進入到文字區域的時候文字變大到28字體。如果離開就變成18字體。

執行效果：

上面的觸發器應該來講算是比較簡單而又常用。可是都是單個觸發條件。我們在編寫業務代碼的時候，往往可以存在多個條件下的觸發效果。所以上面的Trigger和DataTrigger就不能滿足需求了。為了這種情況，WPF為Trigger提供了MultiTrigger，為DataTrigger提供了MultiDataTrigger。除了語法上有一定的區別以外，效果是一樣子的。如下

 <TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="#4d4d4d" />
                        </MultiTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

從上面我們可以看到Condition就是多條件。用法用單條件是一樣子的。

執行效果：

最后讓我們看一下MultiDataTrigger的用法吧。如下

<TextBlock Text="I am Aomi" Width="75" Height="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsChecked,ElementName=Changer  }" Value="True" />
                                <Condition Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Self} }" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Foreground" Value="Red" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

執行效果：