Working with VisualStateManager

VisualStateManager seems to be a nice addition and it seem to work :).Creating the animations and the creation of different states and the animations is very intutive and easy 

 created a quick app in VS which basically is a listbox binding to some customers and a UserControl shows the selected Customer Details. I wanted to see if I can change some Colors/Properties in the UserControl when the SelectedItem changes in the listbox so Added a VisualStateGroup in Blend called ‘MyStateGroup’ and added Transitions, which basically change Background Foreground Colors

<vsm:VisualStateManager.VisualStateGroups>
 <vsm:VisualStateGroup x:Name=”MyStateGroup”>
    <vsm:VisualStateGroup.Transitions>
        <vsm:VisualTransition Duration=”00:00:01″
                              To=”Customer1″ />
        <vsm:VisualTransition Duration=”00:00:01″
                              To=”Customer2″ />
        <vsm:VisualTransition Duration=”00:00:01″
                              To=”Customer3″ />
        <vsm:VisualTransition Duration=”00:00:01″
                              To=”AllOthers” />
    </vsm:VisualStateGroup.Transitions>
    <vsm:VisualState x:Name=”Customer1″>
        <Storyboard>
            <ColorAnimationUsingKeyFrames BeginTime=”00:00:00″
                                          Duration=”00:00:00.0010000″
                                          Storyboard.TargetName=”LayoutRoot”
                                          Storyboard.TargetProperty=”(Panel.Background).(SolidColorBrush.Color)”>
                <SplineColorKeyFrame KeyTime=”00:00:00″
                                     Value=”#FF988787″ />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </vsm:VisualState>
    <vsm:VisualState x:Name=”Customer2″>
        <Storyboard>
            <ColorAnimationUsingKeyFrames BeginTime=”00:00:00″
                                          Duration=”00:00:00.0010000″
                                          Storyboard.TargetName=”LayoutRoot”
                                          Storyboard.TargetProperty=”(Panel.Background).(SolidColorBrush.Color)”>
                <SplineColorKeyFrame KeyTime=”00:00:00″
                                     Value=”#FFA82727″ />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </vsm:VisualState>
    …
    <vsm:VisualState x:Name=”AllOthers”>
        <Storyboard />
    </vsm:VisualState>
  </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

When the selction changes in the listbox, GoToState Method is called with the control, Name of the VisualState to go to and true as parameters. VisualStates are defined only for the first 3 items, when they are selected we can see the effects.
if we pass false we don’t get any transition effects and the change will be instant.

It would have been nice if we have a list of Transitions to pick from

private void list1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        Customer c = list1.SelectedItem as Customer;
        uc1.DataContext = c;
        if (c.FirstName.Contains(“1”))
            VisualStateManager.GoToState(uc1, “Customer1”, true);
        else if (c.FirstName.Contains(“2”))
            VisualStateManager.GoToState(uc1, “Customer2”, true);
        else if (c.FirstName.Contains(“3”))
            VisualStateManager.GoToState(uc1, “Customer3”, true);
        else
            VisualStateManager.GoToState(uc1, “AllOthers”, true);
    }

you can download the source here

Advertisements

7 thoughts on “Working with VisualStateManager

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s