Add a Custom Tile to a Windows Application

Windows 8 Start Menu.

How to add information tiles to an application for Windows 8.1 (and maybe 10, who knows?):

If you have ever developed a desktop application for Windows 8.1, you may have noticed that at some point, you will need to have an image tile.

If you are developing your application in .NET under Windows 8.1, it’s easy enough to do. Visual Studio has a neat screen that allows you to input everything all at once:

App package manifest / Visual Assets.

However, if you’re using other platforms, or if you didn’t create your program in Visual Studio, you will soon find that it is not as straightforward.

Fear not: doing this by hand is not that complicated.

All you need to know is how to create a Visual Element Manifest file.

For an application called “MyApplication”, create the file name MyApplication.VisualElementManifest.xml.

This will tell Windows where to look for the information on the visual element.

Within this file, you will need to do something that looks like this:

<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <VisualElements
    BackgroundColor="#FF0000"
    ShowNameOnSquare150x150Logo="on"
    ForegroundText="light"
    Square150x150Logo="Images\150x150Logo.png"
    Square70x70Logo="Images\70x70Logo.png"/>
</Application>

BackgroundColor can be any hex value or a predefined string of the following colors:

Fuchsia Teal Orange White
Purple Lime Red Black
Blue Green Maroon  
Navy Olive Silver  
Aqua Yellow Gray  

ShowNameOnSquare150x150Logo is a parameter that will tell Windows to show the application name on the tile. This requires the application name to be exposed to Windows; unfortunately, it may not work properly with apps not designed in Visual Studio.

ForegroundText is a parameter that tells Windows what shade to use for the name on the logo. You have two choices:

  • "light" for white text
  • "dark" for black text

Square150x150Logo is the parameter for the 150 image path. It should be in 1024 x 1024 px, .jpg, .jpeg or .gif format, and no larger than 200 kb. However, for it to work, both the 150 and 70 images should be specified, or the entire file will be ignored.

Square70x70Logo is the parameter for the 70 image path. It should be in 1024 x 1024, .jpg, .jpeg or .gif format, and no larger than 200 kb. However, for it to work, both the 150 and 70 images should be specified, or the entire file will be ignored.