Dec 162013
 
 December 16, 2013  Posted by at 9:09 am WinRT  Add comments
VisualStates_WindowsStoreApp_Snapped_mode17_thumb.jpg

A lot of changes were made in Windows 8.1 compared to Windows 8, and one of the changes made was the different ‘modes’ – Snapped  mode and Filled  mode. These two modes were replaced with a flexible mode where the user decides how much of the screen the application will use, with a minimum of 500 pixels compared to the 320 pixels that the Snapped mode had. Another change was also removal of the God class as I liked to refer to the LayoutAwarePage which was a class that did a thousands things – and did them well, and one of the things it did was handle the visual states. The only thing you needed to do as  a developer was to have your page inherit from it, add the XAML visual states for the different modes and then it would just magically work. But nothing is gone, its just up to you to do these things, and thankfully its rather easy.

First of all, to support the smallest size which isn’t called snapped mode anymore (and therefore any snapped mode methods are deprecated) you need to open the app manifest file and set the minimum width to 320. Once you’ve done that we can get to work.

VisualStates_WindowsStoreApp_Snapped_mode18

Define you visual stated on the parent element that has the children you want to apply changes to. Here we will just define two states, Default and Small. It wouldn’t surprise me if you only need those two, as the 500 px size can be handled with responsive design. In the smaller state we have very little room, and vertical scrolling is preferred over horizontal. Sometimes you don’t want to display as much information as the other states, but try to provide as much as makes sense.

VisualStates_WindowsStoreApp_Snapped_mode11

Once you’ve defined the states right click on the project and select open in Blend, we are going to cheat and have Blend generate the XAML for us. Blend comes with Visual Studio since 2012 I believe, if you don’t have it then go and download it, it’s a fantastic piece of software.

 

VisualStates_WindowsStoreApp_Snapped_mode13

Once in Blend go to the States tab and select the Small  state. You should see a red rectangle around the designer window and it should say ‘Small state recording is on’.

VisualStates_WindowsStoreApp_Snapped_mode14

Now go ahead and do your changed in the properties window, and when you are happy with the changes turn the recording of. When you do that the XAML will be generated. Save the changes, and go back to visual studio.

 

VisualStates_WindowsStoreApp_Snapped_mode15

When you open Visual Studio again it will ask you if you want to reload the changed files, select yes to all.

 

VisualStates_WindowsStoreApp_Snapped_mode16

You should see the changes now, a lot of messy XAML goodies inside the Small visual state, and names on the elements. We don’t need to ‘revert’ the changes in the Default state, so we will just leave it there, without anything in it.

VisualStates_WindowsStoreApp_Snapped_mode17

If you want to switch styles so you can reuse styles you can of course do that, as you can see in the image below. There are quite a few things you can do, but we wont cover them here.

VisualStates_WindowsStoreApp_Snapped_mode20

If you were to run the app now and try to adjust the app window to the small mode nothing would change, the application doesn’t know that it needs to change state. This is something that the LayoutAwareClass handled before, but you’ll be surprised to see how little code is needed. We are just going to add the code to the code behind file for demonstration purposes, but please abstract this away to a baseclass that the pages can inherit from and don’t clutter up the code behind. The code is however identical.

In the codebehind page in the constructor we will listen for the SizeChanged event, and grab the window size and set the desired visual state through the VisualStateManager using the GoToState method.

VisualStates_WindowsStoreApp_Snapped_mode19

If you now run the application, and resize the width of it to the small size you should see the changes. The first text block has its original size as this is the one that changes style resource and we didn’t specify font size.

VisualStates_WindowsStoreApp_Snapped_mode12

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 15 + 5 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)