Windows 8.1: How to use Visual States in your XAML App

There’s no question that XAML’s résumé has a few items in bold. It’s ability to data bind sets it apart from any other technology. It ubiquity across the Microsoft portfolio of products establishes it as the go-to for developers. But, perhaps it is visual states in XAML that ironically provide developers with remarkable capabilities, and remains one of the least used features.

A Visual State groups together the property values, defining how an app should appear. You would create more than one visual state for to allow your app to present itself differently depending on different conditions. For example, a game might have a PlayingState which indicates that the game canvas is visible, while the GameOverState might hide the game canvas, but display the leaderboard. A line of business app might have a UserState which shows typical interaction controls, while the AdminState might show otherwise disabled or hidden capabilities in the app. A visual state can make enormous changes to the UI or might just indicate subtle changes.

Visual States can only be visually edited and created in Blend for Visual Studio – any developer can manually create or edit Visual States in Visual Studio by simply typing them, it’s just easier to get them right in the Blend designer. Moreover, though my demo shows interaction in a Windows Store app, the same functionality is part of Windows Phone, Silverlight, and Windows Presentation Foundation (WPF).

Let’s see how they work

Best of luck!