触发器系列(2) DataTrigger
触发条件:
DataTrigger是以控件DataContext的属性作为触发条件
本例效果说明:
<!--当值为1时将外边框的背景色改为黑色-->
<!--当值为2时 改变透明度达到闪动的效果-->
代码例如以下:
<Window.Resources> <Style TargetType="Button" x:Key="newTemplate"> <Setter Property="Background" Value="Green"/> <Setter Property="Foreground" Value="Blue"/> <Setter Property="Content" Value="Content"/> <!-- Button 模板--> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border x:Name="RootElement"> <!--边框背景--> <Border.Background> <SolidColorBrush x:Name="BorderBrush" Color="Red"/> </Border.Background> <!--背景取值Setter里的Background /Margin 改变外边框的大小--> <Grid Background="{TemplateBinding Background}" Margin="6"> <Border x:Name="FocusVisual" Background="{TemplateBinding Foreground}" Opacity="0"> </Border> <TextBlock x:Name="texb" Height="24" Text="{TemplateBinding Content}" ></TextBlock> </Grid> </Border> <!--下面是触发器--> <ControlTemplate.Triggers> <!--当值为1时将外边框的背景色改为黑色--> <DataTrigger Binding="{Binding ElementName=texb, Path=Text}" Value="1"> <Setter TargetName="RootElement" Property="Background" Value="Black"></Setter> </DataTrigger> <!--当值为2时 改变透明度达到闪动的效果--> <DataTrigger Binding="{Binding ElementName=texb, Path=Text}" Value="2"> <DataTrigger.EnterActions> <BeginStoryboard x:Name="playAnimation"> <Storyboard Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" > <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever" To="1" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> <!--停止闪动动画--> <DataTrigger.ExitActions> <StopStoryboard BeginStoryboardName="playAnimation"> </StopStoryboard> </DataTrigger.ExitActions> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <Button x:Name="btn1" Width="100" Height="100" Content="1" ClickMode="Press" Style="{StaticResource newTemplate}" Click="btn1_Click"> </Button> <Button Height="20" Margin="6,35,211,245" RenderTransformOrigin="0.325,-1.2" Click="Button_Click_1">常规高亮显示</Button> <Button Height="20" Margin="162,40,55,240" RenderTransformOrigin="0.325,-1.2" Click="Button_Click_2">高亮闪烁显示</Button> </Grid> </Window>效果图例如以下: