Reputation: 515
I have a combobox, which is bound to an enumeration of animations. We have the requirement such that if an animation style is selected in the combo box, the corresponding animation should be triggered on a textblock. i have 3 animations, namely fade, scale and blink. While blink is working fine, fade and scale doesnt work. it works only for the first time when the screen loads and then thereafter, even if the selection is changed to fade/scale, teh animation is not triggered. As if now, i have triggered the animation using a data trigger, and that is when this issue started coming, but the animation was triggered perfectly when we tried to use an event trigger. My code is as below. Could someone help me as to what is it that I am doing wrong and how it can be rectified.
Animations:
<Storyboard x:Key="Fade">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Scale">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Blink">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames RepeatBehavior="3x" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
The combobox, textblock and data triggers used to trigger the animation:
<telerik:RadComboBox x:Name="animationTypeComboBox"
Foreground="White"
Width="180"
ItemsSource="{Binding Source={StaticResource AnimationTypeEnumValues}}"
SelectedItem="{Binding SelectedAnimationType, Mode=TwoWay, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center" >
</telerik:RadComboBox>
<TextBlock x:Name="testMsg" Text="Test message" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource Subheading}">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Fade}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Fade}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Scale}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Scale}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedAnimationType}" Value="{x:Static ent:AnimationType.Blink}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Blink}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Upvotes: 1
Views: 1609
Reputation: 3496
I made few changes in your code to make it work in my local system.... here is a solution to your problem..
<TextBlock x:Name="testMsg" Text="Test message" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Fade">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Scale"/>
<RemoveStoryboard BeginStoryboardName="Blink"/>
<BeginStoryboard Name="Fade">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Scale">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Fade"/>
<RemoveStoryboard BeginStoryboardName="Blink"/>
<BeginStoryboard Name="Scale">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedItem,ElementName=AnimStyles}" Value="Blink">
<DataTrigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="Fade"/>
<RemoveStoryboard BeginStoryboardName="Scale"/>
<BeginStoryboard Name="Blink">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames RepeatBehavior="3x" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.25" Value="{x:Static Visibility.Collapsed}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
In the above code instead of taking story boards in resources i am taking then in line... and removing the other storyboards before starting the actual storyboard... This means what ever be the behavior effected by the previous Storyboards will be removed and every time animation works as like a new one..
Upvotes: 4