With the latest update to Visual Studio 2012, the mechanism for
specifying and verifying DPI-aware images has just gotten
I've written and spoken about automatic DPI-aware image assets
in Windows 8 apps in my book Windows 8 XAML in Action, and also at
events. Here are the details, but in a nutshell, if
you use a specific naming convention for images in your Windows
Store app, for example logo.scale-100.png and logo.scale-180.png,
your code can simply reference the root name (logo.png) and the
runtime will handle pulling in the correct image for that DPI.
In base Visual Studio 2012, the file picker in the app manifest
didn't quite understand this convention. To pull in DPI-aware
images, you had to simply type the root file name in the textbox.
Everything worked beyond that. In Update 1, the appxmanifest
designer has been updated to better support these types of image
Another nice change is that the "store logo" entry has been
moved from the last tab to the first tab. This is a huge deal as
the latest version of WACK now checks to make sure you
have that logo in place. Those X logos you see in the Windows
Store? That's from folks forgetting to update this logo. With it
now on the first tab, it's much more "in your face".
Here's one of the examples from my book, created with the base
Visual Studio 2012, and brought into Update 1 without me changing
anything. It just works (the .scale-80 image was left out by me).
the small numbers at the top right of the logo are to illustrate
which image is chosen when run in the simulator.
Note that the appxmanifest itself only includes an entry for the
base file name:
<?xml version="1.0" encoding="utf-8"?>
<Identity Name="7bb30b0f-fd80-4ea2-a0e6-c619d20c83fe" Publisher="CN=Pete" Version="188.8.131.52" />
<Resource Language="x-generate" />
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="PhotoBrowser.App">
<VisualElements DisplayName="Photo Browser by Pete"
Description="Photo Browser sample app for my book Windows 8 XAML in Action"
ShortName="Photo Browser" />
In the project itself, I have images named with the
system-recognized naming convention.
Testing your images
If you have multiple machines with different DPI screens, that's
a great way to test, as you'll see exactly what the images look
like. For most people, however, that's not the case. To test out
the images, use the simulator. The simulator will do its best to
show what the images will look like, but of course, without the
available DPI on the host machine, the level of detail won't be the
It's a small change to Visual Studio 2012, but a welcome one. As
a result of this, I expect to see more developers using dpi-aware
images, and fewer developers leaving out the store logo.