Phone_81_Development_for_Absolute_Beginners

Lesson 28: Working with Animations in XAML

In this lesson we're going to talk about animation. To be clear, what we really do is change properties of the controls on our pages over time. This could take the form of moving an element from one place to another, changing its size from small to large, or changing the opacity of a control. In this lesson we're going to keep it very simple but you can combine many different effects together to create a complex sequence.

I originally hoped to incorporate animation into the last project in this series which we’ll begin in the next video. However, as it turned out, I didn't really need animation. Still, I wanted to cover this topic, at least the very basics of it. If this is something you want to use in your apps, you'll want to learn more about Microsoft Blend which is a tool similar to Visual Studio that has a more powerful set of animation tools. However, this less should get you familiar with the concept of animation at a high level.

We'll talk about animation using both XAML and C#. If you watched the Windows Phone 8 for Absolute Beginner series, which I created about a year ago with Clint Rutkas, we used a simple animation to animate the images as we were pulling them down from Flikr. In that series I discussed why you might need to take a pure C# approach versus a pure XAML approach towards animating properties of controls. In this lesson I'll demonstrate both approaches and then let you choose which one you want to use for your specific purpose.

We’ll start by opening the New Project dialog and (1) creating a new Black App project template called (2) WorkingWithAnimation, then (3) clicking the OK button.

Windows Phone 8.1 Development for Absolute Beginners – Page 320

On MainPage.xaml I'll replace the Grid with a StackPanel. We’ll begin by animating an image’s opacity to give it the appearance of fading the image in and out. To follow along, you’ll need to add the two images from the Assets folder of the Lesson28 zip file into your project’s

Assets folder.

Inside the StackPanel I’ll add a Button and an Image. I’ll set the source of the Image control to the snowy.png file which we copied into the Assets folder. I’ll also set the Opacity to

0 meaning we want to begin with the image being completely transparent.

Windows Phone 8.1 Development for Absolute Beginners – Page 321

My objective is to move the opacity property from 0.0 (completely transparent) to 1.0 (completely opaque) over two seconds. We'll get to that in just a moment. When the user clicks a button we’ll kick off that animation.

Animations are defined inside of Storyboards. A Storyboard is simply a collection of animations that all happen at the same time. As a developer you decide which events trigger the Storyboard to play all of its animations.

As I said earlier, you can animate many properties of controls including the size, the opacity, the color of the control. There are different animation objects that know how to work with colors, numbers, etc.

Let's create a Storyboard. We’ll create a Resources section of the StackPanel. In other words, here are the resources that'll be available to all the children of the StackPanel. Inside of the

StackPanel.Resources, we’ll create two Storyboards. The first I’ll call “ShowStoryboard” and the second I’ll call “HideStoryboard”. Inside of the “ShowStoryboard” I’ll set the target control, the target property of the target control, the original value and the target value, and finally the duration of the animation:

Windows Phone 8.1 Development for Absolute Beginners – Page 322

In this example, the ShowStorydoard has one animation defined, a double animation

(”double” as in the double data type, with numeric values after the decimal point) which specializes in moving a numeric-based property from one number to another. When it is triggered, it will animate the animatedImage control’s Opacity property from 0.0 to 1.0 over the course of two seconds.

In our simple example, we’ll trigger the ShowStoryboard’s animations by calling the

Begin() method in response to some event, such as the animateButton_Click event:

When we run the app, we can trigger the image to slowly appear by clicking the

“Animate” button:

Windows Phone 8.1 Development for Absolute Beginners – Page 323

We can also cause the image to disappear slowly using a second Storyboard with a single DoubleAnimation object that does the opposite of the first: changing the Opacity property from 1.0 to 0.0 over the course of two seconds:

Now we’ll add some logic to toggle the effect of showing and hiding the image by checking the current state of the animatedImage’s Opacity property and calling the appropriate storyboard’s Begin() method:

Windows Phone 8.1 Development for Absolute Beginners – Page 324

So, we can define XAML Storyboards that contain DoubleAnimation objects then use C# to trigger those storyboard at key moments in the app.

We can take a second tact. This second tact is helpful when we want to programmatically add new controls and animate them as we add them. In this case, I’ll re-work the Image control’s XAML definition to include an ImageOpened event handler method called animatedImage_ImageOpened:

The animatedImage_ImageOpened() method will fire whenever the Image control’s image is changed via its Source property.

We’ll also re-work the animateButton_Click() event handler method to dynamically load a different image into our Image control (the Assets/sunny.png file):

Windows Phone 8.1 Development for Absolute Beginners – Page 325

Notice how we created the BitmapImage control … by providing a new Uri object set to a location as designated by a special prefix:

ms-appx:///

Similar to how we can use http:// to indicate a URL, we can use the ms-appx:/// to denote a location that is relative to the current deployment package’s root. Obviously in this case we’re expecting our sunny.png file to be deployed to the Assets folder of the compiled package.

Inside the animatedImage_ImageOpened() event we have an opportunity to intercept the display of the image in the control with code we write. In this case, we’ll intercept to create a new Storyboard object and child DoubleAnimation on the fly with the same definition as the ones we created earlier, except using just C# instead of XAML:

Windows Phone 8.1 Development for Absolute Beginners – Page 326

Now, when we load a new image into the Image control, the Image control will first create a Storyboard with a DoubleAnimation that animates the Opacity property, then kicks off the Storyboard:

As I said at the outset, these are two very simple examples of animation. However, that should get you at least some basic understanding of what animations are, how they're associated with storyboards, how to kickoff a storyboard with the storyboard’s Begin() method.

Windows Phone 8.1 Development for Absolute Beginners – Page 327

Windows Phone 8.1 Development for Absolute Beginners – Page 328

Lesson 29: Exercise: The Map Notes App

In this final lesson, we’ll build the MapNotes app. It is a GPS-aware note app that records not just the note you take but also where you took that note and displays it on a map. Then you’ll be able to read that note and see a map of where you took the note. You can then delete the note or continue on from there.

In addition to working with Phone storage, the Map control and Geolocation, I’ll also add some nice little touches like truncating long note titles replacing the remainder of the title with an ellipsis and adding a MessageDialog to ask the user to confirm an operation:

Windows Phone 8.1 Development for Absolute Beginners – Page 329