WPF Trigger

Trigger分類

Trigger
MultiTrigger
DataTrigger
MultiDataTrigger
EventTrigger

Trigger

<Grid>
	<Grid.Resources>
		<Style x:Key="ButtonStyle" TargetType="Button">
			<Setter Property="Foreground" Value="DarkOrange"></Setter>
			<Style.Triggers>
				<Trigger Property="IsMouseOver" Value="True">
					<Setter Property="Foreground" Value="DarkRed"></Setter>
				</Trigger>
			</Style.Triggers>
		</Style>
	</Grid.Resources>
	<Button Content="鼠標滑過時，修改字體顏色" Style="{StaticResource ButtonStyle}"></Button>
</Grid>

EventTrigger

指定觸發的事件，觸發事件之后執行的內容，這里寫了兩個動畫效果

<CheckBox Content="隨着鼠標划入划出，長度改變" HorizontalAlignment="Left" Width="70">
	<CheckBox.Resources>
		<Style TargetType="{x:Type CheckBox}">
			<Setter Property="Foreground" Value="OrangeRed"></Setter>
			<Style.Triggers>
				<!--當鼠標划入，增加長度-->
				<EventTrigger RoutedEvent="MouseEnter">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<!--這里設置了一個動畫，持續時間是0.2秒，改變屬性為Width，目標數值是200-->
								<DoubleAnimation Duration="0:0:0.2" 
												 Storyboard.TargetProperty="Width" 
												 To="200"></DoubleAnimation>
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
				<!--當鼠標划出，減小長度-->
				<EventTrigger RoutedEvent="MouseLeave">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Duration="0:0:0.2" 
												 Storyboard.TargetProperty="Width" 
												 To="70"></DoubleAnimation>
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
			</Style.Triggers>
		</Style>
	</CheckBox.Resources>
</CheckBox>

效果

DataTrigger

根據值，設置對應的效果
這里設置的是行頭和單元格的效果，也可以設置為其他屬性

<Window.Resources>
	<!--單元格的樣式-->
	<Style TargetType="DataGridCell" x:Key="ColorCell">
		<Style.Triggers>
			<DataTrigger Binding="{Binding Type}" Value="0">
				<Setter Property="Background" Value="Pink"></Setter>
			</DataTrigger>
			<DataTrigger Binding="{Binding Type}" Value="1">
				<Setter Property="Background" Value="Coral"></Setter>
			</DataTrigger>
			<DataTrigger Binding="{Binding Type}" Value="2">
				<Setter Property="Background" Value="Crimson"></Setter>
			</DataTrigger>
		</Style.Triggers>
	</Style>
</Window.Resources>
<Grid>
	<DataGrid ItemsSource="{Binding }" AutoGenerateColumns="False">
		<!--行頭的樣式-->
		<DataGrid.RowHeaderStyle>
			<Style TargetType="DataGridRowHeader">
				<Style.Triggers>
					<DataTrigger Binding="{Binding Type}" Value="0">
						<Setter Property="Background" Value="Pink"></Setter>
					</DataTrigger>
					<DataTrigger Binding="{Binding Type}" Value="1">
						<Setter Property="Background" Value="Coral"></Setter>
					</DataTrigger>
					<DataTrigger Binding="{Binding Type}" Value="2">
						<Setter Property="Background" Value="Crimson"></Setter>
					</DataTrigger>
				</Style.Triggers>
			</Style>
		</DataGrid.RowHeaderStyle>
		<DataGrid.Columns>
			<DataGridTextColumn Header="Type值" Width="*" Binding="{Binding TypeValue}"/>
			<DataGridTextColumn Header="Type效果" Width="*" Binding="{Binding Type}" CellStyle="{StaticResource ColorCell}"/>
		</DataGrid.Columns>
	</DataGrid>
</Grid>

效果

MultiTrigger

MultiTrigger是在滿足一組條件時應用屬性值或執行操作的觸發器
在MultiTrigger.Conditions中填寫多個觸發條件，觸發條件同時滿足時，執行MultiTrigger.Setters中的內容

<Style TargetType="CheckBox" >
	<Style.Triggers>
		<MultiTrigger >
			<MultiTrigger.Conditions>
				<Condition Property="IsChecked"
						   Value="true" />
				<Condition Property="Content" 
						   Value="飛鳥相與還。"/>
			</MultiTrigger.Conditions>

			<MultiTrigger.Setters>
				<Setter Property="FontSize" Value="20" />
				<Setter Property="Foreground" Value="Blue" />
			</MultiTrigger.Setters>
		</MultiTrigger>
	</Style.Triggers>
</Style>

<StackPanel Grid.Row="1">
	<CheckBox Content="山氣日夕佳，"/>
	<CheckBox Content="飛鳥相與還。"/>
	<CheckBox Content="此中有真意，"/>
	<CheckBox Content="欲辨已忘言。"/>
</StackPanel>

效果

參考資料

MultiTrigger 類

示例代碼

Trigger