State Management

Introduction

The state management features of the framework allows you to easily create and configure views having various states. An example is the Button view that has four states: Pressed, Highlighted, Disabled and Default. When you hover the mouse over it the button changes its state to Highlighted and various view fields are changed/animated such as the BackgroundColor. Which view fields changes is based on what state fields and state animations are defined for that state.

State Fields

State fields simplifies creating views that can have different states. Without state fields (before 2.x) you had to create separate view fields for each state, e.g. the Button would have a BackgroundColor, HighlightedBackgroundColor, DisabledBackgroundColor and a PressedBackgroundColor declared in the view model. The Button would then switch between these values as the user hovered the mouse over or pressed the button. This is rather cumbersome specially as the number of states and view fields increases.

With state fields you don't need to create any extra view fields. You only need to define the different state field values in XUML using the following syntax:

StateName-ViewField="Value"

The following theme XUML shows how to set the state fields for the Button view:

Flat.xml


  <Button BackgroundColor="#7d7d7d" FontColor="#ffffff" FontStyle="Normal" Height="50px"
          Highlighted-BackgroundColor="Gray90" 
          Highlighted-FontColor="#000000"
          Pressed-BackgroundColor="#ef706a"
          Pressed-FontColor="#ffffff"
          Disabled-BackgroundColor="#7d7d7d"
          Disabled-FontStyle="Italic"
          Disabled-FontColor="Gray80"
          />

The state fields are usually defined in the theme as you generally want them applied universally. You can define any state field you want, e.g. you could introduce a third state to the button simply by adding another state field:


  <Button BackgroundColor="#7d7d7d" FontColor="#ffffff" FontStyle="Normal" Height="50px"
          ...
          MyState-BackgroundColor="Indigo" 
          />

The button's internal logic never switches to this state but you could change the button's state yourself.

Changing View State

To change the state of a view you can call the method SetState:


  SetState("MyState"); // change state to MyState

  Button.SetState("MyState"); // change state of Button to MyState

  SetState("Default"); // change to default state

If you're creating a custom view having different states, there are some cases where you want to change the state of child views as your view changes state. You can do this by overriding the SetState method:


public override void SetState(string state)
{
    base.SetState(state); // set state of this view

    // set state of a child view
    ChildView.SetState(state);
}

Default State

All views start out in a state called "Default". If you set a view field in XUML without using a state prefix you are changing that view's default state.

One thing to note is that if you change a view to a non-default state and then change a view field in code those changes can be overwritten when the view changes back to its default state.

Animating Between States

When switching between states you have the option to specify which fields should be animated and how. Animating between view states is explained in the Creating Animations tutorial. If you're new to animation using MarkLight I recommend you read through the tutorial from the start.

Setting Nested States

In some advanced cases you want a style in your theme XUML to not only define the state fields on the view currently being styled but also on a nested view. You can do this by using a double dash "--" between the state name and view field. This is used, e.g. when styling the Window view that contains a CloseButton view:

Flat.xml


  <Window Highlighted--CloseButtonColor="#626262" />

If you were to use a single dash you wouldn't set the state field on the button itself but rather on the window. Which means the window has to change its state to Highlighted for the close button to change color. But in this case we want the close button to change color when the button itself changes state to Highlighted.