none
[UWP]C# UWP 2019: StoryBoard not working on Width property from code behind RRS feed

  • Question

  • I have a Storybook proc that Fades an image. It works.  Now, 'm trying to do a ZoomIn on it (Image Control).

    Using the same code, I change the property to Width and I can't get it to work. It run through with no errors but doesn't affect the change. I do know the property change works. Before starting, I change the Height and Width down to about half the original. That change I see.

      elementToChange.Width =28;
      elementToChange.Height=28;
      var myDAUKF = new DoubleAnimationUsingKeyFrames();
      var myLDKG_1=new LinearDoubleKeyFrame {KeyTime=KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)),Value=57 };
      myDAUKF.KeyFrames.Add(myLDKG_1);
      Storyboard.SetTarget(myDAUKF, elementToChange);
      //Storyboard.SetTargetProperty(myDAUKF, "Opacity");
      Storyboard.SetTargetProperty(myDAUKF, "Width");
      var mySB = new Storyboard();
      mySB.Children.Add(myDAUKF);
      mySB.Begin();



    Monday, September 9, 2019 1:03 PM

Answers

  • Hi again Roy.  You are responding to 2 of my Storyboard questions.. So this one for now.  And thinks.  Geez, I like code samples better than Xaml ones. I can alter the procs to do what I need.

    Testing in in my current app was just being weird.  A totally different Image was moving across slowly across the screen and noting changing size.

    So, I opened a new app for testing.  In a Grid/Row/Border, I put an Image control with source pointed to an Assets image.  OK so far. This was passed into the sub.

    Then in my sub, I pasted in your code above. It didn't seem to be doing anything. So I started, tweeking around a little. First changed the time spans to FromSeconds just because I understand that easier.  At the top I set the element width and height to 18.  That worked, but still no observable changes. The EnableDependtentAnimation was the key thing to add. I changed the values on most of the stuff, one at a time. Not much happened at all.  Changing the keyFrameEnd.Value = 150 to 0 worked well as expected,  18 to 0. At 150, it did not get bigger.

    Then, and I dont know why, I decided to change the Height property to 88 Bam!. It did exactly (apparently) what I wanted, even if I have no clue as to why. I get a nice smooth Zoom with both Height and Width staying relative through the transition.

     

    Then another surprise. I set the height to 450.  The transition would grow no larger than 150.  Realizing the keyFrameEnd.Value was 150, I Changed that.  Worked perfectly.  And it sort of made a little sense, if they whole thing was working on Height instead of Width.  With that Question, I changed "Width" to "Height".  Same results, except now I had to change Width to 88.  Looks to me like some underlaying code has two parms backwards.  Think I found a Bug Microsoft.  Also, why is it affecting both Height and Width.  What if I just wanted to stretch it in one direction.  I was expecting to have to code a process for both Height and Width.

    Oh yeah, commenting the Duration seemed to make no difference. 

    So, I'm going to Paste in my changes, so you can see them.  I will also hold off on marking your reply as answer.  I suspect you will give me something that is updated.  Better to check the most recently one.

            private void StoryBoardFadeAndZoomIn(Image elementToChange)
            {
                elementToChange.Width  = 18;
                elementToChange.Height = 88;
                var myDAUKF                 = new DoubleAnimationUsingKeyFrames();
                var keyFrameStart          = new LinearDoubleKeyFrame();
                keyFrameStart.KeyTime  = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
                keyFrameStart.Value      = 0;
                var keyFrameEnd           = new LinearDoubleKeyFrame();
                keyFrameEnd.KeyTime   = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));
                keyFrameEnd.Value       = 150;
                myDAUKF.KeyFrames.Add(keyFrameStart);
                myDAUKF.KeyFrames.Add(keyFrameEnd);
                myDAUKF.EnableDependentAnimation = true;
                //myDAUKF.Duration     = TimeSpan.FromSeconds(2);
                Storyboard.SetTarget(myDAUKF, elementToChange);
                Storyboard.SetTargetProperty(myDAUKF, "Width");
                var mySB                     = new Storyboard();
                mySB.Children.Add(myDAUKF);
                mySB.Begin();
            }

    • Marked as answer by ScCrow2 Tuesday, September 17, 2019 8:58 PM
    Tuesday, September 10, 2019 6:16 PM

