How to bind an animation with custom dependency properties of windows 8 metro & windows phone

If you use custom dependency attributes to bind an animation during animation, the overall architecture of our software will be greatly improved to achieve separation of animation and page logic.

We can easily achieve this effect on wp7.

Suppose we need a button on the interface for motion.

Xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Button Name="btnAnimal" Content="Button" VerticalAlignment="Top" Click="Button_Click_1"/>
 </Grid>

Background:

  SlideTranslate slide = new SlideTranslate();
            slide.Add(btnAnimal);
            DoubleAnimation animation = new DoubleAnimation() { From = 0, To = 700, Duration = new Duration(TimeSpan.FromMilliseconds(1000)) };
            Storyboard.SetTarget(animation, slide);
            Storyboard.SetTargetProperty(animation, new PropertyPath("SlideTranslate.Y"));
            Storyboard sb = new Storyboard();
            sb.Children.Add(animation);
            sb.Begin();

SlideTranslate: animation class.

public class SlideTranslate : DependencyObject
    {
        public static readonly DependencyProperty YProperty =
            DependencyProperty.Register("Y",
                typeof(double),
                typeof(SlideTranslate),
                new PropertyMetadata(-1.0, OnTransitionChanged));

        public static bool IsAnimal = false;

        public double Y
        {
            set { SetValue(YProperty, value); }
            get { return (double)GetValue(YProperty); }
        }

        static void OnTransitionChanged(DependencyObject obj,
                                        DependencyPropertyChangedEventArgs args)
        {
            (obj as SlideTranslate).OnTransitionChanged(args);
        }

        public FrameworkElement Element { get; set; }
        TranslateTransform t = new TranslateTransform();

        public void Add(FrameworkElement element)
        {
            element.RenderTransform = t;
            this.Element = element;
        }

        void OnTransitionChanged(DependencyPropertyChangedEventArgs args)
        {
            t.Y = Y;
        }
    }

In this way, the separation of animation and logic is realized. Our background Code does not need to implement any movement. We only need to bind the dependency attribute to the animation.

It is up to SlideTranslate to decide what animation you are doing. If we change the method in OnTransitionChanged to t. X = Y, It is the horizontal motion of x.

In this way, we can use some interface abstract classes to implement various effects and greatly improve the architecture.

However, when we reach win8, we will find that this method does not work because it will report an error.

Of course, we need to slightly change the code.

Storyboard. SetTargetProperty (animation, new PropertyPath ("SlideTranslate. Y "));

Change to Storyboard. SetTargetProperty (animation, "SlideTranslate. Y ");

This error is reported.

The content of XamlTypeInfo is related here, because your animation is added through code, so when reflecting this attribute, he needs to search for the SlideTranslate content in XamlTypeInfo, and its attribute list. However, it is not found because VS does not generate the corresponding information for SlideTranslate in XamlTypeInfo. If you add <local: SlideTranslate.../> VS once in XAML, this information is generated and your animation can run. Of course, you can create a hidden SlideTranslate in XAML or define it as a resource.

That is to say, we need to declare SlideTranslate in xaml.

    <Page.Resources>
        <local:SlideTranslate x:Key="trans"></local:SlideTranslate>
    </Page.Resources>

In this way, although no error is reported, the animation is still not executed. debugging finds that the OnTransitionChanged event is not triggered at all, that is, the value of attribute Y has not changed.

No nonsense. In fact, we are missing an animation attribute setting.

Anima. EnableDependentAnimation = true;

The complete code is as follows:

SlideTranslate slide = new SlideTranslate ();
Slide. Add (btnAnimal );
DoubleAnimation animation = new DoubleAnimation () {From = 0, To = 700, Duration = new Duration (TimeSpan. FromMilliseconds (1000 ))};
Animation. EnableDependentAnimation = true;
Storyboard. SetTarget (animation, slide );
Storyboard. SetTargetProperty (animation, "(SlideTranslate. Y )");
Storyboard sb = new Storyboard ();
Sb. Children. Add (animation );
Sb. Begin ();