Windows 10 Universal apps Adaptive Controls

Windows 10 has given true meaning to Universal apps. Universal apps term is there from Windows 8 but infect it was not truly a universal app platform. In Windows 8/8.1 we still need to have two solutions one for Phone app and one for Store app.

The need of this was due to the fact that two completely different set of devices i.e. phone and pc + tablets needs to be supported. This challenge is still there but thanks to great work done for Windows 10 application framework and addition of few concepts that finally made possible to have one single solution and codebase for supporting family of devices running Windows 10.

The feature I am going to demonstrate is Adaptive control that will change itself based on the target device resolution and size. The VisualStateManager is the class that we are going to use it for this. If you have developed customer controls in Silverlight, WPF or Windows Phone, you must be familiar with VisualStateManager and VisualStates. The VisualStateManager has VisualStateGroups which is collection of VisualStates. Here each of the group is independent such that at given point of time, there can be only one VisualState that would be active. Along with VisualStateManager, we are going to use newly introduced RelativePanel control. Using both results into nice adaptive control.

Enough theory, let’s start with creating our first Adaptive control. First thing is, get Visual Studio 2015 from the link below and install it.

Once all setup, create project named AdaptiveControlApp and choose Universal section under Windows and then Blank app template in Visual studio Create New Project window.


Open the MainPage.xaml, and write markup as per Listing 1.0 below.

    <Grid x:Name="MainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <RelativePanel HorizontalAlignment="Stretch" Margin="25">
            <TextBlock Text="Enter value:" x:Name="ValueLabel" Margin="10"/>
            <TextBox x:Name="ValueTextBox" Width="250" />

Listing 1.0 Grid with RelativePanel control

The RelativePanel is like Grid when it comes to layout and placing controls. Right now if you run the app, you will see that TextBox will be placed upon the TextBlock. This is because like Grid’s Row and Column definition, we have not yet defined how the control will be placed.

To simply demonstrate the concept of Adaptive control, we will create a two visual states name HorizontalState and VerticalState. Both will have AdaptiveTrigger. AdaptiveTrigger. You might have used Triggers in WPF and Silverlight. But this trigger is different as it works for user interface. AdaptiveTrigger is currently only available trigger in Windows 10 SDK. Let’s write some markup as per Listing 1.1 below:

                <VisualState x:Name="HorizontalState">
                        <AdaptiveTrigger MinWindowWidth="650" />
                        <Setter Target="ValueTextBox.(RelativePanel.RightOf)" Value="ValueLabel" />

                <VisualState x:Name="VerticalState">
                        <AdaptiveTrigger MinWindowWidth="0" />

                        <Setter Target="ValueTextBox.(RelativePanel.Below)" Value="ValueLabel" />

Listing 1.1 AdaptiveTrigger usage within VisualState

Caught something new in Listing 1.1? Now VisualState supports Setters for property and that way it results in much cleaner XAML. Earlier you have to write animation for this transition. Animations are still supported but for simple setup, setter are quick and neat to use. The other important part in Listing 1.1 is how we set attached property RelativePanel.RightOf and RelativePanel.Below for ValueTextBox. The AdaptiveTrigger has MinWindowWidth set to 650. So when you resize window horizontally and width is greater than or equal to 650, the adaptive trigger for HorizontalState gets kicked off and it sets ValueTextBox to be placed at right side of ValueLabel. When size is less than 650, VeticalState comes into play and AdaptiveTrigger defined there will place ValueTextBox below the ValueLabel. Note the usage of parenthesis around the “RelativePanel.RightOf” and “RelativePanel.Below” properties. This is required as RightOf and Below are attached properties defined by the RelativePanel class.
Now hit F5 and you will see something like following:

Now start resizing window and when you do so, at certain width, you will see that ValueTextBox shifts below the label as following:

As of now there is only one AdaptiveTrigger. Good news is, you can create your own triggers! You can think of a UI that will adapt as per various screen size and that can be used for tablet, pc and phone device. The trigger can be created for device orientation, the pixel depth (DPI), the physical screen size as such. One such example of Device type based trigger can be found here written by Morten Nielsen!

By jay nanavati   Popularity  (2773 Views)