Windows 10, UWP, Modern Resource Technology and Device Families–Simplest Example

This is just a bit of fun. For some reason, it makes me smile and so I thought I’d share it here. It’s not new. It’s not clever. It’s not one of those ‘aha’ moments unless you’d not seen it before but, for some reason, I like it.

Make a new project in Visual Studio 2015. File->New->Blank App (Universal Windows) as per below;

image

Now, add some simple XAML to the MainPage.xaml;

  <Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
      <Image Stretch="None" Source="ms-appx:///Assets/picture.jpg"/>
      <TextBlock x:Uid="txtDeviceName" TextAlignment="Center"/>
    </StackPanel>
  </Grid>

Now, go grab 2 pictures from the web. Here’s a picture of a PC;

PC Picture

Phone Picture

Save each one into your Assets folder of the project giving them names as below;

image

Now add a Resources folder to your project and add two .resw files within there as below;

image

and in there set up some text for the TextBlock that we called txtDeviceName. In the first file I have;

image

and in the second file;

image

and, naturally, when I run this on a PC I get a picture of a Surface Book and the right text and when I run it on a Phone (or other Mobile device) then I get a picture of a 950 XL and the right text.

But, for some reason, this simple example seems to highlight what’s going on with the use of the Modern Resource Technology and device families and so I thought I’d share.

Perhaps if you’re trying to do a ‘Hello World’ to show how device families work, it might be a useful thing to use.

It’s worth pointing out that maybe I should have some ‘fallback’ type resources here called (e.g.) picture.jpg and Resources.resw for scenarios beyond Mobile and Desktop device families.