Rotate and scale in

How-to Discussions
1

Hi,

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

I have the following:

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

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,
Iain

2

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" />
    <AddingAnimation>
        <Change theScaling.Factor="0" Duration="1" />
        <Rotate Target="theImage" Degrees="-360" Duration="1" />
    </AddingAnimation>
  </Image>
</Panel>
3

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

4

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.

5

Thanks!