CODEWITHSUNDEEP
c#windowsxamlwinrt-xaml
Nivert9
Nivert9

Reputation: 37

X, Y Animation Storyboard on button click for windows8 Apps

I've spent about the entire day looking at examples of XAML storyboarding, but WinRT/Windows8 apps doesn't work the same way WPF does (At least I think), and I'm all confused. All I want is a button that moves 100px left and 100px up when clicked. I'm having the hardest time figuring this out, and I know that once I get something I want working, I'll be able to work from there.

Also, if anyone can teach me how to use "Storyboard.TargetProperty" That'd be amazing. 

 <Rectangle
  Name="Rectangle01"
  Height="100"
  Width="100"
  Fill="Red">
        <Rectangle.Resources>
                    <Storyboard x:Name="myboard">
                        <DoubleAnimation 
                Storyboard.TargetName="Rectangle01"
                Storyboard.TargetProperty="Width"
                From="100" To="3600" Duration="0:0:6" />
            </Storyboard>
            </Rectangle.Resources>
    </Rectangle>

Here's an example of something I tried doing just to mess around with storyboards. This didn't throw an error until I tried to execute it, but it still doesn't work.

Upvotes: 1

Views: 375

Answers (1)

Chris W.
Chris W.

Reputation: 23270

So yea, WRT is a little different in some ways, but many not.

What you're wanting to do is move your Button around, up and left so logically on an X and Y axis right? So in my mind, I think RenderTransform/TranslateTransform to leverage the X and Y like;

<Button Click="StartTheMove">
  <Button.RenderTransform>
    <TranslateTransform x:Name="MoveFoo"/>
  </Button.RenderTransform>
</Button>

So now we have MoveFoo and setup our Transform, and since the only default Routed.Event I know of for WRT is Loaded we can't do that, so tie into the Click handler with StartTheMove like;

private void StartTheMove(object sender, RoutedEventArgs e)
{
    MoveTheButton.Begin();
}

So now we've got our handler and we want to fire off MoveTheButton which will be your actual storyboard set as a resource somewhere in say your window.resources or whatever like;

<Storyboard x:Name="MoveTheButton">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveFoo"
                                 Storyboard.TargetProperty="Y">
    <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="100" />
  </DoubleAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveFoo"
                                 Storyboard.TargetProperty="X">
    <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="-100" />
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

So once we hit our Storyboard it's then going to go and tell our Transform that we want the properties of X and Y to get some new properties declared (here's your Storyboard.TargetProperty coming in to join the fun) and we're going to set the values to those two properties to something other than what they already are and basically tell it we want it to move 100px up on the Y (up) and -100px on the X (left) of our 2d axis. Which you'll also prob want to play with the keytimes for however fast/slow you want the effect to happen.

While I didn't have time to test this and am kind of just adhoc throwing it together before I leave the office for the day, we've all been where you are and hopefully it helps. You should also be able to add the interaction behaviors to kind of leverage the same type of event triggers you're probably more used to (see tutorials) and handle your event that way to ditch your handler code behind.

However hopefully this helps, if not I'll see it again in the morning and will take another stab at it. Cheers!

Upvotes: 1

Related Questions