WPF之觸發器

時間 2020-05-11

標籤 wpf 觸發器简体版

原文原文鏈接

1. Trigger

觸發器，應用屬性值或有條件地執行操做；
1）觸發源：控件；
2）觸發條件：某屬性爲某個值，或執行某個事件時；
3）執行操做：更改某個屬性值或執行某個事件；
4）舉例：當窗口加載時（執行某個事件時），以動畫的形式將窗口的大小倍數從 0 到 1 展現（執行某個事件）。動畫

2. Trigger 的分類

1）根據觸發器的觸發條件，在 WPF 中，觸發器的形態能夠是：Trigger、DataTrigger、EventTrigger；
2）以及由 Trigger 延伸的 MultiTrigger 和由 DataTrigger 延伸的 MultiDataTrigger；spa

2.1 Trigger

Trigger 主要用於監測依賴項屬性的變化，而後使用設置器改變樣式code

// 例子1：
<Button Foreground="Red" Width="350" Content="效果">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Height" Value="200"/>
            <Style.Triggers>
                <!--觸發條件：當焦點屬性的值爲 True 時-->
                <Trigger Property="IsFocused" Value="True">
                    <!--使用設置器更改樣式-->
                    <Setter Property="Height" Value="300"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

// 例子2：
<Button  Foreground="Red" Width="350" Content="效果">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="Blue"></Setter>
                    <Trigger.EnterActions>
                        <!--啓動動畫並將動畫分發給目標對象和屬性-->
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" 
                                    To="500" Duration="0:0:4"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>                            
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

2.2 DataTrigger

跟 Trigger相似，只是它能夠綁定到任意數據的變化對象

<Button  Foreground="Red" Width="350" Content="效果">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <!--觸發條件：當 name 值爲 bt 的控件的焦點屬性值爲 True 時-->
                <DataTrigger Binding="{Binding IsFocused, ElementName=bt}" Value="True">
                    <Setter Property="Background" Value="Blue"></Setter>
                    <DataTrigger.EnterActions>
                        <!--一樣的，啓動動畫並將動畫分發給目標對象和屬性-->
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" 
                                    From="100" To="500" Duration="0:0:4"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>                            
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

2.3 EventTrigger

表示應用設置事件以響應操做的觸發器，窗口加載時執行動畫就是用 EventTrigger 實現的；blog

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <!--事件觸發器：當 window 加載時，觸發-->
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>
                        <!--一樣的，啓動動畫並將動畫分發給目標對象和屬性-->
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

2.4 MultiTrigger

Trigger 相似。聯合了多個條件，只有知足了全部這些條件，纔會啓動觸發器。事件

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <MultiTrigger>
                    <!--當 Content、IsMouseOver 這兩個屬性爲設置的值時，纔會觸發該觸發器-->
                    <MultiTrigger.Conditions>
                        <Condition Property="Content" Value="效果"></Condition>
                        <Condition Property="IsMouseOver" Value="True"></Condition>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Red"></Setter>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            <Style.Triggers>
        <Style TargetType="{x:Type Button}">
    <Button.Style>
<Button>

MultiDataTrigger 能夠參考 DataTrigger 和 MultiTrigger 便可。get

..it

2.5 補充

1）Style.Triggers 跟 Control.Triggers 的區別：

像上面，能夠往 Style.Trigger 裏添加 Trigger、DataTrigger、EventTrigger，
但只能往控件裏面的 Triggers 添加 EventTrigger：io

<Button>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

2）觸發器設置樣式無效，可能緣由：

在控件標籤中，已對控件設置過該屬性的值。
具體解釋：class

style 是應用樣式給控件，它的優先級低於直接對控件操做的設置，例如：

<Button Width="350" Content="效果">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <!--Button 自己已經對 Width 設置過值，這裏的觸發器不會生效-->
                    <Setter Property="Width" Value="100"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>