Rotate and scale in


Please excuse the simple questions! (I’m still leaning the “Fuse way”)

I have the following:

<Panel Padding="50">
  <Image File="../Assets/card.png">
      <Rotate Degrees="360" Duration="0.5"/>
      <Scale Factor="0" Duration="0.5"/>

This creates an image in a panel so that the image width is constrained by the panel and it’s padding. When the app is started the image rotates and scales down to 0 (disappears).

What I would like to do is to do this in reverse so that as the app starts the image scales from 0 to the size as would be constrained by the panel (and rotates also).

Can anyone explain how I can set the initial 0 size and then scale to size = “auto”?

Many thanks,

You will want to use AddingAnimation for this. Note that it is played backwards by default, so you need to invert the animators inside of it. Here’s the code:

<Panel Padding="50">
  <Image ux:Name="theImage" File="../Assets/card.png">
    <Scaling ux:Name="theScaling" Factor="1" />
        <Change theScaling.Factor="0" Duration="1" />
        <Rotate Target="theImage" Degrees="-360" Duration="1" />

Ok great, I see. Is there some documentation for <Scaling>? I couldn’t seem to find it.

There sure is, here you go. It’s frequently easier to just use the search in the top-left corner when you know a particular class name.