MVVM Fabric: Using ActionCommand

The first thing I am going to discuss in my series describing my new WPF library, MVVM Fabric, is ActionCommand.  ActionCommand is an implementation of the ICommand interface.  The ICommand interface is interesting because it can be used in WPF and Silverlight as a way to route certain events (such as clicks) from the view to the view model.

Now, there’s nothing stopping you from doing custom implementations of the ICommand interface for every command your application needs.  I found that to be overkill, however, because in every case I just wanted to turn around and call some method when the command was executed.  Enter ActionCommand.

ActionCommand provides a way to create commands that will call methods on your view model when executed.  MVVM Fabric provides two flavors of ActionCommand, a plain one and a generic one.

Plain ActionCommand

The plain ActionCommand is great for those situations where you just want to execute some method on your view model and have no need for a parameter.  It’s usage is quite simple.

The above example has a method called Save which needs to be called from the view.  So, an ICommand property, called SaveCommand, is exposed on the view model.  In the view model’s constructor, SaveCommand is instantiated with an instance of ActionCommand.  The plain ActionCommand takes a plain Action as its parameter.  A plain Action is a method that has no parameters and a void return type.

To leverage this command, we need to wire up something like a Button to it.  With our view model already defined as the DataContext, the following XAML will do that for us.

Now, when the button is clicked our Save method will be executed on the view model.

Generic ActionCommand

The generic flavor of ActionCommand is useful for those situations where you want to execute some method but also need a parameter to be passed in.  WPF allows you to bind a CommandParameter along with the Command.  The generic part of the generic ActionCommand defines what type that CommandParameter is.  The usage is a little more complicated than the plain ActionCommand, but not by much.

As you can see, the generic ActionCommand uses an Action which takes a parameter type as defined by the generic parameter.  The view side looks a little different too.

Notice that we now have a binding set up on the CommandParameter property.  That binding tells WPF what to pass to the Command as a parameter, which ultimately ends up passed to the SelectMovie method. 

NOTE: If you are looking at the sample application included with MVVM Fabric, you’ll notice that the binding expression I am referencing is more complex.  That is due to the fact that the binding occurs in a DataTemplate, which has a Movie as it’s DataContext, the the MovieCommand lives on the view model.  I used some binding-fu to bind to two different DataContexts.

Conclusion

So, there we have it.  Commanding is not the ultimate solution to wiring events from the view to the view model, but it does work well for some cases.  When commanding applies, ActionCommand is a clean and simple way to leverage it.

Share

Introducing MVVM Fabric

I’ve been working with MVVM on WPF applications for well over a year now on two major projects.  As the UI architect for both projects, I was the guy who had to figure out how to make things work in a way that was extensible and testable.  With each WPF project I did that leveraged MVVM, I found there were common problems that needed to be solved.  These common problems include communication between views, decoupled/testable navigation between views and commanding.  To solve these problems, I initially developed a solution and refactored as needed to fit the different scenarios I encountered.

After spending over a year with the solution, I feel that it stabilized well enough to be confident that I had the foundation for a more general purpose solution.   I have taken what I did on both projects and what I learned from them while doing it and created a library that I am calling MVVM Fabric.  The (mostly selfish) goal with MVVM Fabric was to create an MVVM library that I could weave into other projects with minimal effort.

The real trick was taking what I had integrated into my most recent project and extracting it in such a way that I could turn it into a library and keep it usable.

What is MVVM Fabric?

MVVM Fabric is the result of that exercise.  It is a WPF-centric library, written in C# 4.0, which helps address communication, navigation and commanding in an application leveraging MVVM.  It provides core functionality and leverages dependency injection to provide extensibility.

I have posted the library along with a sample application which uses it out on github: https://github.com/brentedwards/MvvmFabric.

If you have attended my presentation WPF with MVVM: From the Trenches or looked at the presentation materials, you will likely notice many similarities.  That presentation and the resulting sample application were both based on the same projects as MVVM Fabric.  So, I refactored that sample application to eat my own dog food and work out some kinks.  The result is something that I am happy with, though will likely be further extended as I (or you) see fit.

I plan to write several blog posts to provide a more in-depth introduction and explanation of the library (and reasons behind the decisions I made) in coming days.

Share

WPF with MVVM: From the Trenches Presentation Materials – Updated

If you have heard my presentation, I hope that you found it useful. To give you a chance to review, here are the presentation materials I used.

Slides: http://www.slideshare.net/brentledwards/wpf-with-mvvm-from-the-trenches
Code: http://github.com/brentedwards/Movies

If you have seen my presentation, I would really appreciate some feedback.

Chippewa Valley Code Camp 2010

Share

Using WPF’s ContentControl to Switch Between Editable and Read-Only Mode

I’ve been working with WPF a lot lately for a client project and I’ve learned some pretty cool tricks along the way.  I am planning to do a bunch of posts describing many of these tricks in the near future.  The first cool trick I will be talking about is how to make a control that switches between editable mode and read-only mode using only XAML, kind of.

