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.
https://www.visualstudio.com/downloads/download-visual-studio-vs
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.
RelativePanel
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" />
</RelativePanel>
</Grid>
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.
AdaptiveTrigger
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:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="HorizontalState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="650" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ValueTextBox.(RelativePanel.RightOf)" Value="ValueLabel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VerticalState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ValueTextBox.(RelativePanel.Below)" Value="ValueLabel" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
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!
http://www.sharpgis.net/post/2015/03/24/Using-Custom-Visual-State-Triggers