VisualStates and the missing Snapped mode made easy in Windows Store Apps
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 LayoutAwarePagewhich 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 Blendgo to the Statestab 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 LayoutAwareClasshandled 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 VisualStateManagerusing the GoToStatemethod.
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
Comments
Leave a comment below, or by email.
Last modified on 2013-12-16