Metro App Tile Basics

In my last post I showed the basics of how to create a simple Metro app. By default the tile displayed on the start screen for the app is not very useful, so I'll show you how to change it.

First open the app you created last time, or create a new blank Metro app. When the project is open double click on Package.appxmanifest in the Solution Explorer, this will bring up an editor screen for the manifest. On the Application UI tab scroll down a little bit to the Tile section:

The first two properties define the image that will be used for the small and large tiles on the start screen. These images can either be .png or .jpg. The small logo must be 150x150 pixels, and the large must be 310x150 pixels. If you don't specify a large logo, then you will not be given the option to switch to a larger tile on the start screen.

The next property, Small Logo, is used to specify the logo that will appear for the application on the search results screen. This must be a 30x30 pixel .png or .jpg.

The Show Name property determines if the name of the application should be displayed on the tile. If you do not specify a Short Name the Display Name will be used. You can also control the color of the name text by using the Foreground Text drop down. Here is an example of a large logo with a solid blue background and the name shown:

The Background Color property is used to control the background color of the tile and the splash screen. You will only see the background color on a tile when you leave parts of the image transparent.