Animate 'Style' property of Control using ObjectAnimationUsingKeyFrames in WPF

1.6k views Asked by At

I am trying to animate 'Style' property using ObjectAnimationUsingKeyFrames. When I run the sample below, I just see empty window and there are no any exceptions.

Almost the same sample works in Silverlight. In WPF it works too, if I assign 'Style' property of the control directly. Does anyone know if it is possible to animate 'Style' property in WPF?

Many thanks.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:this="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525"
    >
<Window.Resources>
    <ResourceDictionary>

        <Style x:Key="TestStyle" TargetType="Control">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Canvas x:Name="Rectangle">
                            <Rectangle Width="200" Height="150" Fill="Red"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Window.Resources>
<Canvas>
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Target" Storyboard.TargetProperty="Style" >
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource ResourceKey=TestStyle}" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>

    <Canvas.Children>
        <ContentControl x:Name="Target"/>
    </Canvas.Children>
</Canvas>

1

There are 1 answers

1
Josh G On

When ObjectAnimationUsingKeyFrames tries to animate to a value that is derived from DependencyObject, it attempts to freeze the object first. If the object can't be frozen, it throws an exception and the animation does not run.

If you are animating a value of a custom type that you wrote, it appears you need to either derive from Freezable or NOT derive from DependencyObject.

For properties that already exist that derive from DependencyObject and not Freezable, you can't animate them (StyleProperty or TemplateProperty are cases in point). Try using a property setter inside of a style:

<Style.Triggers>
  <Trigger Property="IsEnabled" Value="True">
    <Setter Property="Template" Value="{StaticResource TestTemplate}"/>
  </Trigger>
</Style.Triggers>

Build all of the transition logic into the style instead of switching between different styles. A challenge that you may have with this is that the target property has to be a dependency property so you can't use IsLoaded.

I hope you find this useful.

One final thought: It is possible to define custom animations, although I have not done this myself. There's an outside chance that you could write your own custom "ObjectAnimation" that would not be restricted to Freezable or non-DependencyObject classes.