XAML: Setting the value of Storyboard animation from code behind

Question

I have a requirement where I need a button to move from one end of the screen to another (horizontally) in a few seconds. I tried this and works to some extent.

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
            <!--<EasingDoubleKeyFrame KeyTime="0:0:6.9" Value="{Binding MainPage.width}">-->
                <EasingDoubleKeyFrame KeyTime="0:0:6.9" Value="-1283.725">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            <!--<EasingDoubleKeyFrame KeyTime="0:0:6.9" Value="{Binding Path=MainPage.height}">-->
            <EasingDoubleKeyFrame KeyTime="0:0:6.9" Value="-467.732">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>

But the problem is due to screen sizes & screen orientation. On a big screen it stops in the middle. I want to set the Value of EasingDoubleKeyFrame dynamically. Code behind or binding or any other way.

But I don't want to write the whole storyboard in Code Behind.

I can get the screen width & height using

Rect bounds = Window.Current.Bounds;
    static double height = 0;
    static double  width = 0;

    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
        height = bounds.Height;
        width = -1 * bounds.Width;
    }

Let me know if there is an easy way.

score 4 · Accepted Answer · answered Nov 27 '13 at 07:25

I could not find a way to BIND the Value of a storyboard expression.

However, the work around is to set it manually each time. We can do this by giving it a name attribute like:

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).    (CompositeTransform.TranslateX)" Storyboard.TargetName="button">
         <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
         <EasingDoubleKeyFrame x:Name="buttonTranslateX"  KeyTime="0:0:9.9" Value="0" />
     </DoubleAnimationUsingKeyFrames>

And on Page Initialization set the Value like this:

Rect bounds = Window.Current.Bounds;
static double height = 0;
static double  width = 0;

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
    height = bounds.Height;
    width = -1 * bounds.Width;
    buttonTranslateX.Value = width;
}

This will create a nice little animation where an object will move horizontally across the screen in about 9 seconds.

XAML: Setting the value of Storyboard animation from code behind

1 Answers1