Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Using Unplated “Tile” Images In UWP Apps

I realise the first question you have: “Unplated?” Well, give me a chance. In your app’s package manifest, you have a section for Square44x44Logo, this logo is used in the task bar and in the application list in the start menu. What you will notice is that, by default, your image will have a border around it, like so:
image

Notice the grey all around the icon (note: that grey is defined in the package manifest too, so doesn’t have to be that colour)? Now, for your app’s branding, maybe you don’t want that border as that goes against how your actual tile looks, and consistency is key, right!

The Solution

So how do we solve this? This is where unplated images comes in. Basically, these are exactly the same images you’re using for the Square44x44Logo but with different filenames.

Let’s say your filename is SmallLogo.targetsize-32.png, we would rename it to SmallLogo.targetsize-32_altform-unplated.png, note adding “_altform-unplated” to the end of the filename.

Now let’s see what our app looks like:
image

Note that the border is now gone and the image is full bleed within its area.

Some things to remember when doing this:

  • You must add “_altform-unplated” to the targetsize-based images, not the scale.
  • You must still have scale-based images.

Happy branding.

A sample project is on GitHub at https://github.com/Ferret-Labs/MetroNuggetsCode/tree/master/UnplatedTiles

SL

Advertisements

4 responses to “Using Unplated “Tile” Images In UWP Apps

  1. Pingback: Dew Drop – July 2, 2015 (#2046) | Morning Dew

  2. klax August 7, 2015 at 18:47

    this works great for the taskbar-logo, but I dont get it to work in the “all apps”-list. That logo still has a margin and it is scaled down to fit that margin, which makes it look blurred.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: