With the release of Visual Studio 2015 and Windows 10. Developers can now create project types called Universal Windows Apps. This new project type contains one assembly which will work on all Windows 10 devices.
Previous to the new releases the older Universal option contained a common library project containing several application projects supporting different devices.
I attempted to port my Windows Store application Market Mining with the old framework. I wanted to port it in order to support Windows phone customers.
The problem I experienced with the older Universal option, which turned me away, was the lack of support for writing save game data to file. I believe I could have re-written the code to support this task, but I feared the thought of re-writing much more of my code.
Visual States are a responsive way to change your Universal Windows Apps (controls, fonts, size) based on width or height screen sizes. They can be entirely created in Xaml.
Visual States are most easily implemented using Blend. Blend is the control designer tool freely installed along with Visual Studio. If you manually excluded Blend during the install, you will definitely want to install it for this feature alone!
I have created a simple example on GitHub, https://github.com/twodawg/UniversalResponsive
These are the steps I took to create the example. Blow the dust off of your Blend install and run it. Create a new Universal Windows project.
Add some controls on the Xaml mainpage. Design it to work with widescreens. We will use Visual States to allow the controls to move on vertical screens.
The Xaml will render to a page looking like this.
The responsive goal will be to move the textbox and button into the first column when the screen width is small. This is how the application looks without Visual States.
Not the best...
In Blend, Visual States are added using the States tab.
Now click on the icon that looks like a comic book dialog box. That will add a Visual State group.
It will create an object names Base and a VisualStateGroup. It will also create a default transition set to 0 seconds. Now add two States.
We are adding two states to have two different ways of presenting the user interface.
Name them HorizontalVisualState and VerticalVisualState. Now add an Adaptive Trigger to each Visual State.
Set the minimum window width to 640 for the HorizontalVisualState and 320 for the VerticalVisualState.
The next step, make sure VerticalVisualState is selected. A red dot should be on. It is going to record which controls are resized or moved. It tracks the changes so that your application can be responsive.
Select the second StackPanel. Change the Grid.Row to 1 and the Grid.Column to 0.
The Vertical layout now looks like this:
Run the application and make the window size larger and smaller.
Imagine having many more Visual States to support many devices. In addition to more Visual States, you can modify many more control properties. A few ideas are having changable font sizes and collapsing controls. Let me know what ideas you end up using.
If you found this article helpful use the tweet button below to spread the word. Thank you.