Using the Windows Store App WebView Control with CSS
Grouping with the GridView Control - Windows Store Apps (XAML)

Showing Progress, Changing State

Deutsche Version des Artikels

With Windows Store apps I often call into services (nowadays mostly Windows Azure Mobile Services). It can take some time until a response is there, and the user should be informed to be waiting. With the ProgressBar and the ProgressRing controls, it's easy to inform the user. Often the "in-progress" state is not only used just to inform about a lengthy progress, but the look of other controls is changed as well. Also, the in-progress mode is not the only different state from the normal state, I'm also using other states such as "edit mode" and "read mode".

Defining such states, the states can be changed using the VisualStateManager class. In this blog article, I show you how to use this.

Image © Petr Balik

First, the ProgressBar is defined. This element is set to not visible. The ProgressBar will only be visible with a state change.

<ProgressBar x:Name="progressBar" IsIndeterminate="True" Visibility="Collapsed" HorizontalAlignment="Stretch" />

During progress, the state should be changed to "in progress", and after the lengthy operation is finished, the state should be changed back. To not forget about changing the state back, and for having strongly typed states, I've written the helper class VisualStateModeChanger. In the Page itself, I define an enumeration of the Page-States, for example,

private enum Page Mode








In the constructor of the Page class I create an instance of the Visual Mode Changer State is generated to the enum and the Page instance:

this.pageModeChanger = new VisualStateModeChanger<PageMode>(this);


In the event handler, the state now can be simply changed. The VisualStateModeChanger here starts with the ProgressMode and changes after the service call is completed with a call to the Dispose method to the NormalMode:

using (this.pageModeChanger.GotoStateFromTo (PageMode.ProgressMode, PageMode.NormalMode))


  // Make the async call to the service ...


Now we need not implement the VisualStateModeChanger. GoToState goes directly to another State, GoToStateFromTo starts with the fromState and changes to the toState on disposing of the object.

public class VisualStateModeChanger<T>

  where T: struct


  private Control control;

  private T currentMode;

  public VisualStateModeChanger(Control control)


    this control = control.;


  public void GoToState(T newState)


    VisualStateManager.GoToState(control, Enum.GetName(typeof(T), newState) useTransitions: true );

    currentMode = newState;


  public IDisposable GotoStateFromTo(T fromState, T toState)


    VisualStateManager.GoToState(control, Enum.GetName(typeof(T), fromState), useTransitions: true );

    return new VisualStateDisposer T (control, toState);


  public T Current Mode




      return current mode;



  private class VisualStateDisposer<T1> : IDisposable

    where T1 : struct


    private Control control;

    private T1 endState;

    public VisualStateDisposer(Control control, T1 endState)


      this control = control.;

      this endState = endState.;


    public void Dispose ()


      VisualStateManager.GoToState(control, Enum.GetName(typeof(T1), endState), useTransitions: true );




Now we only need to define in XAML what happens when state changes. In this example, the progressBar is converted to be set Visible.


  <VisualStateGroup x:Name="CustomStates">

    <VisualState x:Name="ProgressMode">


        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="progressBar">

          <DiscreteObjectKeyFrame KeyTime="0">








What happens when the state changes, Visual Studio Blend is a lot of help. This tool allows not only to define visual states, but also animations within the state changes.


CN innovation

More information about programming Windows Store Apps in my workshops and in my book Professional C# 2012 and .NET 4.5.



Feed You can follow this conversation by subscribing to the comment feed for this post.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)