Trouble binding storyboard values to viewmodel

Question

I'm having trouble getting a storyboard value to bind to my viewmodel. I've tried many varieties of binding xaml, with no luck. The high level goal is to be able for the ViewModel to change the start and end of an animation's trajectory - seems like a common requirement, but haven't been able to find any examples of it. Many people say "In MVVM you should never try to access the storyboard from the ViewModel" which seems like horeshit if you need to change the start and end points of the animation on the fly. In any case, I've shown my first, naive example here:

<UserControl 
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:FishTank" x:Class="FishTank.FishTankControlView" 
         mc:Ignorable="d" 
         d:DesignHeight="100" d:DesignWidth="100" >
<UserControl.Resources>
    <Storyboard x:Key="Storyboard1">
        <DoubleAnimationUsingKeyFrames x:Name="xTransform" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image">
            <SplineDoubleKeyFrame KeyTime="0" Value="-155"/>
            <SplineDoubleKeyFrame KeyTime="0:0:4.5" Value="521"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames x:Name="yTransform" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image">
            <SplineDoubleKeyFrame KeyTime="0" Value="{Binding YPos1}"/>
            <SplineDoubleKeyFrame KeyTime="0:0:4.5" Value="{Binding YPos2}"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<UserControl.DataContext>
    <local:FishTankControlViewModel/>
</UserControl.DataContext>

<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{DynamicResource Storyboard1}"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid Background="Transparent">
    <Image x:Name="image" Width="100" Height="100" Source="pack://siteoforigin:,,,/Resources/Fish orange_right.png" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</Grid>

I want to have Ypos1 and Ypos2 bound to the start and end points of the Y transformation. I've tried various variations using RelativeSource and FindAncestor, but it's all pretty much over my head. I would like a solution that allows me to stick with the 3.5 framework if possible.

I tried changing the "StaticResource Storyboard1" to "DynamicResource Storyboard1" with no luck.

Note - As a sanity check, I confirmed I am able to bind normal controls like buttons and textblocks to these two properties, Ypos1 and Ypos2, so I'm pretty sure the basic plumbing is working...

Thanks much, Randy

H.B. H.B. · Accepted Answer · 2013-05-24T01:33:53

You can't bind those because they need to be freezable, pretty sure the framework told you so as well.

If anything you can completely recreate or modify the animation with new values, using a ValueConverter or a subclass that encapsulates the animation being modified.

Trouble binding storyboard values to viewmodel

1 Answers