¿How to change background image depending on screen resolution?

Question

I have different resolution images in the Assets of my app so it can change the background depending on the local machine screen resolution. How can I implement this with C# or XAML??

Answer 1

You can use DisplayProperties.ResolutionScale to determine the resolution scale.

switch (DisplayProperties.ResolutionScale)
{
    case ResolutionScale.Scale100Percent:
        // Set the source of the images to 100% scaled image
        break;
    case ResolutionScale.Scale140Percent:
        // Set the source of the images to 140% scaled image
        break;
    case ResolutionScale.Scale180Percent:
        // Set the source of the images to 180% scaled image
        break;
    default:
        // Do something else
}

For further details, you can learn from the following sample: http://code.msdn.microsoft.com/windowsapps/Scaling-sample-cf072f4f 

Best Regards,

Permagate

Answer 2

A more efficient way is to supply 3 versions of the image in your project, and the platform will automatically use the right image depending on the plateau scale of the local machine. You shouldn't have to write app code if this is your scenario.

See this reference article for more details:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465262.aspx

---

Marco

Answer 3

A more efficient way is to supply 3 versions of the image in your project, and the platform will automatically use the right image depending on the plateau scale of the local machine. You shouldn't have to write app code if this is your scenario.

See this reference article for more details:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465262.aspx

---

Marco

Yes, I answered with that consideration, as the OP said that he already had different resolution images. But I'm pretty certain that not using code is only possible right now if you develop using CSS. For XAML, at least right now, it needs code-behind. Even the sample pretty much do that. CMIIW.

Best Regards,

Permagate

Answer 4

When an app is launched, the platform detects what the scale of the system is currently at, then appropriately chooses which image to load as long as you've set your project up correctly.

If you have <Image Source="images/logo.png" />, and as long as you've followed the naming conventions cited in the link I posted above, this should work without code for scale as well as contrast loading.

Permagate, you mentioned that for XAML this needs code? In the CP build, this should be working for both HTML and XAML applications without app code. Are you not seeing this?

---

Marco

Answer 5

Testing it just now, and it works. That's really helpful, thanks ;)

Best Regards,

Permagate