Xaml: MVVM Example for Easier Binding
Update 11.07.2013 : Added ICommanding example.
Update 10.25.2013 : Added how to use the CallerMemberName attribute with INotifyPropertyChanged in .Net 4.
This Post describes an MVVM roll your own implementation which provides a basic example of the MVVM and binding.
Create The VM
The view model (VM) implements the INotifyPropertyChange process to report any changes to any bound controls.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
namespace SO_WPF.ViewModels {
public class MainVM : INotifyPropertyChanged
{
private List<string> _Members;
private int _MemberCount;
private bool _IsMembershipAtMax;
public bool IsMembershipAtMax
{
get { return MemberCount > 3; }
}
public int MemberCount
{
get { return _MemberCount; }
set
{
_MemberCount = value;
OnPropertyChanged();
OnPropertyChanged("IsMembershipAtMax");
}
}
public List<string> Members
{
get { return _Members; }
set { _Members = value; OnPropertyChanged(); }
}
public MainVM()
{
// Simulate Asychronous access, such as to a db.
Task.Run(() =>
{
Members = new List<string>() {"Alpha", "Beta", "Gamma", "Omega"};
MemberCount = Members.Count;
});
}
/// <summary>Event raised when a property changes.</summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>Raises the PropertyChanged event.</summary>
/// <param name="propertyName">The name of the property that has changed.</param>
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Main Page Code Behind
We now need to hook up the main page view model to the main page. To do that we will do two things, one, make a non INotifyPropertyChanged property on the class which will hold our view model. Two we will instantiate it, hook it up to the page’s data along with our property. Doing that ensures that everything on our page will get access to our view model, thanks to the data context and how controls inherit their parents data context.
using SO_WPF.ViewModels;
namespace SO_WPF
{
public partial class MainWindow : Window
{
public MainVM ViewModel { get; set; }
public MainWindow()
{
InitializeComponent();
// Set the windows data context so all controls can have it.
DataContext = ViewModel = new MainVM();
}
}
}
Xaml
Now in the xaml we can simply bind to the View Models properties directly without any fuss.
<Window x:Class="SO_WPF.MainWindow"
xmlns:viewModels="clr-namespace:SO_WPF.ViewModels"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance {x:Type viewModels:MainVM}}"
Title="MainWindow"
Height="300"
Width="400">
<StackPanel Orientation="Vertical">
<ListBox Name="lbData"
ItemsSource="{Binding Members}"
SelectionMode="Multiple"
Margin="10" />
<Button Height="30"
Width="80"
Margin="10"
Content="Click Me" />
</StackPanel>
</Window>
In the above code we bind the Members to the listbox just by specifying the Members property name. As to the highlighted lines, I have added them as a debug design option. That lets Visual Studio and Blend know that our data context is our MainVM. That allows for the editor to present us with the options of data binding to the appropriate items, and not having it blank.
This has been a simple example, but a powerful one which can be used as a binding strategy for any WPF, Silverlight or Windows Phone Xaml based applications in C#.
Note though it is not shown, sometimes in styles one needs the element name to bind to, where the data context will fail due to the nature of the style binding, the above page we would bind to the page name as provided (“MainWindow”) and then the property name as usual!
Extra Credit ICommanding
I won’t go into much detail about commanding, but the gist is that the ViewModel is not directly responsible for actions which can happen due to the ICommanding process, but allow for binding operations to occur against those actions and those actions are performed elsewhere usually on a view.
Below is our view model with the commanding public variables which can be consumed by controls (or other classes which have access to the VM).
public class MainVM : INotifyPropertyChanged
{
#region Variables
#region Commanding Operations
public ICommand ToggleEditing { get; set; }
public ICommand ReportError { get; set; }
public ICommand CheckSequence { get; set; }
#endregion
#region Properties
public string ErrorMessage { // the usual INotifyProperty as shown before }
#endregion
#endregion
}
Then on our main page which consumes the view model we then process those requests by creating methods to fulfill those operations. Note that the example below references properties on the VM which were not shown in the example,
but that is not important in this article. But one variable is shown and that is the error message. This allow anyone to push an error using the commanding to the viewmodel which is subsequently shown. That is a peek at the power of commanding right there to allow a dependency injection of setting an error variable to be done outside the VM but used by those which consume the VM!
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Set the windows data context so all controls can have it.
DataContext = ViewModel = new MainVM();
SetupCommanding();
}
private void SetupCommanding()
{
// Commanding using OperationCommand class
ViewModel.ToggleEditing = new OperationCommand((o) => ViewModel.IsEditing = !ViewModel.IsEditing);
ViewModel.ReportError = new OperationCommand((o) => ViewModel.ErrorMessage = (string)o);
ViewModel.CheckSequence = new OperationCommand(CheckSequences, CanExecute);
}
private void CheckSequences(object obj)
{
...
}
private bool CanExecute(object obj)
{
return !ViewModel.UnsavedsExist;
}
}
Finally the ICommanding class used.
public class OperationCommand : ICommand
{
#region Variables
Func<object, bool> canExecute;
Action<object> executeAction;
public event EventHandler CanExecuteChanged;
#endregion
#region Properties
#endregion
#region Construction/Initialization
public OperationCommand(Action<object> executeAction)
: this(executeAction, null)
{
}
public OperationCommand(Action<object> executeAction, Func<object, bool> canExecute)
{
if (executeAction == null)
{
throw new ArgumentNullException("Execute Action was null for ICommanding Operation.");
}
this.executeAction = executeAction;
this.canExecute = canExecute;
}
#endregion
#region Methods
public bool CanExecute(object parameter)
{
bool result = true;
Func<object, bool> canExecuteHandler = this.canExecute;
if (canExecuteHandler != null)
{
result = canExecuteHandler(parameter);
}
return result;
}
public void RaiseCanExecuteChanged()
{
EventHandler handler = this.CanExecuteChanged;
if (handler != null)
{
handler(this, new EventArgs());
}
}
public void Execute(object parameter)
{
this.executeAction(parameter);
}
#endregion