All replies

  • Hi,

    Your animation is a dependent animation, by default, the animation system won't run a dependent animation. To enable your animation, you need set the EnableDependentAnimation property of the animation object to True. Another thing is that please set the Duration property of the animation object as well.

    Like this:

     var myDAUKF = new DoubleAnimationUsingKeyFrames();
    
                var keyFrameStart = new LinearDoubleKeyFrame();
                keyFrameStart.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
                keyFrameStart.Value = 100;
    
                var keyFrameEnd = new LinearDoubleKeyFrame();
                keyFrameEnd.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2500));
                keyFrameEnd.Value = 600;
    
                myDAUKF.KeyFrames.Add(keyFrameStart);
                myDAUKF.KeyFrames.Add(keyFrameEnd);
                myDAUKF.EnableDependentAnimation = true;
                myDAUKF.Duration = TimeSpan.FromMilliseconds(2500);
    
                Storyboard.SetTarget(myDAUKF, elementToChange);
                Storyboard.SetTargetProperty(myDAUKF, "Width");
                var mySB = new Storyboard();
                mySB.Children.Add(myDAUKF);
                mySB.Begin();

    For more information, please refer: DoubleAnimationUsingKeyFrames Class.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, September 10, 2019 2:35 AM
    Moderator
  • Hi again Roy.  You are responding to 2 of my Storyboard questions.. So this one for now.  And thinks.  Geez, I like code samples better than Xaml ones. I can alter the procs to do what I need.

    Testing in in my current app was just being weird.  A totally different Image was moving across slowly across the screen and noting changing size.

    So, I opened a new app for testing.  In a Grid/Row/Border, I put an Image control with source pointed to an Assets image.  OK so far. This was passed into the sub.

    Then in my sub, I pasted in your code above. It didn't seem to be doing anything. So I started, tweeking around a little. First changed the time spans to FromSeconds just because I understand that easier.  At the top I set the element width and height to 18.  That worked, but still no observable changes. The EnableDependtentAnimation was the key thing to add. I changed the values on most of the stuff, one at a time. Not much happened at all.  Changing the keyFrameEnd.Value = 150 to 0 worked well as expected,  18 to 0. At 150, it did not get bigger.

    Then, and I dont know why, I decided to change the Height property to 88 Bam!. It did exactly (apparently) what I wanted, even if I have no clue as to why. I get a nice smooth Zoom with both Height and Width staying relative through the transition.

     

    Then another surprise. I set the height to 450.  The transition would grow no larger than 150.  Realizing the keyFrameEnd.Value was 150, I Changed that.  Worked perfectly.  And it sort of made a little sense, if they whole thing was working on Height instead of Width.  With that Question, I changed "Width" to "Height".  Same results, except now I had to change Width to 88.  Looks to me like some underlaying code has two parms backwards.  Think I found a Bug Microsoft.  Also, why is it affecting both Height and Width.  What if I just wanted to stretch it in one direction.  I was expecting to have to code a process for both Height and Width.

    Oh yeah, commenting the Duration seemed to make no difference. 

    So, I'm going to Paste in my changes, so you can see them.  I will also hold off on marking your reply as answer.  I suspect you will give me something that is updated.  Better to check the most recently one.

            private void StoryBoardFadeAndZoomIn(Image elementToChange)
            {
                elementToChange.Width  = 18;
                elementToChange.Height = 88;
                var myDAUKF                 = new DoubleAnimationUsingKeyFrames();
                var keyFrameStart          = new LinearDoubleKeyFrame();
                keyFrameStart.KeyTime  = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
                keyFrameStart.Value      = 0;
                var keyFrameEnd           = new LinearDoubleKeyFrame();
                keyFrameEnd.KeyTime   = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));
                keyFrameEnd.Value       = 150;
                myDAUKF.KeyFrames.Add(keyFrameStart);
                myDAUKF.KeyFrames.Add(keyFrameEnd);
                myDAUKF.EnableDependentAnimation = true;
                //myDAUKF.Duration     = TimeSpan.FromSeconds(2);
                Storyboard.SetTarget(myDAUKF, elementToChange);
                Storyboard.SetTargetProperty(myDAUKF, "Width");
                var mySB                     = new Storyboard();
                mySB.Children.Add(myDAUKF);
                mySB.Begin();
            }

    • Marked as answer by ScCrow2 Tuesday, September 17, 2019 8:58 PM
    Tuesday, September 10, 2019 6:16 PM
  • Hi,

    The code I post is a test one in my side. Glad to hear that you've changed it for your scenario. There is nothing need to be updated. You could mark yourself as answer.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, September 11, 2019 5:55 AM
    Moderator
  • I will mark it as the solution since there is some extra information there.  

    Since, to me, this seems to be an obvious Bug, Is there a way of forwarding this to the proper place at Microsoft?  I suspect it may not be seen.  The last time I reported an obvious bug it was never fixed.  Solitaire was repeating Card decks (in windows 7 as I recall) I could tell you which card was coming up next.  Then, if they fix it, I'll have to change my code.  Maybe I should just keep my mouth shut :-)

    No need to reply. 

    Thanks again Roy.

    Thursday, September 12, 2019 3:49 AM
  • Hi,

    I'm not sure about the bug you mentioned. Do you mean the duration for the animation? If it is, I have to explain about it. The duration means the length of time for which this timeline(in our scenario, it's DoubleAnimationUsingKeyFrames) plays. So when you defined the duration property, the animation will end in that time. There is one thing that you might not know, the duration of a key-frame animation is implicitly the duration equal to the highest KeyTime value set in any of its key frames. In your code snippet, it's 2 seconds.

    So you may have a question about how to prove the duration is working. It's easy, you could change your code a little bit. 

    First, you could set the duration to 1 second. Then running your app, you will see the animation stops at the middle. This is because the duration is shorter than a KeyTime in your own key frames and it cuts off part of the animation.

    Another test is that you could set the duration to 5 seconds. Then add another line of code like this.

       myDAUKF.Duration     = TimeSpan.FromSeconds(5);
       myDAUKF.RepeatBehavior = RepeatBehavior.Forever;

    Then you could run your app and you can see the animation will repeat every 5 seconds.

    Both of these test could prove the duration is working correctly. In previous code snippet, we both set it the same as the highest KeyTime value so it looks like the duration makes no differences whether we set or don't set it. 

    Hope this could help you.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, September 12, 2019 7:56 AM
    Moderator
  • Thanks for the explanation.  But I had that figured out.  I had done both of the scenarios :-)

    It was .. I had to change the Width value to get it to work(that was the setting it to 88, just any number higher), while I was specifying Height as the target property. It was an accident that I found that.  Probably just something else I dont understand. It works vice versa too. Once you know it works that way, you just set the other property.

    Then, when coding to change only the width, it does a zoom.  I expected it to just get wider, but both properties changed staying relative.  It's a good zoom.  Again, that may be expected behavior or a property that I missed.

    THx for the reply,,,, and the others you answered.

    Tuesday, September 17, 2019 8:58 PM