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