Post
Ask Question

Visual States In UWP

Universal Windows Platform (UWP) provides you three different kind of layouts:

  1. Fluid Layout
  2. Tailored Layout
  3. Responsive Layout

Out of these three, responsive layout is more optimized to use in UWP apps. In this layout, we use visual states to tweak our UI, depending upon the size of screen, i.e. desktop, phone, etc.

In this article, we'll see how to setup visual states, and develop a very basic responsive UWP app.

You should have Windows 10, Visual Studio 15, and UWP tools installed in your machine. I'll assume that you know the basics of VS 2015 and Windows app development.

Let's get started.

  • Create a new blank Universal Windows App.

    Create

  • Open "MainPage.xaml" from the Solution Explorer.

    solution explorer

  • Select "6" Phone (1920 x 1080) 250% scale" for preview, from the designer window.

    designer

  • Put the following code inside your main grid, in your xaml code. Here, I've simply created four buttons inside a StackPanel, with horizontal and vertical alignment centered.

    code

  • Now, play with visual states. Put the following code right above your StackPanel. Here, I've created a visual state inside a visual state group, using a visual state manager. Focus on Line 14-19 where we've defined state triggers and setters. What we've stated here, is quite simple. If the width of App window exceeds 900, then change the layout of the StackPanel to horizontal. Always put your condition inside <VisualState.StateTriggers>, and actions to be performed should go inside <VisualState.Setters>.

    code

  • Build the project and test in your local machine.

    project

We've covered the basics of visual states. You can do a lot of stuff with this, such as - changing background colors, repositioning the elements, etc. Sky is the limit. So, create some stuff and share with us.

If you've any questions, please don't hesitate to ask in comments.


Similar Articles