Skip to content

Trigger

L edited this page Mar 22, 2020 · 7 revisions

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>

效果

20200322_205256

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>

效果

QQ图片20200322204957

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>

效果

20200322_204159

参考资料

MultiTrigger 类

示例代码

Trigger

Clone this wiki locally