Reusable ItemsControl (e.g. ListViews) + MVVM - wpf

Question

I'm building a MVVM application with WPF that uses a number of relatively complex list views. I've adopted the pattern that the collection that the list view binds to is a collection of View-Model objects, rather than a list of the underlying model objects - I've done this by databinding to an entirely separate column that is populated with code that looks a bit like this
var itemsSource = messages.Select(i => new MessageViewModel(i));
In this case the list view is displaying a list of Message objects to the user. This works OK, however is fairly clunky - expecially when dealing with collection change events.
Now I want to re-use this ListView elsewhere in my application to display a different list of messages to the user in a consistent way - the options that I can see are
Create a list view that derives from ListView and data binds to a collection of type MessageViewModel
Create a control that databinds to a collection of Message objects that either contains or derives from a list view data bound to some internally constructed collection of MessageViewModel
The first option requires that everyone who uses the control run the clunky code that builds and maintains the MessageViewModel collection, the second option encapsulates the maintenance of this view model collection however means that I need to re-implement any member of ListView which exposes the underlying items in the collection so that they can be converted back to the original Message type.
I have a number of similar list views that have similar re-usability problems.
Is there a better approach to dealing with WPF ItemsControl based views that allows for these views to be re-used in an MVVM application?

Answer 1

It looks to me that there are two things you want to reuse:
Exposing a collection of MessageViewModel, so you can bind this collection to the itemsSource of the ListView.
(Optionally), you have a style (or content presenter, or data template) on your specific list view, which you want to reuse. This part may also include code behind, triggers, etc.
You should not mixed the two.
#2 can be achieved with a style which you'll apply to the list view, or a data template. Personally, I like to define a dedicated class as a collection of MessageViewModel, and in your data template set the TargetType to be that class.
#1 is a class that implements Collection, INotifyCollecitonChanged, and INotifyPropertyChanged. Best way (and easiest) would be to merely a wrap it around ObservableCollection. In construction, do the Select method. Then have method for the book keeping.
Below some sample (working!) code. Note there is no code behind for the view. I put the two lists twice in the grid. The usage of ContentControl and DataTemplate is my style - there are dozens of other ways to do it.
======= Model.cs ====
using System;
namespace SO
{
class Message
{
public string from { get; set; }
public string to { get; set; }
public string subject { get; set; }
public DateTime received { get; set; }
}
}
======= ViewModel.cs ====
using System;
using System.Collections.Generic;
using System.Linq;
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace SO
{
class MessageVM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private Message m_model;
public MessageVM( Message model ) {
m_model = model;
}
private void raize( string prop ) {
PropertyChanged( this, new PropertyChangedEventArgs("prop") );
}
public string from {
get { return m_model.from; }
set { m_model.from = value; raize("from"); }
}
public string to {
get { return m_model.to; }
set { m_model.subject = value; raize("to") ); }
}
public string subject {
get { return m_model.subject; }
set { m_model.subject = value; raize("subject") ); }
}
public DateTime received {
get { return m_model.received; }
set { m_model.received = value; raize("recieved") ); }
}
}
class FolderVM : ObservableCollection<MessageVM>
{
public FolderVM( IEnumerable<Message> models )
:base( models.Select( msg => new MessageVM(msg) ) )
{
}
}
class SampleData
{
//static public FolderVM folder { get; set; }
static public FolderVM folder;
static SampleData( )
{
// create a sample model
List<Message> model = new List<Message>();
model.Add( new Message { from = "Bill", to = "Steve", subject = "Resusable Items Control", received = DateTime.Now.AddDays(-4) } );
model.Add( new Message { from = "Steve", to = "Bill", subject = "Resusable Items Control", received = DateTime.Now.AddDays( -3 ) } );
model.Add( new Message { from = "Bill", to = "Jeff", subject = "stack", received = DateTime.Now.AddDays( -2 ) } );
// initialize the view model
folder = new FolderVM( model );
}
}
}
======= MainWindow.xaml ====
<Window x:Class="Paf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:SO"
Title="MainWindow" Height="350" Width="525"
>
<Window.Resources>
<DataTemplate DataType="{x:Type src:FolderVM}">
<ListView ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="from" Width="80" DisplayMemberBinding="{Binding Path=from}" />
<GridViewColumn Header="to" Width="80" DisplayMemberBinding="{Binding Path=to}" />
<GridViewColumn Header="subject" Width="200" DisplayMemberBinding="{Binding Path=subject}" />
<GridViewColumn Header="received" Width="160" DisplayMemberBinding="{Binding Path=received}" />
</GridView>
</ListView.View>
</ListView>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ContentControl Content="{Binding Source={x:Static src:SampleData.folder}}" />
<ContentControl Content="{Binding Source={x:Static src:SampleData.folder}}" />
</StackPanel>
</Window>