2

Trying to handle multi-resolution images in a Windows Phone Universal App I came across this article from Microsoft.

Unfortunately it only applies to Windows Phone 8 and Windows Phone Silverlight 8.1. When using the code samples they mention of:

private static bool IsWvga
{
    get
    {
        return App.Current.Host.Content.ScaleFactor == 100;
    }
}

In this case App.Current doesn't have a Host property - Host presumably being the SilverlightHost property mentioned here.

Has anyone found a way to do the equivalent in an 8.1 Universal App?

Tristan Warner-Smith
  • 9,631
  • 6
  • 46
  • 75
  • 1
    I typed [`windows 8.1 universal app ScaleFactor` into Google](https://www.google.com.au/webhp?sourceid=chrome-instant&rlz=1C1CHLW_enAU510AU510&ion=1&espv=2&ie=UTF-8#q=windows%208.1%20universal%20app%20ScaleFactor&safe=off) and found [this](http://stackoverflow.com/questions/23041883/font-size-scaling-in-windows-store-universal-app-w8-1-wp8-1) which leads to [this](http://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.display.displayinformation.resolutionscale.aspx). – ta.speot.is Jun 03 '14 at 11:01
  • This is useful, Host has gone, ScaleFactor is deprecated and yes there's now a new concept of 'View Pixels' that your link shows. Handling that manually isn't the best way though, instead make use of the built-in solution Muhammad references. – Tristan Warner-Smith Jun 03 '14 at 11:47

2 Answers2

3

If you want to handle image scaling then it is handled by folder name in Windows Phone 8.1 Universal Apps. Here is how:

Image scaling in windows phone 8.1

To use these images in XAML you just give the file name and the OS does the rest.

 <Image Grid.Row="1" Grid.Column="0" Source="wpimages/resolution.jpg" VerticalAlignment="Top" Width="100"/>

An additional method is simply to have multiple copies of the image at different scales and to name them in the same way as the folders i.e resolution.scale-100.jpg, resolution.scale-240.jpg. You still name the file the same in your XAML.

I will share an article on that in the future.

Tristan Warner-Smith
  • 9,631
  • 6
  • 46
  • 75
Muhammad Saifullah
  • 4,292
  • 1
  • 29
  • 59
  • Watch this video for details of scaling and orientation for windows phone 8.1. If you are intersted only in images scaling than start from [14:30] http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1/06 – Muhammad Saifullah Jun 03 '14 at 11:29
  • 1
    Just to add you don't need to do the folder thing. You can just name it `resolution.scale-140.jpg" and it'll do the same thing. – Tristan Warner-Smith Jun 03 '14 at 13:17
1

Quick update about Universal Windows Apps (UWP, Apps for Windows 10).

Microsoft extended the automatic scaling support in UWP and now supports more different scales (probably the most complete list is here - around 16 different, from 100% to 500%).

According to the article Porting Windows Runtime 8.x XAML and UI to UWP you just need to use 100/200/400:

Providing assets at 100%-scale, 200%-scale, and 400%-scale (in that priority order) will give you excellent results in most cases at all the intermediate scale factors.

Additionally, UWP supports different qualifiers (languages, scales, etc). Please read How to name resources using qualifiers (XAML)

On the personal side, I prefer to keep images in one folder, just to make life easier. It is easy to check if you have all the resolutions, it is easy to manage images (copy/delete/etc). Folders is way to go for Android, filenames - for iOS, Windows 10 supports both ways and it's great!

Alex Sorokoletov
  • 3,102
  • 2
  • 30
  • 52