1. 程式人生 > >Zara帶你快速入門WPF(3)---觸發器篇

Zara帶你快速入門WPF(3)---觸發器篇

pac 屬性設置 items ger target ack esp 重復數 mpat

一.前言

使用觸發器,可以動態的改變控件的外觀,因為一些事件或屬性改變了,把鼠標移動到按鈕上,按鈕就會改變其外觀。通常這些必須寫在C#代碼中,使用WPF也可以使用XAMl實現,而這只會影響UI。

屬性觸發器在屬性值改變時觸發。多觸發器多個屬性,事件觸發器在事件發生時激活,觸發器在綁定數據的數據改變時觸發。

二.屬性觸發器

Style類有一個Triggers屬性,通過它可以指定屬性觸發器,下面的示例中有一個grid面板,利用window資源定義button元素的默認樣式,這個樣式指定,將Background屬性設置為lightblue,將fontsize設置為17,這是應用程序啟動時的樣式,使用觸發器可以改變控件的樣式,觸發器在Style.Triggers元素中用Trigger元素定義,將觸發器賦予IsMouseOver屬性,另一個觸發器賦予IsPressed屬性,如果觸發這些屬性,就會改變button的屬性所對應的觸發器屬性。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="FontSize" Value="17"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="FontSize" Value="22"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Foreground" Value="Yellow"/>
                    <Setter Property="FontSize" Value="22"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Width="200" Height="30" Content="click me!!"></Button>
    </Grid>
</Window>

其中需要註意的是,如果把IsPressed屬性設置為true,則需要把IsMouseOver屬性也設置為true;按下該按鈕也需要吧鼠標放到按鈕上,按下按鈕會激活IsMouseOver屬性觸發器,並改變屬性,這裏觸發器的激活順序很重要,如果這兩個觸發器的順序不同則會出現以下兩種效果,請視圖!如下。

技術分享圖片 技術分享圖片

當激活觸發器的原因不再有效時,就不必要將屬性重置為原始值了,例如,不必定義IsMuseOver=true和IsMouseOver=false的觸發器,只要原因不在有效,就不會走了!

trigger類的屬性,以指定觸發器的操作.如下表:

Property Value 使用屬性觸發器,Property和Value屬性用於指定觸發器的激活時間,列如Property=“isMouseOver” Value="True"
Setters  一旦激活觸發器,就可以使用Setters定義一個Setter元素集合,來改變屬性值,其中定義了Property,targetname,value 來該對象屬性。
EnterActions,ExitActions 除了Setters之外,還可以定義EnterActions,ExitActions,這兩個屬性可以定義TriggerAction元素集合,使用這些可以操作派生自基類TriggerAction,如SoundPlayerAction和BeginStoryboard,使用SoundPlayerAction可以播放音樂。BeginStoryBoard用於動畫

三.多觸發器

當屬性的值改變時,就會激活屬性觸發器,如果因為兩個或多個屬性有特定的值,而需要設置觸發器,就可以使用MultiTrigger.

MultiTrigger有一個Conditions屬性,可以在其中設置屬性的有效值,它還有一個Setters屬性,可以在其中指定需要設置的屬性,在下面的示例中,給TextBox定義了樣式,如果IsEnabled屬性是True,那麽Text屬性的值是Test,就應用觸發器。如果應用這兩個觸發器就把TextBox和Foreground屬性改變為Red.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True"></Condition>
                        <Condition Property="Content" Value="你好"></Condition>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Red"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Margin="0,0,205,116" Content="你好"></Button>
    </Grid>
</Window>

這代表了這個按鈕只有在滿足Codition這兩個條件的時候才走Setters

三.數據觸發器

如果綁定到控件上的數據滿足指定的條件,就激活數據觸發器,下面的示例中使用Book類,它根據圖書的出版社顯示不同的內容。

Book.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp1
{
    public class Book
    {
        public string Title { get; set; }
        public string Publisher { get; set; }
        public override string ToString() => Title;
    }
}

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Title}" Value="共贏">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Title}" Value="努力">
                    <Setter Property="Background" Value="Yellow"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Title}" Value="學習">
                    <Setter Property="Background" Value="DarkGray"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListBox x:Name="list"/>
    </Grid>
</Window>

後臺代碼中初始化幾個Book對象,通過Binding中的定義就會給它進行格式化!

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "學習"
            });
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "勤奮"
            });
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "共贏"
            });

            //重復數據
            #region
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "學習"
            });
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "勤奮"
            });
            list.Items.Add(new Book
            {
                Publisher = "Zara帶你去學習WPF",
                Title = "共贏"
            });
            #endregion

        }
    }
}

技術分享圖片

今天我們就講到這裏,下一篇我們會深入觸發器!

Zara帶你快速入門WPF(3)---觸發器篇