Device family state trigger in UWP

Universal Windows Platform runs on many different device families. To make the app look great on different devices, we can usually use AdaptiveTriggers, which react to different screen sizes. But if we require even more specificity, we can create a device family-based state trigger.

Recognizing the device family

First we have to recognize, which device family we are currently running on. The number of device families is expected to grow, so Microsoft provides the current family as a simple string which you can retrieve using the following property:

The value starts with the Windows. prefix, which is followed by the device family name. To make things strongly typed, we can create a simple device family helper which uses a custom enum:

This simple helper retrieves the system property and stores the recognized device family into a read-only property.

We have included a Unidentified  value for device families that will be released in the future. When a new family appears, we can add new enum name and update the code accordingly.

Device family state trigger

Building custom state triggers is quite simple deriving from the  StateTriggerBase  and we can use the device family helper we have just created:

We can specify the device family to target using the TargetDeviceFamily  property and then respond to the PropertyChanged  event by activating or deactivating the trigger.

This simple code snippet uses our custom trigger and shows the appropriate TextBlock .

You can use the trigger to show and hide controls, change ItemTemplates for lists and more.

Source code

The source code for this post is available on my GitHub.

Summary

When we provide device-family specific functionality to the users, we usually have to update the displayed view appropriately. Our device family state trigger will help us do just that.

If you need to specialize your views even more, you can create custom device family views. We will show this technique in a future post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*