WPF自訂元件 Level 2: Trigger

上一章自訂元件 Level 1: Style in resource講了如何使用Style與ResourceDictionary重複使用樣式，因為這一章會省略前面講過的內容，所以如果還不會的同學請先去看一下喔～

這一章要講如何使用Trigger讓元件動起來，像是滑鼠滑過去文字變紫色之類的效果。

Trigger

<Style TargetType="TextBlock">
	<Style.Triggers>
		<Trigger Property="IsMouseOver" Value="True">
			<Setter Property="Foreground" Value="Purple" />
		</Trigger>
	</Style.Triggers>
</Style>

意思大概這這樣，如果滑鼠滑過去的時候，將Foreground(文字顏色)改為紫色

DataTrigger

如果要讓某TextBox在輸入某些值的時候，會自動改變樣式怎處理？
例如：輸入Pink時文字變成粉紅色

<Window>
	<Window.Resources>
	<Style TargetType="TextBox">
		<Style.Triggers>
			<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource Self}}" Value="Pink">
				<Setter Property="Foreground" Value="Pink" />
				<Setter Property="FontSize" Value="20" />
			</DataTrigger>
		</Style.Triggers>
	</Style>
	</Window.Resources>
	<TextBox />
</Window>

可以做的變化很多，這裡只是簡單舉例，用TextBox的字串去設定TextBox的文字顏色，按照需求也可以用TextBox設定Image.Source，或者RadionButton設定Image

MultiTrigger

設定多個觸發條件，當條件全部(&&)都符合時才會觸發
例如：Focus在TextBox且滑鼠滑過觸發文字顏色改為綠色等動作

 <Style TargetType="TextBox">
	<Style.Triggers>		
		<MultiTrigger>
			<MultiTrigger.Conditions>
				<Condition Property="IsFocused" Value="True" />
				<Condition Property="IsMouseOver" Value="True" />
			</MultiTrigger.Conditions>
			<Setter Property="Foreground" Value="Green" />
		</MultiTrigger>
	</Style.Triggers>
</Style>

MultiDataTrigger

設定多個Data觸發條件，當條件全部(&&)都符合時才會觸發

<Style TargetType="TextBox">
	<Style.Triggers>		
		<MultiDataTrigger>
			<MultiDataTrigger.Conditions>
				<Condition Binding="{Binding Path=Text, RelativeSource={RelativeSource Self}}" Value="Red" />
				<Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="3" />
			</MultiDataTrigger.Conditions>
			<Setter Property="Foreground" Value="GreenYellow" />
			<Setter Property="FontSize" Value="20" />
		</MultiDataTrigger>
	</Style.Triggers>
</Style>

總結

本文講了四種觸發器，Trigger, DataTrigger, MultiTrigger, MultiDataTrigger可以依照條件觸發元件做出一定的變更，但是依然有一些細部的東西無法改到，例如在TextBox按下某個按鍵時，TextBox要改文字顏色，下個章結將說明如何使用Interaction設定更底層的東西

下一章：自訂元件 Level 3: Interaction

tags: C# WPF WPF字訂元件