Adaptive trigger for XAML UAP Dev

아티클
1/17/2024

The major focus this article will have is how to have the developers build great UX for the Windows 10 applications. This requires us to perform the best practices which we have been doing for decades as Web Developers. The Web Developers had to encompass so how to render pages in different kinds of screen sizes and devices.

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

The offerings of the XAML Toolbox

http://4.bp.blogspot.com/-MQtHTemDKmk/VXLITtG3-mI/AAAAAAAADF0/d9D3rKyKzUk/s320/Screenshot%2B%2528131%2529.png

XAML views is a type of feature which ensures that the XAML will be broken down into multiple parts while the developer still has one single code behind. The usage of this can leverage the app dev the power of how to share the particular XAML to 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 the all the other children. The adaptive story begins from here and hence is going to be a big thing.

Now, having said all the above there the very important point here is the fact that the developer doesn’t need to bother themselves with any of the rendering stuffs. The whole 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 in between collapse and visible.Now we have setters to do they work and simply eliminate the animation.

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

http://3.bp.blogspot.com/-UTQa3u2_pb0/VXLIwW2nFcI/AAAAAAAADF8/OC-e7S0MjCU/s320/Screenshot%2B%2528132%2529.png

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

I will be using Blend 2015.

http://1.bp.blogspot.com/-qfEWHj-wvLM/VXLJK-0tsGI/AAAAAAAADGE/4vsCOKNJQCI/s320/Screenshot%2B%2528123%2529.png

Creating a New Project

http://1.bp.blogspot.com/-pi_QXqnR7DA/VXLJiwqUyGI/AAAAAAAADGM/YVsVfAeW17M/s320/Screenshot%2B%2528124%2529.png

Adding new assets[rectangle]

http://3.bp.blogspot.com/-n2r4HGOaKSc/VXLJ1MVTc0I/AAAAAAAADGU/9KkY8VZrLP4/s320/Screenshot%2B%2528125%2529.png

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

http://2.bp.blogspot.com/-31GgctOmEJI/VXLKW436mrI/AAAAAAAADGc/g_WMxo2jUjg/s320/Screenshot%2B%2528129%2529.png

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

http://4.bp.blogspot.com/-k5TfflJQUyE/VXLKmSsWlMI/AAAAAAAADGk/gIZeCi5_Z38/s320/Screenshot%2B%2528127%2529.png