• Utilizing Silverlight's VisualStateManager using MEF & MVVM

    by
    frosty
    Rate this article
    Published on 11-21-2010 02:28 AM  Number of Views: 1229  
    0 Comments Comments
    Attached is a very simple example of how you can utilize a Views VisualStateManager via Databinding to a string property located in it's ViewModel. Please note, I have a small assembly called MVVM.Framework which contains some code I got from Cinch.

    VisualStates is a class out of Cinch I use in this example. Also, I make heavy use of Prism so my MVVM Framework contains references to a Prism Assembly.

    Additionally I use MVMM Light quiet frequently and this project contains a reference to it as well.

    The code for VisualStates is as following:

    Code:
     
public static class VisualStates
    {
        public static readonly DependencyProperty CurrentStateProperty =
            DependencyProperty.RegisterAttached("CurrentState", typeof(String), typeof(VisualStates), new PropertyMetadata(TransitionToState));
        public static string GetCurrentState(DependencyObject obj)
        {
            return (string)obj.GetValue(CurrentStateProperty);
        }
        public static void SetCurrentState(DependencyObject obj, string value)
        {
            obj.SetValue(CurrentStateProperty, value);
        }
        private static void TransitionToState(object sender, DependencyPropertyChangedEventArgs args)
        {
            Control c = sender as Control;
            if (c != null)
            {
                VisualStateManager.GoToState(c, (string)args.NewValue, true);
            }
            else
            {
                throw new ArgumentException("CurrentState is only supported on the Control type");
            }
        }
    }

    For a quick understanding, start in the MainPage.xaml file and look at the VisualStateManager.

    Also, notice how we have bound to our VisualStates class.

    Code:
     
 xmlns:MVVMFrameWork="clr-namespace:MVVM.Framework;assembly=MVVM.Framework.SL"
 MVVMFrameWork:VisualStates.CurrentState="{Binding VisualStateName}"
    Also, I created a button and bound it to a command ChangeVisualStateCommand.

    Code:
     
<Button Content="Change Visual State" HorizontalAlignment="Left" VerticalAlignment="Top" Width="175" Command="{Binding ChangeVisualStateCommand}"/>
    Next go to the MainPageViewModel class.

    Here you'll see our command and public property we bind too.

    The rectangle with change state on MouseEnter and MouseLeave as well as if you click the Button.



    SimpleVSMProject.rar