您的位置:首页 > 其它

触发器系列(2) DataTrigger

2014-05-29 17:43 190 查看
触发条件:

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>
效果图例如以下:




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: