none
[UWP]C# UWP 2019 : I need assistance converting a Xaml Storyboard to code behind RRS feed

  • Question

  • I have a Storyboard in Page.Resources and it works.  I am trying to migrate that over to C# code behind so that I can make it more usable by passing in the Xaml Image control that needs to be acted on.  All it is doing is changing the source on the control over time.

    This is the cut down Xaml that works.

    <Storyboard  x:Name="SingingAnim" AutoReverse="False" RepeatBehavior="Forever">
      <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ArriveIMG" Storyboard.TargetProperty="(Image.Source)">
       <!--********************this repeats changing time to .2, .3. and file name-->
        <DiscreteObjectKeyFrame KeyTime="00:00:00.1000000">
          <DiscreteObjectKeyFrame.Value>
            <BitmapImage UriSource="Assets/Images/Play/Arrival1.png" />
          </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <!--********************endrepeats-->
      </ObjectAnimationUsingKeyFrames>
    <Storyboard>

    I'm putting in the code that I have, but not at all sure how close it is to correct.  It runs down to the assignment of the filename where it crashes.  I did try using the "new Uri("ms-appx:///Assets...." but that didn't work, or I did it wrong.

    Storyboard sbAnimateArrival = new Storyboard();
    sbAnimateArrival.SetValue(Image.NameProperty, "
    SingingAnim");
    sbAnimateArrival.AutoReverse = false;
    sbAnimateArrival.RepeatBehavior = RepeatBehavior.Forever;
    ObjectAnimationUsingKeyFrames myOAUKF = new ObjectAnimationUsingKeyFrames();
    myOAUKF.BeginTime = TimeSpan.FromSeconds(0);
    DiscreteObjectKeyFrame myDOKF = new DiscreteObjectKeyFrame();
    //Set the element to change and its source
    Storyboard.SetTarget(myOAUKF,
    ArriveIMG);
    Storyboard.SetTargetProperty(myOAUKF, "(Image.Source)");
    myDOKF.KeyTime = TimeSpan.FromSeconds(0.1);
    sbAnimateArrival.SetValue(Image.SourceProperty, "Assets/Images/Play/Arrival1.png");  <----------- Crash
    myDOKF.KeyTime = TimeSpan.FromSeconds(0.2);
    sbAnimateArrival.SetValue(Image.SourceProperty, "Assets/Images/Play/Arrival2.png");
    sbAnimateArrival.Children.Add(myOAUKF);
    sbAnimateArrival.Begin();

    Sunday, September 8, 2019 3:12 PM

Answers

  • Hi,

    There are two things you need to change.

    First, you created only one key frame. You'd better use more if you want to have more changes.

    Second, you need set value to the DiscreteObjectKeyFrame.Value property instead of directly to image.source property.

         ObjectAnimationUsingKeyFrames myOAUKF = new ObjectAnimationUsingKeyFrames();
                myOAUKF.BeginTime = TimeSpan.FromSeconds(0);
    
                Storyboard sbAnimateArrival = new Storyboard();
                sbAnimateArrival.SetValue(Image.NameProperty, "ArriveIMG");
                sbAnimateArrival.AutoReverse = false;
                sbAnimateArrival.RepeatBehavior = RepeatBehavior.Forever;
    
                //Set the element to change and its source
                Storyboard.SetTarget(myOAUKF, ArriveIMG);
                Storyboard.SetTargetProperty(myOAUKF, "(Image.Source)");
    
                DiscreteObjectKeyFrame myDOKF = new DiscreteObjectKeyFrame();
                myDOKF.KeyTime = TimeSpan.FromSeconds(.1);
                myDOKF.Value = new BitmapImage(new Uri("ms-appx:///Assets/seattle.png"));
    
                DiscreteObjectKeyFrame myDOKF2 = new DiscreteObjectKeyFrame();
                myDOKF2.KeyTime = TimeSpan.FromSeconds(.2);
                myDOKF2.Value = new BitmapImage(new Uri("ms-appx:///Assets/vancouver.png"));
    
                DiscreteObjectKeyFrame myDOKF3 = new DiscreteObjectKeyFrame();
                myDOKF3.KeyTime = TimeSpan.FromSeconds(.3);
                myDOKF3.Value = new BitmapImage(new Uri("ms-appx:///Assets/paris.png"));
    
                myOAUKF.KeyFrames.Add(myDOKF);
                myOAUKF.KeyFrames.Add(myDOKF2);
                myOAUKF.KeyFrames.Add(myDOKF3);
                sbAnimateArrival.Children.Add(myOAUKF);
                sbAnimateArrival.Begin();


    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.

    • Marked as answer by ScCrow2 Tuesday, September 10, 2019 9:01 PM
    Tuesday, September 10, 2019 6:28 AM
    Moderator

All replies

  • Hi,

    There is one thing that need to be clarified, Image.Source property is not a string, it's a ImageSource object. So you could not directly assign a string to it. Generally, you need to set a BitmapImage object for this property. Like this:

    img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png"));

    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.

    Monday, September 9, 2019 3:15 AM
    Moderator
  • Thanks Roy.

    Your comment was correct.  I was passing in a UIElement instead of an Image. That got me over that hump.  I did a little re-arranging of the code according to some sample that I found.  I still have one problem. You may see why quickly.

    I coded a change of sources 4 times.  When it runs with no errors, but I only see the last image.  Ive tried several things to no avail. I'm sure I am just overlooking something minor. I did change the timings to .001 and .002.   I get I nice flickering effect, but still, its just the Balloon.  It does seem to be running though. Setting the  to 1 and 2, no flicker, just balloon. 

                    ObjectAnimationUsingKeyFrames myOAUKF = new ObjectAnimationUsingKeyFrames();
                    myOAUKF.BeginTime = TimeSpan.FromSeconds(0);
                    Storyboard sbAnimateArrival = new Storyboard();
                    sbAnimateArrival.SetValue(Image.NameProperty, "animSmiley");
                    sbAnimateArrival.AutoReverse = false;
                    sbAnimateArrival.RepeatBehavior = RepeatBehavior.Forever;
                    //Set the element to change and its source
                    Storyboard.SetTarget(myOAUKF, elementToChange);
                    Storyboard.SetTargetProperty(myOAUKF, "(Image.Source)");
                    DiscreteObjectKeyFrame myDOKF = new DiscreteObjectKeyFrame();
                    myDOKF.KeyTime = TimeSpan.FromSeconds(0.1);
                    elementToChange.Source = new BitmapImage(new Uri("ms-appx:///Assets/Images/Play/Arrival1.png"));
                    myDOKF.KeyTime = TimeSpan.FromSeconds(0.2);
                    elementToChange.Source = new BitmapImage(new Uri("ms-appx:///Assets/Images/Play/Balloon.png"));
                    myOAUKF.KeyFrames.Add(myDOKF);
                    sbAnimateArrival.Children.Add(myOAUKF);
                    sbAnimateArrival.Begin();

    Tuesday, September 10, 2019 4:29 AM
  • Hi,

    There are two things you need to change.

    First, you created only one key frame. You'd better use more if you want to have more changes.

    Second, you need set value to the DiscreteObjectKeyFrame.Value property instead of directly to image.source property.

         ObjectAnimationUsingKeyFrames myOAUKF = new ObjectAnimationUsingKeyFrames();
                myOAUKF.BeginTime = TimeSpan.FromSeconds(0);
    
                Storyboard sbAnimateArrival = new Storyboard();
                sbAnimateArrival.SetValue(Image.NameProperty, "ArriveIMG");
                sbAnimateArrival.AutoReverse = false;
                sbAnimateArrival.RepeatBehavior = RepeatBehavior.Forever;
    
                //Set the element to change and its source
                Storyboard.SetTarget(myOAUKF, ArriveIMG);
                Storyboard.SetTargetProperty(myOAUKF, "(Image.Source)");
    
                DiscreteObjectKeyFrame myDOKF = new DiscreteObjectKeyFrame();
                myDOKF.KeyTime = TimeSpan.FromSeconds(.1);
                myDOKF.Value = new BitmapImage(new Uri("ms-appx:///Assets/seattle.png"));
    
                DiscreteObjectKeyFrame myDOKF2 = new DiscreteObjectKeyFrame();
                myDOKF2.KeyTime = TimeSpan.FromSeconds(.2);
                myDOKF2.Value = new BitmapImage(new Uri("ms-appx:///Assets/vancouver.png"));
    
                DiscreteObjectKeyFrame myDOKF3 = new DiscreteObjectKeyFrame();
                myDOKF3.KeyTime = TimeSpan.FromSeconds(.3);
                myDOKF3.Value = new BitmapImage(new Uri("ms-appx:///Assets/paris.png"));
    
                myOAUKF.KeyFrames.Add(myDOKF);
                myOAUKF.KeyFrames.Add(myDOKF2);
                myOAUKF.KeyFrames.Add(myDOKF3);
                sbAnimateArrival.Children.Add(myOAUKF);
                sbAnimateArrival.Begin();


    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.

    • Marked as answer by ScCrow2 Tuesday, September 10, 2019 9:01 PM
    Tuesday, September 10, 2019 6:28 AM
    Moderator
  • Yeah Roy!

    Perfect example.  I did add in a line for duration, but I am not sure that was needed.  I'm still playing with the timing.

    I did this more of a How convert from Xaml to code thing. I had the original working from Page.Resources.  I was trying to morph from one face to different color faces.  It would have worked, but I would need a bunch more images to smooth out the flash. That turned into, how do you do that in code.

    Now, it looks like it cold be useful as an Advertisement space. Ill probably have to add a little fade in and out so as to not flash, but this is cool.

    Thank You

    Tuesday, September 10, 2019 11:16 PM