Geek asks and answers

Unable to set Storyboard.TargetProperty to CompositeTransform.Rotation in Metro style app from code

I messed around with some digging in the Metro XAML app. I need to create code Storyboard. I would like to install Storyboard.TargetPropertyonCompositeTransform.Rotation

Seems impossible ...

My storyboard in XAML looks like this:

<Storyboard>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="grid">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="60"/
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

I would like to create something similar.
Important: I am not trying to recreate this accurate storyboard. I am inside custom code ContentControl, therefore thisit is Control, and there is no “grid” for the target animation. The goal is the control itself, which was previously set CompositeTransform.

 My code so far looks like this:

var turnSB = new Storyboard();

var doubleAnim = new DoubleAnimationUsingKeyFrames();
doubleAnim.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(0), Value = currentAngle });
doubleAnim.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(500), Value = targetAngle });

turnSB.Children.Add(doubleAnim);

Storyboard.SetTarget(doubleAnim, this.RenderTransform);
Storyboard.SetTargetProperty(doubleAnim, "(CompositeTransform.Rotation)");

turnSB.Begin();

Begin, , (CompositeTransform.Rotation). , . , PropertyPaths , ?: S

, ...

EDIT:

, . , ...

UserControl, . , Storyboard.Target, .

, (, ContentControl), Storyboard , .

: ( XAML) ( , ) , . , , Opacity, .
( UserControl, .)

- ?

+5
3

MSDN docs , . , , xaml, TargetProperty

Storyboard.SetTargetProperty(doubleAnim, "(UIElement.RenderTransform).(CompositeTransform.Rotation)");

UPDATE: , . :

Storyboard.SetTarget(doubleAnim, this.RenderTransform);
Storyboard.SetTargetProperty(doubleAnim, "Rotation"); // maybe "CompositeTransform.Rotation"
storyboard.Children.Add(doubleAnim);
+4

, , , , RenderTransform .

public class CustomControl2 : Control
{
    public CustomControl2()
    {
        this.DefaultStyleKey = typeof(CustomControl2);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate(); 
    }

    public void RunAnimation()
    {
        //this.RenderTransform = new CompositeTransform();
        this.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x33, 0xC8, 0x9C));

        var turnSB = new Storyboard();

        var doubleAnim = new DoubleAnimationUsingKeyFrames();
        doubleAnim.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(0), Value = 10 });
        doubleAnim.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = TimeSpan.FromMilliseconds(500), Value = 30 });

        turnSB.Children.Add(doubleAnim);

        Storyboard.SetTarget(doubleAnim, this.RenderTransform);
        Storyboard.SetTargetProperty(doubleAnim, "(CompositeTransform.Rotation)");

        turnSB.Begin();
    }
}

, , RunAnimation, , .

, Button, .

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    this.MyControl.RunAnimation();
}

, .

+4

, , . , , (UNTESTED CODE):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;

namespace CustomControls
{
    /// <summary>
    /// Author: Frank Wolferink
    /// Note: example is untested and comes as is. I hope it save you the time i lost figering this out
    /// </summary>
    public class CustomControl : Control
    {

        private Storyboard _compositeTransformExampleStoryBoard;

        private const string TRANSLATE_X_TARGET = "Control.RenderTransform.CompositeTransform.TranslateX";
        private const string TRANSLATE_Y_TARGET = "Control.RenderTransform.CompositeTransform.TranslateY";
        private const string TRANSLATE_ROTATE_TARGET = "Control.RenderTransform.CompositeTransform.Rotation";


        public CustomControl()
        {
            this.RenderTransform = new CompositeTransform();

            TimeSpan duration = new TimeSpan(0,0,0,0,500);
            double translateX = 10;
            double translateY = 10;
            double rotation = 40;

            _compositeTransformExampleStoryBoard = BuildStoryboard(duration, translateX, translateY, rotation);

            this.Loaded += CustomControl_Loaded;
        }

        void CustomControl_Loaded(object sender, RoutedEventArgs e)
        {
            _compositeTransformExampleStoryBoard.Begin();
        }


        private Storyboard BuildStoryboard(TimeSpan animationDuration, double transistionValueX, double transistionValueY, double rotation)
        {
            Storyboard storyboard = new Storyboard();

            if (transistionValueX != 0)
                CreateAnimation(storyboard, transistionValueX, animationDuration, TRANSLATE_X_TARGET);

            if (transistionValueY != 0)
                CreateAnimation(storyboard, transistionValueY, animationDuration, TRANSLATE_Y_TARGET);

            if (rotation != 0)
                CreateAnimation(storyboard, rotation, animationDuration, TRANSLATE_ROTATE_TARGET);


            return storyboard;
        }

        private void CreateAnimation(Storyboard storyboard, double transistionValue, TimeSpan animationDuration, string targetProperty)
        {
            DoubleAnimation da = CreateDoubleAnimation(transistionValue, animationDuration);
            storyboard.Children.Add(da);
            Storyboard.SetTarget(da, this);
            Storyboard.SetTargetProperty(da, targetProperty);
        }

        private DoubleAnimation CreateDoubleAnimation(double transistionValue, TimeSpan duration)
        {
            return new DoubleAnimation()
            {
                Duration = duration,
                To = transistionValue
            };
        }

    }
}

>

+1

More articles:


All Articles