I say ‘kind of’ because we will have some code to make it happen, but not in the code-behind.  Rather than use a code-behind, we will be leveraging the Model-View-ViewModel (MVVM) design pattern to keep our code separate and testable.

Let’s dive right into the code by taking a look at the view model.  Since we will be leveraging WPF’s awesome data binding, we need to prepare the view model to allow WPF to keep track of property changes.  To do this, our view model will implement INotifyPropertyChanged.  Doing so will allow the WPF binding engine to listen for changes and update the view accordingly.

You’ll notice that I added a method called NotifyPropertyChanged.  This is just to simplify the process of raising the event from the property setters.

Next up we will set up the properties that the view will be binding to.  Our example is very simple, so there will only be two properties in the view model: IsReadOnly and Name.

Notice that both of the setters make a call to NotifyPropertyChanged, giving the name of the respective property.  That is what will signal the binding engine to update anything that is bound to one of those two properties.

That’s it for the view model.  We’re keeping things simple.  Let’s move on to the view itself.  First things first, we need to set up the view model as the DataContext.

Next up we are going to set up some the style for the ContentControl.

Now, this is where the magic happens.  You’ll see that we have a style here with two DataTriggers.  Both of the DataTriggers bind to the IsReadOnly property of our view model.  One of the DataTriggers handles when IsReadOnly is True and the other handles when IsReadOnly is False.

If IsReadOnly is True, we set the Template to a Grid with a static Label.  The Label is bound to the Name property.

If IsReadOnly is False, we set the Template to a Grid with a TextBox.  The TextBox also binds to the Name property and sets UpdateSourceTrigger=PropertyChanged.  The reason for this is that the binding would normally wait to trigger an update to the property until it loses focus.  Setting UpdateSourceTrigger=PropertyChanged will trigger the update with every key press.

The only missing piece to this puzzle is to place the actual ContentControl.

To use the style we created above, we simply need to bind the Style of the ContentControl to the Style with the Key Name.  You’ll also notice that I have placed a CheckBox in there as well, giving a way to test that the whole operation works.

So, that pretty much wraps it up.  We now have a control that completely changes it’s look based on only a boolean value.  Although this example is quite simple, this approach can be applied to more complex situations.  You can take the solution at the end of the post and poke around a little.

Hopefully this has been helpful!  Have fun with it!

Share

Generic Command Binding with WPF and Prism

I’ve been working with WPF a lot lately for a client project and I’ve learned some pretty cool tricks along the way.  I am planning to do a bunch of posts describing many of these tricks in the near future.  The first cool trick I will be talking about is how to make a control that switches between editable mode and read-only mode using only XAML, kind of.

I say ‘kind of’ because we will have some code to make it happen, but not in the code-behind.  Rather than use a code-behind, we will be leveraging the Model-View-ViewModel (MVVM) design pattern to keep our code separate and testable.

Let’s dive right into the code by taking a look at the view model.  Since we will be leveraging WPF’s awesome data binding, we need to prepare the view model to allow WPF to keep track of property changes.  To do this, our view model will implement INotifyPropertyChanged.  Doing so will allow the WPF binding engine to listen for changes and update the view accordingly.

You’ll notice that I added a method called NotifyPropertyChanged.  This is just to simplify the process of raising the event from the property setters.

Next up we will set up the properties that the view will be binding to.  Our example is very simple, so there will only be two properties in the view model: IsReadOnly and Name.

Notice that both of the setters make a call to NotifyPropertyChanged, giving the name of the respective property.  That is what will signal the binding engine to update anything that is bound to one of those two properties.

That’s it for the view model.  We’re keeping things simple.  Let’s move on to the view itself.  First things first, we need to set up the view model as the DataContext.

Next up we are going to set up some the style for the ContentControl.

Now, this is where the magic happens.  You’ll see that we have a style here with two DataTriggers.  Both of the DataTriggers bind to the IsReadOnly property of our view model.  One of the DataTriggers handles when IsReadOnly is True and the other handles when IsReadOnly is False.

If IsReadOnly is True, we set the Template to a Grid with a static Label.  The Label is bound to the Name property.

If IsReadOnly is False, we set the Template to a Grid with a TextBox.  The TextBox also binds to the Name property and sets UpdateSourceTrigger=PropertyChanged.  The reason for this is that the binding would normally wait to trigger an update to the property until it loses focus.  Setting UpdateSourceTrigger=PropertyChanged will trigger the update with every key press.

The only missing piece to this puzzle is to place the actual ContentControl.

To use the style we created above, we simply need to bind the Style of the ContentControl to the Style with the Key Name.  You’ll also notice that I have placed a CheckBox in there as well, giving a way to test that the whole operation works.

So, that pretty much wraps it up.  We now have a control that completely changes it’s look based on only a boolean value.  Although this example is quite simple, this approach can be applied to more complex situations.  You can take the solution at the end of the post and poke around a little.

Hopefully this has been helpful!  Have fun with it!

Share