码迷,mamicode.com
首页 > 其他好文 > 详细

触发器系列(2) DataTrigger

时间:2014-06-04 18:46:26      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   a   

触发条件:

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

bubuko.com,布布扣



触发器系列(2) DataTrigger,布布扣,bubuko.com

触发器系列(2) DataTrigger

标签:c   style   class   blog   code   a   

原文地址:http://www.cnblogs.com/blfshiye/p/3759724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!