WPF觸發器變化相應控件外觀

作者：佚名 2009-12-23 17:49:28

WPF觸發器的應用可以幫助我們實現控件外觀變化的操作。在這篇文章中我們會以一個范例來詳細介紹相關操作方法，方便大家理解。

WPF開發工具的主要用途就是實現圖形界面的顯示功能。在學習的過程中我們有許多需要深入研究的內容。比如，除了定義控件的默認外觀外，也許我們想還定義當外界刺激我們的控件時，控件外觀做出相應的變化，這是我們需要觸發器。參考以下代碼： #t#

< Button Content="test btn"
Grid.Column="1" Grid.ColumnSpan="1"
Grid.Row="1" Grid.RowSpan="1" >
< Button.Template>
< ControlTemplate>
< !--定義視覺樹-->
< Grid>
< Ellipse Name="faceEllipse" Width="
{TemplateBinding Button.Width}" Height="
{TemplateBinding Control.Height}"
Fill="{TemplateBinding Button.Background}"/>
< TextBlock Name="txtBlock" Margin="
{TemplateBinding Button.Padding}"
VerticalAlignment="Center" Horizontal
Alignment="Center" Text="{Template
Binding Button.Content}" />
< /Grid>
< !--定義視覺樹_end-->
< !--定義觸發器-->
< ControlTemplate.Triggers>
< Trigger Property="Button.
IsMouseOver" Value="True">
< Setter Property="Button.
Foreground" Value="Red" />
< /Trigger>
< /ControlTemplate.Triggers>
< !--定義觸發器_End-->
< /ControlTemplate>
< /Button.Template>
< /Button>

在上面的WPF觸發器代碼中注意到< ControlTemplate.Triggers>... < /ControlTemplate.Triggers>之間的部分，我們定義了觸發器 < Trigger Property="Button.IsMouseOver" Value="True">，其表示當我們Button的IsMouseIOver屬性變成True時，將使用設置器< Setter Property="Button.Foreground" Value="Red" /> 來將Button的Foreground屬性設置為Red。這里有一個隱含的意思是：當Button的IsMouseIOver屬性變成False時，設置器中設置的屬性將回復原值。

你可以粘貼以下代碼到XamlPad查看效果：

< Window xmlns="http://schemas.
microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml" Title="ControlTemplateTest" 
Height="300" Width="300" >   
< Grid ShowGridLines="True">   
< Grid.ColumnDefinitions>   
< ColumnDefinition Width="0.2*"/>   
< ColumnDefinition Width="0.6*"/>   
< ColumnDefinition Width="0.2*"/> 
< /Grid.ColumnDefinitions>   
< Grid.RowDefinitions>   
< RowDefinition Height="0.3*"/>   
< RowDefinition Height="0.3*"/> 
< RowDefinition Height="0.4*"/> 
< /Grid.RowDefinitions>   
< Button Content="test btn" 
Grid.Column="1" Grid.ColumnSpan="1" 
Grid.Row="1" Grid.RowSpan="1" >   
< Button.Template>   
< ControlTemplate>   
< !--定義視覺樹-->   
< Grid> < Ellipse Name="faceEllipse" Width="
{TemplateBinding Button.Width}" Height="
{TemplateBinding Control.Height}" 
Fill="{TemplateBinding Button.Background}"/>   
< TextBlock Name="txtBlock" Margin=
"{TemplateBinding Button.Padding}"
 VerticalAlignment="Center" 
HorizontalAlignment="Center" 
Text="{TemplateBinding Button.Content}" />   
< /Grid>   
< !--定義視覺樹_end-->   
< !--定義觸發器--> < ControlTemplate.Triggers>   
< Trigger Property="Button.IsMouseOver" 
Value="True">   
< Setter Property="Button.Foreground" 
Value="Red" />   
< /Trigger> < /ControlTemplate.Triggers>   
< !--定義觸發器_End--> < /ControlTemplate>   
< /Button.Template>   
< /Button>   
< /Grid>   
< /Window>

以上就是對WPF觸發器的相關應用方法介紹。

責任編輯：曹凱來源： IT168

WPF觸發器