Windows 10 Universal Apps Responsive Design For Many Screen Sizes

 

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

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.  

 

Blend

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. 

 

Universal Windows

 

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.

 

Xaml Page

 

The Xaml will render to a page looking like this.

 

Widescreen

 

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.

 

Without States

Not the best...  

 

Visual States

In Blend, Visual States are added using the States tab.

States

Now click on the icon that looks like a comic book dialog box.  That will add a Visual State group.

 

Add

 

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.

Add State

We are adding two states to have two different ways of presenting the user interface.

States

 

Adaptive Trigger

Name them HorizontalVisualState and VerticalVisualState. Now add an Adaptive Trigger to each Visual State.

Adaptive Trigger

Set the minimum window width to 640 for the HorizontalVisualState and 320 for the VerticalVisualState.

Trigger Dialog

 

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.

Row Column

The Vertical layout now looks like this:

Vertical Layout

 

Results

Run the application and make the window size larger and smaller.

Running

 

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.

 

Leave your comment