The final source code can be downloaded here!
In this post we’ll bind a Command to our Menu so that it’s able to add views to the MainRegion.
Create a MenuViewModel:
Insert following code into the MenuViewModel:
1: public class MenuViewModel
2: {
3: private readonly IRegionManager _regionManager;
4: private readonly IUnityContainer _container;
5:
6: public MenuViewModel(IRegionManager regionManager, IUnityContainer container)
7: {
8: this._regionManager = regionManager;
9: this._container = container;
10: }
11: }
Here we created our first ViewModel that will be the target of our View binding. Our View reference our ViewModel but the ViewModel does not need a reference to a view. The view binds to properties on a ViewModel, which, in turn, exposes data contained in model objects and other state specific to the view. The bindings between view and ViewModel are simple to construct because a ViewModel object is set as the DataContext of a view. If property values in the ViewModel change, those new values automatically propagate to the view via data binding.
When implementing MVVM you need to bind the View and ViewModel, therefore you have the choice between several options. You can declare the ViewModel as a resource in your view xaml, you can also use a presenter class that is responsible to instantiate and bind the View to the ViewModel. This strategy is useful when you need to bind different Views to the same ViewModel. Because we don’t need this flexibility here we chooses for a simpler design; here it’s the view itself that instantiate and bind to his ViewModel. Some could claim that I’m not implementing the pure MVVM pattern as in this application the View knows his ViewModel. I nevertheless chooses for this approach because it’s the simplest way to implement MVVM and also because it enable me to handle UI events like KeyboardPress events gracefully (see folowing post).
In this design, the ViewModel, never the View, performs all modifications made to the model data. The ViewModel and model are unaware of the View but the View reference his ViewModel. This design still provide loose coupling in the sence that the ViewModel does not know about the View but it makes some concessions to the purity of MVVM. Nevertheless these concessions pays dividends in many ways, as you will see in the next series.
To setup this binding update the MenuView class:
1: public partial class MenuView : UserControl
2: {
3: public MenuView(IRegionManager regionManager,IUnityContainer container)
4: {
5: InitializeComponent();
6: this.DataContext = new MenuViewModel(regionManager, container);
7: }
8:
9: public MenuViewModel ViewModel
10: {
11: get
12: {
13: return this.DataContext as MenuViewModel;
14: }
15: }
16: }
When the user clicks a MenuItem in the MenuView, a command on the MenuViewModel should execute to display a view in the MainRegion (see line 36 - MenuViewModel). Here we use the Prism DelegateCommand to implement the Command pattern.
To retrieve the right View we choose for convention over configuration. The LoadViewCommand takes a parameter that is the the name of the View without the suffix View.
The ViewModel has exactly the same name as the View but ends with ViewModel ->see MenuViewModel line 39.
To implement this convention we need to register the Views with a name parameter via the Unity container in the Module Initialization –> see Coremodule line 8 & 9.
Add the following code to the CoreModule.cs:
1: public void Initialize()
2: {
3: this.RegisterViewsWithRegions();
4: }
5:
6: protected virtual void RegisterViewsWithRegions()
7: {
8: this.regionManager.RegisterViewWithRegion(RegionNames.MenuRegion, typeof(MenuView));
9: this.regionManager.RegisterViewWithRegion(RegionNames.StatusbarRegion, typeof(StatusbarView));
10: }
Update the MenuViewModel:
1: public class MenuViewModel : INotifyPropertyChanged
2: {
3: private readonly IRegionManager _regionManager;
4: private readonly IUnityContainer _container;
5:
6: public MenuViewModel(IRegionManager regionManager,IUnityContainer container)
7: {
8: this._regionManager = regionManager;
9: this._container = container;
10: this.LoadViewCommand = new DelegateCommand<object>(this.LoadView, this.CanLoad);
11:
12: }
13:
14: #region PropertyChanged
15: public event PropertyChangedEventHandler PropertyChanged;
16:
17: private void OnPropertyChanged(string propertyName)
18: {
19: PropertyChangedEventHandler handler = this.PropertyChanged;
20: if (handler != null)
21: {
22: handler(this, new PropertyChangedEventArgs(propertyName));
23: }
24: }
25: #endregion
26:
27: #region LoadViewCommand
28: public DelegateCommand<object> LoadViewCommand { get; private set; }
29: public event EventHandler<DataEventArgs<string>> LoadedView;
30:
31: private bool CanLoad(object arg)
32: {
33: return true;
34: }
35:
36: private void LoadView(object obj)
37: {
38: IRegion mainRegion = this._regionManager.Regions[RegionNames.MainRegion];
39: string viewName = obj.ToString() + "View";
40: var view = this._container.Resolve<IView>(viewName);
41: mainRegion.Add(view,viewName);
42: mainRegion.Activate(view);
43: this.OnLoadView(new DataEventArgs<string>(obj.ToString()));
44: }
45:
46: private void OnLoadView(DataEventArgs<string> e)
47: {
48: EventHandler<DataEventArgs<string>> loadHandler = this.LoadedView;
49: if (loadHandler != null)
50: {
51: loadHandler(this, e);
52: }
53: }
54: #endregion
55: }
Bind the LoadViewCommand in our MenuItem.xaml:
1: <Menu Name="menu1">
2: <MenuItem Header="File">
3: <MenuItem Header="New" CommandParameter="CreateFile" Command="{Binding Path=LoadViewCommand}"/>
4: <MenuItem Header="Folder" CommandParameter="CreateFolder" Command="{Binding Path=LoadViewCommand}" />
5: </MenuItem>
6: </Menu>
You should be able to run the application and when you click the menu File, you should see :
This end the Walkthrough series. In these 4 parts we setup the foundation of our client application implementing the MVVM pattern and learned how to use Prism to create a modular architecture.
In the following posts I’ll provide a complete application build on the architecture described in part 0 -> (WPF/WCF/EntityFramework). The application extends this basic design and provide an example on how to use the asynchronous behavior of web services to create responsive applications.
