How to Make Your Windows 8 Applications Responsive to Visual States

One thing you should always remember when developing windows 8 applications is to make your layout designs flexible so they can adapt to all supported view states. Applications will not be used by a set number of people with the same preferences. They might use your app in landscape or portrait mode, there are times when they would use two applications at the same time by snapping one application beside the other. As developers, it is your job to make sure that no matter what the visual state the user prefers, the application will still look presentable and retain all of its controls.

It would be unconventional though to constantly get pixel comparisons to set the controls’ positions. If you are using panes and panels, refrain from setting fixed sizes. One way to get around this problem is to learn Automatic Layout Coding Standards.

Automatic layouts are the magic in XAML designing. XAML designs primarily use panels to position elements and controls. Panel elements are your parent controls in a design within which you put your controls as child elements. That would then allow you to position the panel and design the application pages as you’d like.

There are 4 Panel Styles that you can use for your applications:

• Canvas
• DockPanel
• Grid
• StackPanel

The Canvas Panel is where you would define areas where you would then position your child elements using absolute positioning. This type of panel style would make automatic layouts impossible. Since you use absolute positioning methods, your elements would stay affixed to the defined coordinates and could possibly get jumbled all over the place. You should then use DockPanel, Grid, StackPanel or a combination of the three to achieve flexible layout designs.
DockPanel allows you to arrange your elements horizontally or vertically which would take up as much available space depending on the order you define and add your elements.
StackPanel on the other hand allows you to arrange your elements in a straight horizontal or vertical line. And lastly, the Grid Panel allows you to define columns and rows.
The Grid Panel is the most flexible panel style you can use since it uses Star sizing functionality to proportionally distribute the available space.

Since its not advised to use Canvas panels for flexible layout designs, here are a few examples on the DockPanel, StackPanel and Grid Styles to help in your designs

DockPanel

    
	 Label1 
	
	 Label2 
	
	 Label3 
	
	 Label4 
	

    

Positioning elements in the DockPanel Style relies on your use of the DockPanel.Dock attribute. This tells the application where the elements would be docked on the screen. It is often interesting to see how the elements are positioned. In this particular set-up Label1 would take up the space on the left side with Label2 on the right side. Normally, the elements would take up as much space as possible and fill in the screen, but seeing that there are two more elements to be inserted into the screen, the “docked” elements would give space and allow the remaining elements be inserted in the middle, with Label3 on top of Label4. You could also specify the DockPanel.Dock attribute for all the elements by inserting it before the first Border element. A DockPanel.Dock = ”Top” attribute for example would arrange the elements from top to bottom with Label 1 appearing at the topmost level.

StackPanel

The StackPanel layout is simple to use. You just define the Orientation attribute and it would arrange the elements in that order. For this example, the Orientation is set to Horizontal, so the buttons would be added from Left to Right, and since there are no set size attributes (i.e Width, Height) for the buttons, it would take up as much space within the StackPanel. Try doing this next example:

The width and height attributes set the size of the buttons and makes it look a lot cleaner than the first one. This would make them appear side by side, which you could further customize by adding a VerticalAlignment attribute on the buttons.

Now, adding in the VerticalAlignment on the attributes would make the buttons cascade from top to bottom and better suit your visual style preference. The only limit you could find on the StackPanel style is your imagination. It actually works better when you use it in combination with the elements’ positioning attributes.

Grid

Element1
Element1
Element1
Element1
Element1
Element1

The Grid Element is the most versatile layout style you can use. You define the columns and rows you would use, and you can even add grids within cells for more complex layouts. In this case, 2 Grid Columns and 3 Grid Rows were defined. You basically set the size of either the columns or rows through ColumnDefinition and RowDefinition attributes such as Height and Width which could contain a set number, “Auto”, and the conventional way of doing it the Star “*”. Star definitions would proportionally distribute the remaining space between grid elements. You can even set a number before the Star, to indicate how many proportions of the remaining space would be allocated.

Visual States

In Windows 8 you can use two applications at the same time, and that is through the Visual State method. You can basically use three types of Visual States for your applications: FullScreenLandscape, Filled, Snapped. FullScreenLandscapeis when the application is the only one on your screen. Snapped and Filled Visual States on the other hand happens when two applications are used with the former taking up only 1/3 of the screen and the latter takes up 2/3.

In FullScreenLandscape and Filled, the applications retain the layout they were designed with, only adjusting in terms of width. Snapped on the other hand, defines a StoryBoard where the application will adjust the elements according to the much shorter width. The StoryBoard contains animations that would ensure smooth transitions into the snapped layout. Each application should have a definition for a Snapped Visual State.

One important note that you should remember when formatting pages for Snapped ViewState, is to define a ScrollViewer attribute. This allows your application vertical scrolling attributes. Also, remember that a Grid Panel outline would not work properly in a Snapped page. You could either use a StackPanel or a ListView to present your elements gracefully

This particular example shows a Snapped layout for an article viewing application. It uses a StackPanel to add the articles from top to bottom. As you can see there is no definition for the Orientation attribute of the StackPanel, but as it is the default setting of the StackPanel layout it would arrange the elements from top to bottom. But even though you define these pages, you still won’t be able to switch between layouts without adding code from the code behind.

Private void VisualStateChanged (object sender, WindowSizeChangedEventArgs e)
{
	string vState = DetermineVisualState(ApplicationView.Value);

	if(vState == “Snapped”)
	{
		// change layout to custom page for Snapped View State
	}
	
	Else
	{
		// return to normal layouts
	}
}

Using the VisualStateChanged Event is the best way to determine whether the application is in Snapped View, and change the layout accordingly.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.