James Montemagno
James Montemagno

Live, Love, Bike, and Code.

Tags


Twitter


Windows 8 Live Tile Branding

James MontemagnoJames Montemagno

After implementing live tiles I found something extremely interesting. When live tiles are active you never really get to go back to your standard tile with your app logo and name. Switching from wide to standard will flash you logo quickly, but after that it is gone. This seems just fine, but demoing my app to a few people and showing them live tiles they brought up a point… “How do I know which tile is the app?”



From a developer point of view I never really thought of this because it is showing you content from the app and you should know. On Windows Phone this isn’t actually an issue since you only ever have 1 tile active and it flips between your live tile and main logo tile (back/front). The real issue was that only your small logo shows up on Windows 8 by default. So the name of your app wont come up… well there is a solution for that, and it is pretty simple. Tile Branding.



This is the easiest way to fix the problem, which is to show the name of your app instead of the logo on the app. Or perhaps depending on the live tile decide which to show. To do this after you create your live tile simply add the following:

tile.Branding = TileBranding.Name;
tileWide.Branding = TileBranding.Name;

In this example I said show the name, you can also say Logo, or None. And it will respect that:

Name:

Logo:

None:

Additionally something else that you could do is actually create a new live tile with just your logo in it. Remember though you can only have 5 live tiles running at a time. Since you already have to include logos with your app, you can just do this:

var logoTile = TileContentFactory.CreateTileSquareImage();
var logoTileWide = TileContentFactory.CreateTileWideImage();
logoTile.Image.Src = "ms-appx:///Assets/Logo.png";
logoTileWide.Image.Src = "ms-appx:///Assets/WideLogo.png";
logoTile.Branding = TileBranding.Name;
logoTileWide.Branding = TileBranding.Name;

logoTileWide.SquareContent = logoTile;
updater.Update(logoTileWide.CreateNotification());

By using: “ms-appx:///Assets/” this means that you can actually reference this from your BackgroundTask as well and you do NOT need to include the images in that project as it is referencing the local directory to where your app was installed. Now you will have your logo and app name come up randomly :) Enjoy.

Live, Love, Bike, and Code

Comments