Adjust Layouts Using Visual State Manager In UWP

In this blog you will learn how to adjust layouts in UWP and how to use Visual State Manager In Microsoft Blend.

Visual State Manager is used to adjust layouts on every device. Depending on the width and height of a device our app layout fits according to the screen size.

There are two ways to work with visual state manager. 

1. To add some code in visual studio XAML page.
   
   
2. To do your work in Microsoft Blend. Blend create your code automatically. All you need to do is just add visual states and set some properties in Blend. 

Step 1: Firstly, create a Blank Universal Windows Project and name it whatever you want.

Step 2: Now add some Grid, between this Grid add a TextBlock.

Step 3: Now go to the States and Add State Group. This will add your Visual State Group. Now what you need is just click on Add State and name your state whatever you want. I have created three different states one state is for phone, second state for Tablet and third state for Desktop.

Step 4: Now select any one of these states and click on Edit Adaptive Triggers. This will open a new PopUp. You just need to click on Add and provide some width and height and click OK. Same is the case for other two states.

Step 5: After this click on the TextBlock, then select your state and give some properties to your TextBlock. Similarly provide the properties to all other states.

Step 6: Now save your project and run it by pressing F5.

Step 7: You'll notice that when you change the size of your screen then there'll be a change in the properties of TextBlock.