Join Doug Winnie for an in-depth discussion in this video Creating a basic flip tile, part of Building Windows Phone 8 Live Tiles.
Creating a flip tile in C# code will involve a few steps. We need to identify the tile we want to update. Define the data set for the tile. And then, apply it to the tile. If you have access to the lesson files for this course, open the files for this chapter. We'll begin with the start version. This project has a simple XAML file that is some descriptive text and a button that will trigger a method in our C# code. When you tap the button, you will change the tile design with parameters we will set up on our project. The XAML and basic C# code behind the files are already set up for us, we just need to add in the specifics to customize the FlipTile design. The project also has assets we'll use for our icon design within the assets/fliptileassets folder.
To do this let's go to the main page.xaml.cs file and open it up. Within this, we have a method called update tile click which is triggered upon tapping the button in XAML layout. By default, the tile type that is used for Windows phone eight projects are FlipTiles. If we open the WMAppManifest, we can see this under the tile template drop down. If we were working with other tile types, we would need to change this before we can continue, but since the tile type is already correct, we can leave this alone.
We do need to make sure that the support for large tiles checkbox is selected, if our app is going to support the wide tile format. If we scroll down, we can also add the tile assets to our app manifest file here, to get the initial design correct. You'll notice that we can't define the backside of the tile in this screen. We'll have to do that with code. In order to change the tile with code, we need to define the tile that we want to update. To do this, we'll need to go back to our XAML CS file and we're going to be working with the Shell Tile class. In C#, we'll need to create a new shell tile object. So, let's go into our UpdateTile_Click method.
Inside of this, we're going to create a new ShellTile, and we'll call it PinnedTile. We're going to set that equal to a ShellTile, Active Tiles > First. The ShellTile class's active tiles property keeps track of all the tiles in our application. The first method is a way for us to access the default tile for our application. When we run this, the pin tile object will now have a reference to the default pin tile for our application. Even if this tile isn't pinned to the start screen. If it is pinned later, it will dot the settings we have to find here in our application.
We now need to define the data that we are going to send to the tile to update the designing content. The flip tile data class will give us the framework we need to pass this to the specified tile to update the assets in content. To do this, we need to create a flip tile data object, which we can name updated tile data. And set this as the new FlipTile data. I'm then going to list the properties of our tile using the updated tile data object. So, let's go ahead and get started with some of the basics. I first need to create the updated tile data object.
This is going to be a FlipTileData object type, which we'll set to UpdatedTileData. And we're going to set this to be equal to a new FlipTileData. I'm going to create a curly brace in the next line. And then, we'll start adding the properties that we want to set into our UpdatedTileData object. Let's first work with the front side content. Let's create the Title. I'm going to access the title parameter, and we're going to set this to a string, we'll call weather.
We're going to add a comma to the end of it since we're adding multiple properties into this updated tile data object. Next, let's put in a notification count that's using the count property. And we'll set this to 72. Now, we also need to work with the background images in our project, we're going to be using a Uri that's going to have a UriKind of relative, since we're going to be working with assets that are inside of our project. Let's first work with a small background image. We're going to set this equal to a new Uri and we're going to provide a string that's going to point to the asset inside of our project.
In this case, it's /Assets/FlipTileAssets/front_background_small.png, next we will set the UriKind as relative. We're going to repeat the same process for the other background images in our project. Next, we'll work with background image. Set this to a new Uri which will be /AssetsFlipTileAssets/front_background_medium.png, and our uri count again is relative.
Our last one is going to be WideBackgroundImage. We'll set this to a new Uri. Which is /Assets/FlipTileAssets/front_background_wide.png. Again, our UriKind is Relative. So, we've now defined the front side of our tile. We now need to provide the graphics for the back side. We'll access the BackBackgroundImage.
We'll set this to a new Uri. Which is /Assets/FlipTileAssets/back_background_medium.png with a UriKind of Relative. If I only have one last line which is the background image for the backside of the tile, that's the wide format. We'll access WideBackBackgroundImage which equals a new Uri which we'll set to /Assets/FlipTileAssets/back_background_wide.png.
And I'll finish off with a Uri kind of Relative. So, we've now provided the front side of the content with our title and count. We've provided the front side of our background images, and also the back side of the tile with our back background images. We now need to provide the backside content for our tile. Let's go ahead and set the BackTitle. We're going to set this to a string of San Francisco, California. The back content is the line of text that appears at the top. We'll set that to Sunny and 72.
Finally, there's a WideBackContent, which allows us to display a longer piece of text since we do have the wide format. We'll call this, Tuesday May 23rd. We're going to use an escape character \n to create a new line. And we'll say Sunny, 72 degrees. Now, this is the last parameter we're going to add here, so we're not going to going to put a comma at the end. We are going to close our curly brace, and then add a semi colon.
With the data set defined, we now need to update the tile itself. We do that by accessing the selected tile, and use the update method, passing in the FlipTileData type to the tile. We're going to access the pinned tile. We're going to use the update method. And we're going to pass in our UpdatedTileData. So, let's go ahead and run this in the emulator and see it in action.
When the application first runs, the tile is not already pinned to the start screen. So, let's go back to the application list and pin it first. We'll go to our application list, and I'll click and hold on FlipTile to pin this to start. You'll notice that the tile doesn't have a flip to show the backside. That is because it hasn't been updated with a back side content yet. I'll go ahead and run the application, and we'll go ahead and click on update tile to send that new tile data that we created earlier in C# to the pinned tile. Now, let's go ahead and turn to the start screen and go back to the bottom. But now, you see that the tile is updated and shares the additional content we provided.
If I flip through the various sizes, you'll see the different parameters start to display based on if the tile is small, medium, or wide. So, to update our flip tile, we first set up the initial designs using the app manifest, and then in our code specify the default tile using the shell tile class. We then created a new data set based on the flip tile data class and then passed that data set to the specified time.
- What are Live Tiles?
- Working with tile XAML templates
- Building design assets
- Packaging tiles
- Building secondary tiles