originally posted by Laurent Bugnion: (link) - please comment at original post
To make development of WPF and Silverlight applications according to the Model-View-ViewModel pattern easier, I have put together a small toolkit which should speed up the creation of such applications by automating certain tasks.
The toolkit must be installed manually for now. My next task is to prepare an installer, which should allow installing everything automatically, and also checking for upgrades, upgrading automatically and uninstalling the toolkit. For now however, a little manual work must be done.
For more details about the MVVM light toolkit, check this initial blog post.
Also, a web page will be extended over the next few days, and everything will be announced in this blog, so stay tuned.
Getting started in Silverlight
The procedure in Silverlight is extremely similar to the one in WPF. The goal is to have a process which is as similar as possible, as well as the source code.
Creating a new MVVM application
- In Visual Studio 2008, select the menu File, New, Project. Under the Silverlight/Mvvm section, select the MvvmLight project template.
- Add a reference to the GalaSoft.MvvmLight assembly that you installed before. This manual step is needed for the moment, until an installer is created.
- Because of a bug in Silverlight Project Templates, some additional manual steps are needed:
- Right click on the Silverlight project in the Solution explorer and select Properties
- In the project properties, set the Startup Object to the correct choice.
- Set the Xap file name to [YourProjectName].xap
- Press Ctrl-F5 to run the application. This sample application can be modified as needed.
Adding a new ViewModel
If you need a new ViewModel in the MVVM application, follow the steps:
- In Visual Studio, in the Solution explorer, right click on the ViewModel folder and select Add, New Item from the context menu.
- Under Silverlight/Mvvm, select the MvvmViewModel template.
- Enter a name for the new ViewModel and press OK.
- Open the ViewModelLocator class (in the ViewModel folder).
- At the end of the class, type mvvmlocatorproperty to select the corresponding code snippet.
- Press the Tab key to expand the snippet.
- The first replacement in the snippet is the type of the ViewModel you just created.
- Use tab to select the second replacement.
- The second replacement in the snippet is the name of the attribute that will hold the value of the ViewModel. You can choose any identifier suitable for an attribute (field).
- Use tab to select the third replacement.
- The third replacement is the name of the property that you will bind your View’s data context to. Here too you can choose any identifier suitable for a property.
Of course you also need to initialize your ViewModel by entering code in the constructor.
Adding a new View
Of course a ViewModel is tightly associated to a View. After adding a ViewModel, you probably want to add a new View too. In the Silverlight version of the application, a new View is a new UserControl. If you need a more finely granulated user interface, you can link the ViewModel to other UI elements. This scenario is not supported by the toolkit, however, and requires some manual work.
Note also that the toolkit does not support navigation out of the box. This is because there are many ways to do navigation in Silverlight. The project can easily be modified to integrate your preferate way to do navigation.
To add a new UserControl-based view in the application, follow the steps:
- In Visual Studio, in the Solution explorer, right click on the project and select Add, New Item from the context menu.
- Under Silverlight/Mvvm, select the MvvmView template.
- Enter a name and then press OK.
- Open the newly created XAML file.
- Modify the DataContext property to link to the ViewModel property that you added above.
Adding a new bindable property into a ViewModel
Finally, you probably want to add bindable properties in your ViewModel. Follow the steps:
- Open the ViewModel you added before.
- Type mvvminpc to select the corresponding code snippet (“inpc” stands for INotifyPropertyChanged ;))
- Press the tab key to expand the snippet.
- The first replacement is the name of the property that you will bind to.
- Press the tab key to select the second replacement.
- The second replacement is the type of the new property.
- Press the tab key to select the third replacement.
- The third replacement is the name of the attribute that will hold the value of the property. You can choose any identifier suitable for an attribute (field).
- Press the tab key to select the fourth replacement.
- The fourth replacement is the initial value for the property (if any). You can also delete the default value altogether.
Remember to please comment at original post: (link)