director, software developer, qualified tas / ict teacher.

Published: 6 months ago

Oh snap, Windows 8.1 XAML VisualStateManager cheat sheet.

Even if you’ve been living under a rock for a decade, you’d probably still know a little bit about the responsive web movement and the desire to make every app or site in the known world functional and visible on a screen the size of a watch. Why? Because reasons. That’s why.

The thing with being responsive is that there’s very few people who do it well (I am not one of them, although if you are looking for someone who is, checkout http://mattstow.com), and even if you decided you want to go down that path, it’s not always the easiest to learn.  This is further complicated in Windows 8.1 using XAML, as there’s not that many resources on how to achieve even some of the basics, as well as the traps that await young players.

For this demo, I’ve created a super basic Windows 8.1 C# / XAML app with a few different states. States are the changes in layouts we’ll apply when the app is at a specific screen size:

  • Default – What it looks like in full view
  • Smaller – If we collapse it down a little bit.
  • Even Smaller – again, just a little smaller
  • Snapped – 500px, (this is an option for one of the minimum widths in a Windows 8.1 app).

If you’d like to skip to the end, you can find the source code here: https://github.com/LucasMoffitt/ResponsiveXAMLDemo.

We’re going to start off with our default state. That is, best case scenario and what we’re aiming for. Below is the UI I’ve built for this demo, but you’d have any layout you want.

 I’ve included a little screen width counter in the bottom right hand corner to give us an idea of what we’re dealing with, and used it to decide where to place my UI breakpoints. 

 

Responsive (ish) Xaml Demo

Now that we’ve got a basic layout (I’m using grids), we need to add in all our other states. At the moment unless you want to code it all by hand, Blend will be your best friend and sometimes your worst enemy.

Using blend, open up your current project and view, and head over to the States tab. Here’s where I spent a while pulling hair out… You need to create a VisualStateGroup and then add states to that, you don’t create multiple groups (unless you need to for some other reason).

Blend-States

After you’ve defined your states by name, and then you select one to work with, It automatically logs any changes you make VIA THE PROPERTY WINDOW!!! within that state. It should look like this.

Blend-State-Selection

I make the point of capitalising the “VIA THE PROPERTY WINDOW” because If you don’t use that to make the changes, it won’t make the change in the chosen state, but in the default state instead. Before you know it, your project is a bowl of spaghetti.

If you check your xaml after creating the states you should see similar to the following:

Visual-States

In the code of the current page, I plug in the following to manage the actual changing of states using my GetState method.

public MainPage()
{
InitializeComponent();
SizeChanged += MainPage_SizeChanged;
}

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
VisualStateManager.GoToState(this, GetState(e.NewSize.Width), true);
ScreenWidth.Text = e.NewSize.Width.ToString();
}

Now here is where a designer would take everything into consideration and decide where the content should change for the best user experience. I’m not a designer, so I’ve just looked at the content and where stuff starts to collide, I’ve throw in a breakpoint.

Here’s my GetState method.

private string GetState(double width)
{
if (width <= 500)
return "Snapped";

if (width <= 660)
return "EvenSmaller";

if (width <= 755)
return "Smaller";

return "Default";
}

To summarise the logic I apply in these states:

  • Below 755px, ditch the logo.
  • Below 660, change the title stackpanel from horizontal to vertical, increase some margins, make fonts smaller.
  • At Snapped, move Bill Murray into the right column row 0, content into row 1 and collapse column 0, make the fonts smaller again.

In each state, if you’re working your way to a smaller view, you need to include the visual changes of the previous state. For example in <755px I hide the logo. That means I have to do the same in the <660px state

 

These are how mine look once I’ve changed the properties I’ve needed to in blend. 

Below 755

Below 755

Snapped:

Snapped

Now like I said, this isn’t a visual design lesson, it’s not so much about the theory behind having Bill on top of the text, below it or wrapped around it, but the code you’d need to use to achieve something similar if handed a shiny mock up by a designer.

Here’s some examples from the code and where you’d use them. Some of these are generated by Blend, some are built through extensive searching and hair pulling.

Change the orientation of a stackpanel.

Change-Stack-Panel-Orientation

 

Move an item from one row or column to another.

Change-Row-Col-Position

 

Change a column or row definition (if you need to collapse or expand one).

Change-Row-Col

 

A double animation can be used to change the font of an item, or just any other double based property such as height or width.

Change-Double

 

Change the visibility of a control

Change-Control-Visibility

 

Change the margin of a control

Change-Control-Margin
One Comment.
  1. Dave says:

    Thank you for the tutorial. I was also pulling my hair out with Blend defaulting to turning on recording.

Have a Comment?

Some HTML is OK