UWP: New features of Visual State Manager (part 1)

  • Article

If you are going to develop Universal Windows applications for Windows 10 you should think about adaptive interface which will successfully work on all Windows devices with different screen sizes, orientations and resolutions. As I mentioned in my previous post, Visual State Manager is a very good approach to implement adaptive interface. Visual State Managers allow to declare different states of UI with ability to change the current state in runtime. That’s why Microsoft continues to invest resources to this component and today developers can use two more features there.

Setters

If you are going to use animation to change the state you can continue to use old approach with Storyboard but in many cases animation is not needed. For example if you want to change your layout because user changed screen orientation, you need to change properties of controls very quickly. So, developers usually used ObjectAnimationUsingKeyFrame in order to make all needed changes in 0 seconds:

 <Storyboard>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
 </ObjectAnimationUsingKeyFrames>
</Storyboard>

You can see that this approach is not optimal because it requires using several complex objects with many parameters to make the simple thing. That’s why a new XAML element called Setter can be very useful. For example, you can rewrite the same thing using the Setter element:

 

 <VisualState.Setters>
 <Setter Target="comboBox.Visibility" Value="Collapsed"></Setter>
</VisualState.Setters>

It’s much clearer. Developers need to declare a property’s name and a new value in the selected state.

If you want you can mix Setters and Storyboard inside the same state.

Adaptive triggers

Of course it’s not enough to declare all possible states – developers need to implement code which allows to change the state dynamically. For example, if you are going to change the state based on screen size, you need to implement event handler for SizeChanged event and use GoToState method of VisualStateManager class. Sometimes it’s not clear when a state should be applied. Additionally, if you have several state groups and need to combine several states, you can easily make a mistake. That’s why Microsoft implemented an infrastructure for state triggers. It allows to declare one trigger or a set of triggers inside XAML to understand which state should be applied. So, you can declare all needed rules without coding at all.

In the current version Microsoft presented just one trigger – AdaptiveTrigger, but I hope that in release we might see some more triggers. Additionally you can develop your own triggers as well.

In the following code you can see usage of AdaptiveTrigger:

 <VisualState x:Name="Normal">
 <VisualState.Setters>
 <Setter Target="comboBox.Visibility" Value="Visible"></Setter>
 </VisualState.Setters>
 <VisualState.StateTriggers>
 <AdaptiveTrigger MinWindowWidth="700"></AdaptiveTrigger>
 </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Mobile">
 <VisualState.Setters>
 <Setter Target="comboBox.Visibility" Value="Collapsed"></Setter>
 </VisualState.Setters>
 <VisualState.StateTriggers>
 <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
 </VisualState.StateTriggers>
</VisualState>

You can see that AdaptiveTrigger has only two parameters: MinWindowWidth and MinWindowHeight. These parameters allow to switch state of window based on size. In our example, if we have the width of the windows smaller than 700 pixels, we will collapse an element called comboBox.

In the next post I am going to show how to create your own trigger.