none
datatrigger中的storyboard不生效 RRS feed

  • 问题

  • 我设计了一个Button,当他的availible=“0”的时候显示灰色,“1”时候显示为蓝色,“2”的时候是一个变色的动画。现在发现,0和1绑定的没有问题,2貌似没有绑定成功,显示的是默认的button。我用blend4加了个datatrigger(即代码中间注释掉的部分),使用发现0和1的时候都为蓝色,2的动画是可用的,请问问题出在哪里?

    		<Button x:Name="button" FontSize="21.333" FontWeight="Bold" SizeChanged="Button_SizeChanged" Click="button_Click">
                <Button.Resources>
                    <Style TargetType="{x:Type Button}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Availible}" Value="1">
                                <Setter Property="IsEnabled" Value="True"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Availible}" Value="0">
                                <Setter Property="IsEnabled" Value="False"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Availible}" Value="2">
                                <Setter Property="IsEnabled" Value="True"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Resources>
    			<Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=button}" Height="{Binding ActualHeight, ElementName=button}">
                    <Grid.Resources>
                    	<Style TargetType="{x:Type Grid}">
                    		<Style.Triggers>
                    			<DataTrigger Binding="{Binding Availible}" Value="1">
                    				<Setter Property="Background" Value="#FF7ADBE7"/>
                    			</DataTrigger>
                    			<DataTrigger Binding="{Binding Availible}" Value="0">
                    				<Setter Property="Background" Value="#FFCEC6C6"/>
                    			</DataTrigger>
                    			<DataTrigger Binding="{Binding Availible}" Value="2">
                    				<DataTrigger.EnterActions>
                    					<BeginStoryboard x:Name="backgroundChangeStoryboard">
                    						<Storyboard >
                    							<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                    								Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" 
                    								RepeatBehavior="Forever">
                    								<SplineColorKeyFrame KeyTime="0" Value="#FFB2EBD0"/>
                    								<SplineColorKeyFrame KeyTime="0:0:0.5" Value="#FFCBB2EB"/>
                    								<SplineColorKeyFrame KeyTime="0:0:1" Value="#FFB2EBD0"/>
                    							</ColorAnimationUsingKeyFrames>
                    						</Storyboard>
                    					</BeginStoryboard>   	
                    				</DataTrigger.EnterActions>
                    				<DataTrigger.ExitActions>
                    					<StopStoryboard BeginStoryboardName="backgroundChangeStoryboard"/>
                    				</DataTrigger.ExitActions>
                    			</DataTrigger>
                    		</Style.Triggers>
                    	</Style>
                    </Grid.Resources>
    				<!--i:Interaction.Triggers>
    					<ic:DataTrigger Binding="{Binding Availible}" Value="2">
    						<ic:ChangePropertyAction PropertyName="Background">
    							<ic:ChangePropertyAction.Value>
    								<SolidColorBrush Color="#FF6B9AF7"/>
    							</ic:ChangePropertyAction.Value>
    						</ic:ChangePropertyAction>
    					</ic:DataTrigger>
    				</i:Interaction.Triggers-->
                        <Grid.ColumnDefinitions>
                        	<ColumnDefinition Width="*"/>
                        	<ColumnDefinition Width="*"/>
                        	<ColumnDefinition Width="*"/>
    				</Grid.ColumnDefinitions>
    				<TextBlock Text="{Binding Result}" Grid.ColumnSpan="3"  FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <TextBlock Grid.Column="2" x:Name="textBlock" Text="X" FontSize="{Binding ActualHeight, ElementName=button}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFEF0A0A" Panel.ZIndex="1">
                        <TextBlock.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Result}" Value="1">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="0">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="2">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Resources>
                    </TextBlock>
                    <TextBlock Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="!" FontSize="{Binding ActualHeight, ElementName=button}" Foreground="#FFE5EF2B">
                        <TextBlock.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                             <Style.Triggers>
                                    <DataTrigger Binding="{Binding Result}" Value="0">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="1">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="2">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Resources>
                    </TextBlock>
                    <TextBlock Grid.Column="2" Text="〇" FontSize="{Binding ActualHeight, ElementName=grid}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FF27D20F" >
                        <TextBlock.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Result}" Value="0">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="1">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Result}" Value="2">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Resources>
                    </TextBlock>
                </Grid>
    		</Button>   

    2014年4月24日 16:20

答案

  • 问题已经解决,需要在storyboard之前添加一个属性对应<Setter Property="Background" Value="#FFCBB2EB"/>就可以了,不过,我不知道原因,有大牛解答下就好了

    Storyboard只是用来个某个属性设置动画,其作用的前提是这个属性必须存在。

    而在你的grid(Grid x:Name="grid")中,并没有给Background设置任何值,既Background为null,这就意味着当storyboard想去改变(Grid.Background).(SolidColorBrush.Color)时会找不到有效的对象和属性。这样就不能正确应用动画了,你在storyboard之前设置了<Setter Property="Background" Value="#FFCBB2EB"/>,这样storyboard就能找到有效的对象和属性从而正确应用动画。

    当然,你也可以直接给grid设置Background,比如:

    <Grid x:Name="grid" Background="#FFCEC6C6" Width="{Binding ActualWidth, ElementName=button}" Height="{Binding ActualHeight, ElementName=button}" >
    这样就不需要在storyboard之前设置了<Setter Property="Background" Value="#FFCBB2EB"/>也能让动画有效。


    2014年4月25日 2:28

全部回复

  • 问题已经解决,需要在storyboard之前添加一个属性对应<Setter Property="Background" Value="#FFCBB2EB"/>就可以了,不过,我不知道原因,有大牛解答下就好了

    2014年4月24日 16:44
  • 问题已经解决,需要在storyboard之前添加一个属性对应<Setter Property="Background" Value="#FFCBB2EB"/>就可以了,不过,我不知道原因,有大牛解答下就好了

    Storyboard只是用来个某个属性设置动画,其作用的前提是这个属性必须存在。

    而在你的grid(Grid x:Name="grid")中,并没有给Background设置任何值,既Background为null,这就意味着当storyboard想去改变(Grid.Background).(SolidColorBrush.Color)时会找不到有效的对象和属性。这样就不能正确应用动画了,你在storyboard之前设置了<Setter Property="Background" Value="#FFCBB2EB"/>,这样storyboard就能找到有效的对象和属性从而正确应用动画。

    当然,你也可以直接给grid设置Background,比如:

    <Grid x:Name="grid" Background="#FFCEC6C6" Width="{Binding ActualWidth, ElementName=button}" Height="{Binding ActualHeight, ElementName=button}" >
    这样就不需要在storyboard之前设置了<Setter Property="Background" Value="#FFCBB2EB"/>也能让动画有效。


    2014年4月25日 2:28
  • 多谢回复

    2014年4月25日 3:49