locked
Margin anamation WinRT RRS feed

  • Question

  • Hi All:

    Well I like to play with Margin animation but have not seen any sample.

    I saw .\Windows 8.1 app samples\XAML animation library sample (Windows 8.1)\C#\MainPage.xaml which mentioned Animation and at KeyTime="0" it is <Thickness>20,20,20,20</Thickness>. In real sense it is not an animation. Has someone idea how can we change margins in a given time.

    Best regards

    Agha


    Agha Khan

    Monday, January 13, 2014 7:07 AM

Answers

  • Since Thickness.left is not a dependency property, it can't be animated directly.  However, you may be able to adapt one of the solutions that are designed for Silverlight to the Modern app style.  Here is one such implementation:
    http://www.codeproject.com/Articles/92928/Thickness-animation-in-Silverlight-Margin-Padding 

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, January 15, 2014 3:26 PM
    Moderator

All replies

  • I'm confused - does a Storyboard with a DoubleAnimation not work for you?  What exactly are you trying to accomplish that Storyboard can't?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, January 13, 2014 4:21 PM
    Moderator
  • Blend's animation editor rocks for figuring out animations. You can record the changes you want to make and then examine the generated Xaml.

    Monday, January 13, 2014 4:41 PM
    Moderator
  • Thank you for your reply.

    This code didn't work.

    Storyboard sb = new Storyboard();
                            DoubleAnimation da = new DoubleAnimation()
                            {
                                From = 100,
                                To = 300.0,
                                Duration = TimeSpan.FromSeconds(500.0),
                                AutoReverse = false
                               
                            };
                           
                            Storyboard.SetTargetProperty(da,"Margin.Left");
                            Storyboard.SetTarget(da, canvas.Children[0]);
                            sb.Children.Add(da);

                            sb.Begin();

    Thanks

    Agha


    Agha Khan

    Monday, January 13, 2014 6:51 PM
  • Try it this way:
       Storyboard.SetTargetProperty(da, new PropertyPath("(MyObjectName.Margin.Angle)"));


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Monday, January 13, 2014 7:01 PM
    Moderator
  • Dear Matt Small Thanks for reply.

    First of all under WinRT SetTargetProperty does not take 2nd argument as PropertyPath and asking for string. Also Margin does not have Angle. You may use an image to run small app. For some reason it didn't run/compile.

    Best regards

    Agha Khan

     

    Agha Khan

    Monday, January 13, 2014 7:37 PM
  • Ugh, sorry about that, I have phone and Store apps mixed up. Can you post a link to your app?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, January 13, 2014 7:53 PM
    Moderator
  • Dear Matt Small:

    I have sent you the code, but I am not sure how other way I could had sent you the code!

    Best regards

    Agha Khan 


    Agha Khan

    Monday, January 13, 2014 9:15 PM
  • I've got it and I am checking it out.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 14, 2014 1:56 PM
    Moderator
  • Since Thickness.left is not a dependency property, it can't be animated directly.  However, you may be able to adapt one of the solutions that are designed for Silverlight to the Modern app style.  Here is one such implementation:
    http://www.codeproject.com/Articles/92928/Thickness-animation-in-Silverlight-Margin-Padding 

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, January 15, 2014 3:26 PM
    Moderator