Hello!
I have just finished another simple app. This time it’s an application to look for prime numbers. The app is again simple but the reason for that is I wanted to make an approach to something new. This time it is MVVM design pattern.
What is MVVM? It is a software design pattern which goal is to separate user interface form application’s logic and data model.
M – model – data source
V – view – user interface
VM – view model – logic and a ‘go-between’ model and view
Use of MVVM pattern allows for a project to be simultaneously developed by a graphic designer and a coder as the UI does not (and should not) require any code-behind. Another advantage is that the whole logic and data-model can be quickly ported to new UI. Microsoft emphasises use of Blend for Visual Studio which is a graphic-design tool for creating (not only, but also) WPF user interfaces to design UIs. In this case I didn’t follow that advice. XAML editor in Visual Studio is sufficient for me.
So, how the separation is achieved? In EratoWPF case, first I created a model which is PrimeNumbers class in PrimeNumbers.cs file. To be sure that it is working as it should I also created another project called PrimeNumbersSieveTester which is a small console application that tests the class.
Next, I started building the view in XAML with input text boxes and some buttons to run the algorithm or clear inputs.
Finally, I started building the view model. It represents the content of the UI. The view model also privately instantiates the model. The UI will not have access to it.
Binding
To allow the UI use (to display and/or update) properties from view model we use data binding. To achieve that first we need to set data-context for the UI.
|
1 2 3 |
<Window.Resources> <local:ViewModel x:Key="viewModel" /> </Window.Resources> |
The XAML code above will create an object viewModel which is an instance of ViewModel class. The code below will set main grid data-context to viewModel.
|
1 2 3 |
<Grid DataContext="{StaticResource viewModel}"> ... </Grid> |
Now, to bind a property from viewModel to a control in WPF user interfaces:
|
1 |
<TextBox x:Name="inputRangeStart" Text="{Binding Path=InputRangeStart, Mode=TwoWay}" IsEnabled="{Binding Path=InputsEnabled, Mode=OneWay}"/> |
The code above binds Text property of a text box to InputRangeStart property in viewModel and IsEnabled to InputsEnabled. Modes specify type of binding. OneWay allows only to dispaly data from viewModel; TwoWay allows also to update data in viewModel.
This also requires a view model to implement INotifyPropertChanged. It’s quite simple:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//implementation of INotifyPropertyChanged - BEGINS public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(params string[] propertiesChanged) { if(PropertyChanged != null) { foreach(string property in propertiesChanged) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } //implementation of INotifyPropertyChanged - ENDS |
That creates an event handler which is fired every time a property is changed. To set up a property to fire that event it is required to invoke OnPropertyChanged(“PropertyName”); method in a set accessor of this property.
Commands
As it was written earlier in this post, an application designed according to MVVM pattern should not have any code-behind. Therefore, it is required to use commands instead of events.
First, we need to create command class which implements ICommand interface:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
public class ResetCommand :ICommand { public event EventHandler CanExecuteChanged { //logic that handles change if a command can be executed add { CommandManager.RequerySuggested += value; } remove { CommandManager.RequerySuggested -= value; } } public bool CanExecute(object parameter) { if(//conditions when a command is executable) { return false; } else { return true; } } public void Execute(object parameter) { //action to execute when command fired } } |
That is basic implementation of a command. However, if a command operates on view model instance it is advisable to add private and readonly field for view model and create a constructor that sets it to viewModel defined in XAML.
|
1 2 3 4 5 6 7 8 9 10 |
private readonly ViewModel viewModel; public ResetCommand(ViewModel viewModel) { if(viewModel == null) { throw new ArgumentNullException("no viewModel defined"); } this.viewModel = viewModel; } |
After that, we need to create an instance of this command in our view model to allow it to be bound to a control in the UI.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//ResetCommand definition private ICommand resetCommand; public ICommand Reset { get { if(resetCommand == null) { resetCommand = new ResetCommand(this); } return resetCommand; } } //End of ResetCommand definition |
Now, to bind the command to a control:
|
1 |
<Button x:Name="resetInput" Content="Reset" Command="{Binding Path=Reset}"/> |
And that’s pretty much it. This is very basic introduction to MVVM, but good enough for a start. There are other aspects of MVVM (such as converters or dependency properties any many many more that I am not aware of at the moment) but I am sure that I’ll come to that as well. As they say: Rome wasn’t build in a day!
Good luck!
Source code: https://github.com/mickaj/EratoWPF
Readme: https://mkajzer.pl/?page_id=200
Installer: https://mkajzer.pl/download/EratoWPF/EratoWPF_installer.zip
Recommended reading (in Polish): “MVVM i XAML w Visual Studio 2015”, Jacek Matulewski, published by Helion, 2016, ISBN: 978-83-283-2867-9
http://helion.pl/ksiazki/mvvm-i-xaml-w-visual-studio-2015-jacek-matulewski,xamlmv.htm