Windows 8 - Images and DPI

Windows 8 is DPI aware then the applications auto-scale images according to DPI and screen resolution:

• 100% when the scale is not applied.
• 140% when the screen resolution is 1920x1080 and for all devices with minimum 174 DPI.
• 180% when the screen resolution is 2560x1440 and for all devices with minimum 240 DPI.

The developer can use vectorial elements like SVG or XAML without problems.

Otherwise when the developer uses the images raw, bitmap, png or jpg, he needs to create a file for every case.

He can explicit the scale factor in the file extension:
\myLogo.scale-100.jpg
\myLogo.scale-140.jpg
\myLogo.scale-180.jpg

Or use the folder convention:
\scale-100\myLogo.jpg
\scale-140\myLogo.jpg
\scale-180\myLogo.jpg

When the application don't has static images, it's possible to create a logic to have the same result from code behind.

switch (DisplayProperties.ResolutionScale)
{
 case ResolutionScale.Scale100Percent:
  img.Source = new BitmapImage(new Uri("url?s=100"));
 break;
 case ResolutionScale.Scale140Percent:
  img.Source = new BitmapImage(new Uri("url?s=140"));
 break;
 case ResolutionScale.Scale180Percent:
  img.Source = new BitmapImage(new Uri("url?s=180"));
 break;

 default:
 // some exception
}

The class DisplayProperties has some event to help the developer:

• ColorProfileChanged: when the color profile changes.
• LogicalDpiChanged: when the the pixel per inches (PPI) changes.
• OrientationChanged: when device orientation changes.
• StereoEnabledChanged: when the property StereoEnabled changes (3D stereoscopic).