Adaptive Trigger For XAML UAP Dev

This requires us to do the best practices that we have been doing for decades as Web Developers. Web Developers must know how to render pages in various kinds of screen sizes and devices.

Now in Windows 10 UAP app dev, the app just has one binary that potentially means that the app must run on many types of devices. So the UI must be adaptive such that the app can be rendered in many types of screen sizes that means from a small phone screen to a surface hub of 85 inches. So there must be some practices that will help us do that.

The following are the offerings of the XAML Toolbox.



XAML views are a type of feature that ensures that the XAML can be broken down into multiple parts whereas the developer still has one single code behind. The usage of this can leverage the app developer the power of how to share the specific XAML for the tester or any other developer and hence ensuring better quality. Also, this is one of the major parts where we can start building our own apps in a better and simplified manner.

XAML RelativePanel ensures that the XAML tree will be more organized and this means that each child will be rendered relative to all the other children. The adaptive story begins from here and hence will be a big thing.

Now, having said all the preceding, the very important point here is that the developer doesn't need to bother themselves with any of the rendering stuff. The entire process is being automatically given by VS2015RC with Blend under the hood.

Visual State setters and triggers

The point before was to animate everything mostly using Object Key Frames when we wanted to go from Collapsed to Visible. But there was nothing between collapse and visible. Now we have setters to do the work and that simply eliminates the animation.

Triggers on the other hand will provide the developer control on when will the VisualState when the MinWindowWidth or MinWindowHeight is set to any given value.



Demo

I will be walking through a small demo of how to make full use of the VisualState. StateTrigger and see the experience.

I will be using Blend 2015.



Create a new project.



Adding a new asset (a rectangle).



Creating three Visual States and then placing the rectangles wherever I want them to look like in that specific video state.



Renaming Visual State to ensure that we have a different Visual State for various screen sizes to use it.



Setting Visual State for Phone and likewise for Tab and Desktop.



And we have the dynamic UI rendering with Adaptive Triggers.

I hope you have had a nice time reading the article. Thanks for your time and patience.