Mariano Ravinale's Blog

Sharing Experiences

Archive for the ‘Uncategorized’ Category

Visual State Publisher

leave a comment »

The Idea is that when we do doubleClick over the list we’ll see the detail and again doing doubleClick we’ll see the list again.

In this proyect I’ve added some flavor doing some states animations, so in the viewmodel you may see this implementation:

 private ICommand _showDetailCommand;
       public ICommand ShowDetailCommand {
           get {
               if (_showDetailCommand == null) {
                   _showDetailCommand = new RelayCommand<string>(state =>
                       Publisher.VSM.Publish(state)
                   );
               }
               return _showDetailCommand;
           }
       }

       private ICommand _showListCommand;
       public ICommand ShowListCommand {
           get {
               if (_showListCommand == null) {
                   _showListCommand = new RelayCommand<string>(state =>
                        Publisher.VSM.Publish(state)
                   );
               }
               return _showListCommand;
           }
       }

For that we need to implement both commands as you can see and a event publisher implementation for each one, that what really is a Facade that encapsulates a Mediator Pattern implementation that in Mvvm Light is named as Messenger .

 public static class VSM {

           public static void Publish<T>(T message) where T : class {
               Messenger.Default.Send<T>(message, typeof(VSM));
           }

           public static void Register<T>(object reference, Action<T> action) where T : class {
               Messenger.Default.Register<T>(reference, typeof(VSM), action);
           }

            public static void UnRegister<T>(object reference) where T : class {
               Messenger.Default.Unregister<T>(reference);
           }

       }

Ok, but how can I call the View?!??! because the VSM is there!!! there’s a couple solutions for that, but what I really like is to use a behavior, the code is quite reusable and we can attach to any control the code is quite simple:

 public class VSMBehavior : Behavior<FrameworkElement> {

        public VSMBehavior() { }

        protected override void OnAttached() {
            base.OnAttached();

            Publisher.VSM.Register<string>(this, state =>
                VisualStateManager.GoToState(AssociatedObject as Control, state, true)
            );
        }

        protected override void OnDetaching() {
            base.OnDetaching();

            Publisher.VSM.UnRegister<string>(this);
        }
    }

In case you want to see other implementations your are free to see some of them VSM1, VSM2,

But one of the best implementations for MVVM VSM is here the Visual State Aggregator by Jeremy Likness. Based on the Event Agregator Pattern, but is very similar to the Mediator pattern and in Mvvm is already implemented, so I thaught to use it in a similar way.

Ok, but all this really works?

that would be my question if I was reading a post like this, for that reason I’ve made this short video showing the project working:

I really hope this article would be helpful and encorage you to use Ninject Di/Ioc and extensions with Mvvm Light,

Here you can download the project.

The project uses some Data sample provided by Blend, in some future post we can add some real services and some more animations.

Written by @mravinale

febrero 20, 2011 at 12:41 am

Publicado en Uncategorized