Robert's Blog

A Generic Dialog ViewModel

2009-12-04T02:06:00.000-08:00

Introduction

A few months ago I worked on a wpf viewmodel for dialogs, because it seemed strange to me that you needed for instance windows forms dialogs to open or save files in wpf. So I set about creating my own wpf dialogs. After creating the dialog viewmodels there still remained a small issue with the library and also I didn't have much time to write an article about it. I however published the library containing the viewmodels for dialogs with another article on my blog. Someone saw the viewmodel in this library and asked if I could write about it. I had a good look at the code again and solved the small problem and so here's the article. I remembered looking for a nice viewmodel for dialogs a few months ago but couldn't find any. In the mean time since I wrote the viewmodel Sacha Barber published his Cinch framework. Part 3 of his series on the codeproject site describes a dialog service. My solution looks quite different so I hope you find this article still interesting.

The DialogViewModel Definition

The dialog viewmodel is a generic viewmodel. The DialogViewModel expects another viewmodel as a parameter. This parameter is the viewmodel for the content of the dialog window. Below you see the interface of the DialogViewModel and a short description of every property:

As can be seen in the definition of the DialogViewModel class the DialogContent property of the interface must be another viewmodel that uses the ICloneable<V> interface. This property binds to a ContentPresenter class in the dialog window.
The DialogResult property indicates if an Ok button or Cancel button is pressed. Initially it is null. When it becomes true or false the dialog closes.
When you assign an action to the FillDialogContent property, the action is called before the dialog is shown. You can do some stuff before like filling the dialog with content before the dialog appears. When you assign an action to the ProcessNewContent property this action gets called after the Ok button of the dialog is pressed. An example of it's use can be found in my sample project that you can download. In it I created a progressbar dialog that raises it's value every second. In the FillDialogContent action the timer is started.

public interface IDialogViewModel<V>

{

#region Data Members (4)

V DialogContent { get; set; }

bool? DialogResult { get; set; }

Action<V> FillDialogContent { get; set; }

Action<V> ProcessNewContent{ get; set; }

#endregion Data Members

}

/// <summary>

/// The ViewModel for the application's main window.

/// </summary>

public class DialogViewModel<V> : WorkspaceViewModel, IDialogViewModel<V>, IEditableObject

where V : ViewModelBase, ICloneable<V>, new()

Why did I define my viewmodel like this? Suppose for instance you have a Silverlight and a wpf project with some kind of form you want to fill in. In the wpf project you want to fill in the form through a dialog form. In the Silverlight project you maybe want to have the form on some kind of tab page. For both projects you can write one form viewmodel. All that is needed for creating a form viewmodel with extra dialog functionality is defining a dialog viewmodel with the form viewmodel as a parameter like this: DialogViewModel<MyFormViewModel>.

Inner workings of the DialogViewModel

The DialogViewModel is derived from the WorkspaceViewModel. This viewmodel already has Show and Close commands. I added an extra Help Command for dialogs that have a Help button and an Ok Command for when the Ok button is pressed. Below you see the constructor of the viewmodel. The RequestShow and RequestClose events are defined in the WorkspaceViewModel and are called when the Show and Close commands of this viewmodel are called.

public DialogViewModel(V content)

{

DialogContent = content;

_dialogService = new DialogService<V>();

this.RequestShow += new EventHandler(DialogViewModel_RequestShow);

this.RequestClose += new EventHandler(DialogViewModel_RequestClose);

BeginEdit();

}

void DialogViewModel_RequestShow(object sender, EventArgs e)

{

Wpf.MVVM.Views.DialogBehavior.ShowDialog(this);

}

void DialogViewModel_RequestClose(object sender, EventArgs e)

{

CancelEdit();

}

The ShowDialog method resides in a static class called DialogBehavior and is needed to keep the viewmodel separated from the view. The method looks like this and is self explanatory I think:

/// <summary>

/// Shows the dialog.

/// First it creates a dialog window. Then it connects the viewmodel

/// to the DataContext of the dialog. The FillDialogContent action is called

/// so the program can perform some actions before the dialog is shown.

/// The ProcessNewContent action is called so the program can perform some

/// actions after the dialog is shown and the Ok button is pressed.

/// </summary>

/// <param name="viewModel">The viewmodel contained in the dialog viewmodel.</param>

/// <returns></returns>

static public bool ShowDialog<T>(IDialogViewModel<T> viewModel) where T : ViewModelBase, ICloneable<T>, new()

{

bool dialogResult = false;

DialogWindow window = new DialogWindow();

window.DataContext = viewModel;

if (viewModel.FillDialogContent != null)

viewModel.FillDialogContent(viewModel.DialogContent);

bool? result = window.ShowDialog();

if (result.HasValue && result.Value)

{

if (viewModel.ProcessNewContent != null)

viewModel.ProcessNewContent(viewModel.DialogContent);

dialogResult = true;

}

window = null;

return dialogResult;

}

When you look again at the definition of the dialog viewmodel you see that it has an IEditableObject interface. This interface provides functionality to commit or rollback changes to an object that is used as a data source. Below you see the implemented methods. The BeginEdit method is called when the show command is executed. The content of the dialog is saved in the _oldContent variable. And a copy of the original content is created. This copy will be edited in the dialog. This is why the DialogContent property needs a viewmodel that implements the ICloneable<V> interface. This interface has the Clone and MakeCopyTo methods. The dialog viewmodel uses these two methods to make a temporary copy of the original dialog content. When the Cancel button is pressed the CancelEdit method is called and the original content becomes the DialogContent again. When the Ok button is pressed the EndEdit method is called and the content that is changed in the dialog becomes the DialogContent.

public void BeginEdit()

{

if (!Editing)

{

_oldContent = _dialogContent; // The content to be saved.

DialogContent = _dialogContent.Clone(); // The content to be edited.

}

Editing = true;

}

public void CancelEdit()

{

Debug.Assert(true, "CancelEdit");

// The Dialogcontent should become the old class.

if (Editing)

DialogContent = _oldContent;

Editing = false;

DialogResult = false;

}

public void EndEdit()

{

// The edited content is copied to the old content and that becomes the new DialogContent.

DialogContent = DialogContent.MakeCopyTo(_oldContent);

Editing = false;

DialogResult = true;

}

#endregion

}

The View

The dialog window has three buttons and a ContentPresenter control. The xaml code you see below:

<Window x:Class="Wpf.MVVM.Views.DialogWindow"

<!—the libraries used. Removed here for clarity -->

Title="{Binding Path=DisplayName}"

vw:DialogBehavior.CloseWithResultWhenDone="{Binding Path=DialogResult}"

WindowStyle="ToolWindow" WindowStartupLocation="CenterOwner" SizeToContent="WidthAndHeight"

Closing="Window_Closing">

<!—some styles removed here for clarity-->

<Button x:Name="CancelButton" Width="72" IsCancel="True" Command="{Binding Path=CloseCommand}" Visibility="{Binding Path=CancelVisible}">Cancel</Button>

</StackPanel>

</Window>

The DialogResult property of the Window class is not a dependency property. In the static DialogBehavior class there's a dependency property called CloseWithResultWhenDone. When the DialogResult property of the viewmodel changes the dependency property changes and the method OnCloseWithResultWhenDone is called. In this method the DialogResult of the window class is set. When the DialogResult of the window is set the dialog closes. The ContentPresenter binds to the DialogContent of the dialog viewmodel. The way the dialog looks depends on the type of viewmodel of the generic DialogContent property. Every viewmodel needs a datatemplate to connect the viewmodel with a view.

Some Examples

The simplest example I can give you of a real world example is that of a message dialog. The viewmodel of this dialog is defined below:

public class MessageViewModel : ViewModelBase, ICloneable<MessageViewModel>

{

string _message;

public string Message

{

get { return _message; }

set

{

_message = value;

RaisePropertyChanged(() => Message);

}

#region ICloneable<MessageViewModel> Members

public MessageViewModel Clone()

{

return MakeCopyTo(new MessageViewModel());

}

public MessageViewModel MakeCopyTo(MessageViewModel copyTo)

{

copyTo.DisplayName = this.DisplayName;

copyTo.Message = this.Message;

return copyTo;

}

#endregion

}

There's a message property and the ICloneable interface is implemented. The Clone method of this interface creates a new viewmodel and fills it with the current property values of the message viewmodel. The MakeCopyTo method does this for an already existing viewmodel. See the BeginEdit, CancelEdit and EndEdit methods described in the "Inner workings of the DialogViewModel" chapter to see how the methods of the ICloneable interface are used. The DataTemplate of the message viewmodel contains only a label with the Content bound to the Message property of the viewmodel.

</DataTemplate>

You can create a message dialog viewmodel by calling these methods:
DialogViewModel<MessageViewModel> messageViewModel = new DialogViewModel<MessageViewModel>(dvm.MessageViewModel); messageViewModel.CancelVisible = Visibility.Hidden;
You can also create a MessageDialogViewModel like this:

public class MessageDialogViewModel : DialogViewModel<MessageViewModel>

{

public MessageDialogViewModel()

: base()

{

CancelVisible = Visibility.Hidden;

}

public MessageDialogViewModel(MessageViewModel vm) : base(vm) { }

}

For the more complicated viewmodels this is the recommended method. I also created a dialog viewmodel and form for selecting folders and one for a dialog with a progress bar. Most of the code for selecting a folder I "borrowed" from the MEF examples. It's included in an example called XFileExplorer.

Remarks

If you have suggestions or any other comments please let me know. I would really like to hear from you. The source code for Windows Visual Studio 2010 (solution file DialogsMVVM4) and visual studio 2008 (solution file DialogsMVVM) you can download here.

Freeing the axes of the Microsoft toolkit charting control

2009-09-15T07:37:00.000-07:00

Introduction

Most charting tools produce the same kind of charts. A chart has a vertical axis on the left (or right) and a horizontal axis on the bottom (or top). You can add more axes but they are stuck to the sides of the chart and keep occupying the whole length of the chart area. In medical applications we want to have charts like the one below. For the interested: The first five signals are EEG signals, (the electrical activity in the brain). Below the EEG signals are the patients breathing signal, the blood pressure and the heartbeat (ECG) signal.

The signals are stacked on top of each other. If one signal gets big it can reach the space of the signal below or above it. So there’s one plot area for all signals. As I said before all free WPF chart tools I know don’t have the option of creating a chart like the picture above. In my job as a programmer in a hospital I often need charts like these to display medical data. In this blog post I want to talk about my first attempt to create a chart like the one above.

Microsoft’s Charting Control

In June 2009 Microsoft released a charting control as part of their WPF toolkit. Because they released the source code of the toolkit it is easy to extend the functionality of the original toolkit. The main class of the charting control is the Chart class. This class has a property called ChartArea of type EdgePanel that is derived from the Panel class. The EdgePanel class overrides the ArrangeOverride and MeasureOverride methods of the Panel class to arrange the axes. In my first attempt to create a chart like the EEG chart above I created a new class called StackedPanel and tried to arrange the axes on the left on top of each other. The EdgePanel class was then replaced with the StackedPanel class. I asked a question about it here.
Later I noticed that all classes derived from Axis in the toolkit can be used without the need for any other classes of the toolkit. So you can for instance take the LinearAxis class set it’s location, orientation, minimum and maximum values, put it on a canvas and it displays a nice looking axis. That made me decide to write my own simple chart class. To keep things simple I just wanted to use the classes derived from the base Axis class of Microsoft’s Charting Control. I considered using the LineSeries class to show the data, but that would make my Chart class more complicated. I decided to create my own FastLineSeries class because I need a class that can show large amounts of data anyway and the LineSeries in Microsoft’s class uses a PolyLine class to draw it’s data. There are faster methods to draw lines in WPF then with a PolyLine.
The source code that comes with this article contains a solution with three small programs and a library. The contents of the solution are:

Thumbs: A small demonstration program described in the paragraph below.
FreeAxes: A program that allows you to drag and resize the all axes.
StackedAxes: A program that stacks all vertical axes.
Wpf.Axes: A library that the FreeAxes and StackedAxes programs use.

Sukram’s WPF Diagram Designer

I wanted to be able to drag the axes of my program around and resize them. The plot area should adapt to the location and the size of the axes. There is a very nice series of articles on the CodeProject site by Sukram called WPF Diagram Designer. The first article of this series describes how you can move and resize any control that you put in a ContentControl. The window below shows the first program I created for testing purposes. The black rectangles represent the axes and the gray border is the plot area. In the upper left corner is a checkbox. If you select the checkbox the rectangles can be resized. If you deselect the checkbox the rectangles only can be moved. If you move the axes around you see that the plot area changes according to the position and size of the axes.

The FakeAxis class in this test program is derived from the Control class and implements the IAxis interface of the Microsoft Chart Control. The most important part of the code is shown below:

    public class FakeAxis : Control, IAxis
    {
        static FakeAxis()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(FakeAxis), new FrameworkPropertyMetadata(typeof(FakeAxis)));
        }
 
        /// <summary>
        /// Instantiates a new instance of the Axis class.
        /// </summary>
        public FakeAxis()
        {
            RegisteredListeners = new ObservableCollection<IAxisListener>();
            this.RegisteredListeners.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(RegisteredListeners_CollectionChanged);
            LayoutUpdated += new EventHandler(Axis_LayoutUpdated);
        }
 
        void Axis_LayoutUpdated(object sender, EventArgs e)
        {
            Invalidate();
        }
 
        internal void Invalidate()
        {
            OnInvalidated(new RoutedEventArgs());
        }
 
        /// <summary>
        /// Raises the invalidated event.
        /// </summary>
        /// <param name="args">Information about the event.</param>
        protected virtual void OnInvalidated(RoutedEventArgs args)
        {
            foreach (IAxisListener listener in RegisteredListeners)
            {
                listener.AxisInvalidated(this);
            }
        }

The IAxis interface has a property called RegisteredListeners. The plot area implements the IAxisListener interface and its AxisInvalidated method is called when an Axis changes its position or size. When the chart canvas is initialized all components that implement the IAxisListener interface are added to the RegisteredListeners collection of the axes:

        void ChartCanvas_Initialized(object sender, EventArgs e)
        {
            ChartArea area = Children.OfType<ChartArea>().First();
            IEnumerable<ContentControl> ctrls = Children.OfType<ContentControl>();
            IEnumerable<FakeAxis> axes = ctrls.Select(c => c.Content).OfType<FakeAxis>();
            foreach (FakeAxis axis in axes)
            {
                area.Axes.Add(axis);
                axis.RegisteredListeners.Add(area);
                axis.InvalidateVisual();
            }
        }

The class library for the stacked axes and for freely movable axes

Below is a class diagram of library. The FreePanel class you can use to move axes freely around it’s canvas. The StackedPanel class will stack the available axes with vertical orientation on top of each other. The FastLineSeries is for drawing the line series.

I used an msdn article by Charles Petzold as the starting point for my FastLineSeries class. I won’t describe the inner workings of this class. If you want to read more about fast drawing in WPF you can read the article. I changed Petzold’s code so instead of displaying a scatter plot it displays a line plot now. This class I named GeometryPlotVisuals. The FastLineSeries derives form the GeometryPlotVisuals class and implements the IAxisListener interface. The AxisInvalidated method of the FastLineSeries looks like this:

        public void AxisInvalidated(IAxis axis)
        {
            double scaleY = calculateScale(DependentAxis as NumericAxis);
            Scale.ScaleY = -scaleY;
            Scale.ScaleX = calculateScale(IndependentAxis as NumericAxis);
            Translate.Y = DependentAxis.ActualHeight;
            Translate.X = 0;
            Clip = SeriesClip;
        }
 
        private double calculateScale(NumericAxis axis){
            UnitValue? max = axis.GetPlotAreaCoordinate(axis.Maximum);
            UnitValue? min = axis.GetPlotAreaCoordinate(axis.Minimum);
            return (max.Value.Value - min.Value.Value) / (axis.Maximum.Value - axis.Minimum.Value);
        }

The FastLineSeries uses the ScaleTransform and TranslateTransform classes to position the line series. I’m not really sure about using the ScaleTransform to position the series because it also changes the thickness of the line. I’ll probably change this in the future.
The last line of the AxisInvalidated method sets the clipping region of the chart area so that values outside of the chart area become invisible.
ChartPanel is the base class for the classes FreePanel and StackedPanel. Because Sukram’s Diagram Designer classes need a Canvas I had to use the Canvas class as it’s base class and not the Panel class. The class searches for axes and series that are placed on it’s canvas and adds them to the Axes and Series ObservableCollections.

An example program with movable and resizable axes

I was surprised how easy it was to display an axis of Microsoft’s chart control. I just had to replace the axis I created in my test program with the LinearAxis class of the chart control.
<chart:LinearAxis x:Key="xAxis"

                              Orientation="X"

                              Location="Bottom"

                              Minimum="0"

                              Maximum="100"

                              Interval="10"

                              IsHitTestVisible="False"/>

Below is my definition for the x axis of the program. The Style property of the ContentControl uses a static resource called DesignerItemStyle. This style is created by Sukram to give drag and drop and resize capabilities to a ContentControl. Just put the axis in a ContentControl and you can move it around and resize it:

                <ContentControl Width="402"

                                Height="50"

                                Padding="1"

                                Canvas.Left="55"

                                Canvas.Top="329"

                                Style="{StaticResource DesignerItemStyle}"

                                Content="{StaticResource xAxis}"></ContentControl>

Every time you move or resize an axis that is placed on a FreePanel canvas. The MeasureOverride and ArrangeOverride methods are called. In the FreePanel class we don’t need the MeasureOverride method and only use the ArrangeOverride method. The ArrangeOverride method calculates the new location and calls the AxisInvalidated method for all the FastLineSeries the class holds.

        protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)

            if (this._vertCtrls == null || this._horzCtrls == null)

                return finalSize;

            vertAxesPositions.Clear(); horzAxesPositions.Clear();

            // fill the dictionary with left positions

            foreach (ContentControl child in _horzCtrls)

                horzAxesPositions.Add(

                    new KeyValuePair<UIElement, double>(child.Content as UIElement, Canvas.GetLeft(child)));

            // fill the dictionary with top positions

            foreach (ContentControl child in _vertCtrls)

                vertAxesPositions.Add(

                    new KeyValuePair<UIElement, double>(child.Content as UIElement, Canvas.GetTop(child)));

            positionSeries();

            return base.ArrangeOverride(finalSize);

        /// <summary>

        /// Positions the series.

        /// </summary>

        void positionSeries()

            // look for the minimum left position of the axes

            double left = _horzCtrls.Select(p => Canvas.GetLeft(p)).Min();

            // look for the minimum top position of the axes

            double top = _vertCtrls.Select(p => Canvas.GetTop(p)).Min();

            // look for the maximum bottom position of the axes

            double bottom = _vertCtrls.Select(p => Canvas.GetTop(p) + p.Height).Max();

            // look for the maximum right position of the axes

            double right = _horzCtrls.Select(p => Canvas.GetLeft(p) + p.Width).Max();

            if (Series != null)

                foreach (FastLineSeries child in Series)

                    if (child.IndependentAxis == null || child.DependentAxis == null)

                        continue;

                    double curX = horzAxesPositions[child.IndependentAxis];

                    double curY = vertAxesPositions[child.DependentAxis];

                    Canvas.SetLeft(child, curX);

                    Canvas.SetTop(child, curY);

                    child.SeriesClip = new RectangleGeometry(

                       new Rect(

0,

                           top - curY,

                           right - left,

                           bottom - top)); ;

                    child.AxisInvalidated(null);

A Stacked chart

The stacked chart needed more complicated MeasureOverride and ArrangeOverride methods. First because it needs to look at the size of the panel and change the size of the axes accordingly. Also I added a Proportion attached property that made things more complicated. The Proportion property allows you to set the size of an axis based on a given percentage. For instance, if you have two vertical axes where one has a Proportion value of 0.25 and the other of 0.75 the first only occupies 25% of the total vertical space available. Alec Bryte has a nice blog article about it that you can find here.

Remarks

The program described was created just as a proof of principle for myself. I can now create axes and move them around. The attached series adapts to the size and position of the axes. I know that there is still a lot of room for improvement. There’s still a lot of work to do before I have something that can display medical data like the first picture in this article.
As I said in the introduction in my first attempt I tried to create a stacked chart with the LineSeries of the toolkit. That turned out to be very complicated, but I’m still looking at it. Here are some of the things I still have to do:

Integrate my chart class more closely with the WPF toolkit’s Chart Control.
Be able to display all data series types of the toolkit in my chart.
Derive my FastLineSeries from a Series abstract class of the toolkit.

I hope to get some feedback on how to improve the program and proceed further with this.
The source code for the program you can download here. The WPF toolkit isn’t included in the zip file. You can download the WPF toolkit here. Download the WPFToolkitBinariesAndSource zip file and unzip it. Install the toolkit by running the installation program in the binaries file. Include the “Controls.DataVisualization.Toolkit.csproj” that is in the folder “WPFToolkitBinariesAndSource\Toolkit-release\DataVisualization” of the toolkit and make a reference to the project in all the projects of the solution.
This program was created in the Clinical Neurophysiology department of the Leiden University Medical Centre in the Netherlands.

A viewmodel for the fluidkit transition control

2009-07-10T03:09:00.001-07:00

I was trying to create a program that has several pages with only one page visible at a time. If you want to see another page you should press a button with the name of that page.
The first thing I tried was using a TabControl. The problem with the TabControl was that each time you left a page the page would be unloaded. This is not the behaviour I wanted. The pages should stay in memory even when they aren’t visible. I searched for a solution and found this blog entry that described an extension to the tabcontrol called TabControlEx. I tried it out and indeed the items in the tab stayed in memory, but I couldn’t get it to work the way I wanted it.
Then I remembered the fluidkit library created by Pavan Podila. This library has a class called TransitionPresenter that derives from ItemsControl. You can make a slideshow with the items you add to this control. The items you add stay in memory when they aren’t shown on screen. Because I always try to write my programs with the MVVM pattern I looked for a viewmodel for this class. I found a blog entry by Jeremy Alles who extended the TransitionPresenter and created a viewmodel for his newly created class. The strange thing was that his new class loaded the visible pages and unloaded the invisible pages. I tried to change this behaviour in his class but couldn’t figure out what happened and gave up.

After my failed attempts with the TabControl and TabControlEx I decided to create my own viewmodel for the TransitionPresenter class. It turned out that the solution was relative easy. First I had to extend the TransitionPresenter class. I used attached properties to extend the behaviour of the TransitionPresenter class. I basically added one new attached dependency property. When you set the property called WorkSpaceNumber there will be a transition to the slide with this index number. If the index of the new slide is higher than the old one the transition animation will make a forward movement if the index is lower the transition will go backward. The static behaviour class you can see below:

public static class TransitionPresenterBehaviour
    {
        public static int GetWorkspaceNumber(DependencyObject obj)
        {
            return (int)obj.GetValue(WorkspaceNumberProperty);
        }
 
        public static void SetWorkspaceNumber(DependencyObject obj, int value)
        {
            obj.SetValue(WorkspaceNumberProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for WorkspaceNumber.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty WorkspaceNumberProperty =
            DependencyProperty.RegisterAttached("WorkspaceNumber", typeof(int),
            typeof(TransitionPresenterBehaviour),
            new UIPropertyMetadata(-1, OnIndexChanged));
 
        private static void OnIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            TransitionPresenter tp = (TransitionPresenter)d;
            int newIndex = (int)e.NewValue;
            int oldIndex = (int)e.OldValue;
            FrameworkElement elNew = (FrameworkElement)tp.ItemContainerGenerator.ContainerFromItem(tp.Items[newIndex]);
            FrameworkElement elOld = (oldIndex > -1) ?
                (FrameworkElement)tp.ItemContainerGenerator.ContainerFromItem(tp.Items[oldIndex]) : elNew;
            if (elNew != null)
            {
                TransitionPresenterBehaviour.SetForWard(tp,newIndex > oldIndex);
                tp.ApplyTransition(elOld, elNew);
            }
        }
 
        public static bool GetForWard(DependencyObject obj)
        {
            return (bool)obj.GetValue(ForWardProperty);
        }
 
        public static void SetForWard(DependencyObject obj, bool value)
        {
            obj.SetValue(ForWardProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for ForWard.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ForWardProperty =
            DependencyProperty.RegisterAttached("ForWard", typeof(bool), 
            typeof(TransitionPresenterBehaviour),
            new UIPropertyMetadata(false, ForwardChanged));
 
        private static void ForwardChanged(DependencyObject d,
            DependencyPropertyChangedEventArgs e)
        {
            TransitionPresenter tp = (TransitionPresenter)d;
            forwardChanged(tp,(bool)e.OldValue, (bool)e.NewValue);
        }
 
        private static void forwardChanged(TransitionPresenter tp, bool oldRot, bool newRot)
        {
            if (oldRot == newRot)
                return ;
            if (tp.Transition is SlideTransition)
                (tp.Transition as SlideTransition).Direction = (newRot) ? Direction.LeftToRight : Direction.RightToLeft;
            if (tp.Transition is CubeTransition)
                (tp.Transition as CubeTransition).Rotation = (newRot) ? Direction.LeftToRight : Direction.RightToLeft;
            if (tp.Transition is FlipTransition)
                (tp.Transition as FlipTransition).Rotation = (newRot) ? Direction.LeftToRight : Direction.RightToLeft;
            if (tp.Transition is GenieTransition)
                (tp.Transition as GenieTransition).EffectType = (newRot) ? GenieEffectType.IntoLamp : GenieEffectType.OutOfLamp;
        }
    }

In the OnIndexChanged method the actual transition happens. Before the transition the program checks if the new index is higher than the old one. If this is the case a forward transition is shown otherwise a backward one.
The viewmodel for the TransitionPresenterEx class I called FluidViewModel. It is derived it from MainWindowViewModel, a class that Josh Smith describes in this article. I made a few changes to this class and it’s underlying classes. I described some of these changes in my previous blogs here and here. The source code for the FluidViewModel looks like this:

    /// <summary>

    /// A viewmodel for the fluidkit transitionpresenter class.

    /// </summary>

    public class FluidViewModel : MainWindowViewModel

        /// <summary>

        /// Initializes a new instance of the <see cref="FluidViewModel"/> class.

        /// </summary>

        public FluidViewModel(): base()

            this._collectionView.CurrentChanged += new EventHandler(_collectionView_CurrentChanged);

            this._collectionView.Refresh();

        /// <summary>

        /// Handles the CurrentChanged event of the _collectionView control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

        void _collectionView_CurrentChanged(object sender, EventArgs e)

            int to = this.Workspaces.IndexOf(this.ActiveWorkSpace);

            // to update the Direction property

            WorkspaceNumber=to;

        private bool forward;

        /// <summary>

        /// Gets or sets the direction in which the pages slide.

        /// </summary>

        /// <value>The direction.</value>

        public bool Forward

get

                return this.forward;

set

                this.forward = value;

                RaisePropertyChanged(() => Forward);

        private int workspaceNumber=-1, oldWorkspaceNr;

        /// <summary>

        /// Gets or sets the workspace number.

        /// </summary>

        /// <value>The workspace number.</value>

        public int WorkspaceNumber

get

                return this.workspaceNumber;

set

                oldWorkspaceNr = this.workspaceNumber;

                this.workspaceNumber = value;

                // check the orientation of the change made by the user

                this.Forward = (this.oldWorkspaceNr < this.workspaceNumber);

                if (workspaceNumber != oldWorkspaceNr)

                    RaisePropertyChanged(() => WorkspaceNumber);

        /// <summary>

        /// Creates the commands.

        /// </summary>

        /// <returns>returns a list of commands</returns>

        protected override List<CommandViewModel> CreateCommands()

            List<CommandViewModel> commands = new List<CommandViewModel>();

            foreach (WorkspaceViewModel ws in Workspaces)

                commands.Add(new CommandViewModel(ws.DisplayName, ws.ShowCommand));

            return commands;

There is a property called WorkSpaceNumber with which you can get and set the currently selected slide. The Forward property is set to true if the old workspace number is smaller than the new workspace number. The CreateCommands method is an abstract method of the MainWindowViewModel and create a list of commands in the FluidViewModel that are used to show the workspace if executed.
As an example I created a small program with two images and two buttons. First a viewmodel for the main window of the program must be created. This is now very simple:

    public class ImagesViewModel:FluidViewModel

        Image1ViewModel image1;

        public Image1ViewModel Image1

            get { return image1; }

            private set

                image1 = value;

                RaisePropertyChanged(() => Image1);

        Image2ViewModel image2;

        public Image2ViewModel Image2

            get { return image2; }

            private set

                image2 = value;

                RaisePropertyChanged(() => Image2);

        public ImagesViewModel()

            image1 = new Image1ViewModel(this);

            image2 = new Image2ViewModel(this);

            Workspaces.Add(image1);

            Workspaces.Add(image2);

Image1ViewModel and Image2ViewModel are both derived from the WorkspacesViewModel and are added to the list of workspaces of the MainWindowViewModel in the constructor.
Connecting the ImagesViewModel to the TransitionPresenterEx control is now very easy. An example you can see in the xaml code below:

       <DockPanel>
            <ListBox DockPanel.Dock="Top" ItemsSource="{Binding Path=Commands}" 
                     ItemTemplate="{StaticResource CommandsTemplate}">
            </ListBox>
            <ContentControl Name="workspacesContent" 
                            Content="{Binding}"
                            ContentTemplate="{StaticResource WorkspacesTemplate}"/>
        </DockPanel>

On top is a listbox. The ItemsSource property of the listbox binds to the Commands property of the FluidViewModel. A DataTemplate called CommandsTemplate changes the commands into buttons that hold the ShowCommand commands.
The datatemplate called WorkspacesTemplate changes the ImagesViewModel in a TransionPresenterEx object.
The most important datatemplates and styles that are used you can see below:

    <DataTemplate DataType="{x:Type vm:Image1ViewModel}">
        <vw:Image1Control/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:Image2ViewModel}">
        <vw:Image2Control/>
    </DataTemplate>
    <DataTemplate x:Key="CommandsTemplate">
        <Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}">
        </Button>
    </DataTemplate>
    <fl:SlideTransition x:Key="SlideTransition" />
    <DataTemplate x:Key="WorkspacesTemplate" >
        <fl:TransitionPresenter
            RestDuration="0:0:3"
            Transition="{StaticResource SlideTransition}"
            ItemsSource="{Binding Path=Workspaces}"
            vw:TransitionPresenterBehaviour.WorkspaceNumber="{Binding Path=WorkspaceNumber}">
        </fl:TransitionPresenter>
    </DataTemplate>

The source code you can download here. You also have to download the fluidkit library here and make a reference to it in the demonstration program. Below you can see an image of the program.

A Viewmodel for the ObservableCollection

2009-06-04T07:11:00.000-07:00

Introduction

In my previous post I wrote about the MasterDetailViewModel. A viewmodel for the navigation of master-detail tables. I briefly mentioned you could extend its base class, the NavigationViewModel class, and create a viewmodel for an ObservableCollection. In this post I will describe such a viewmodel that I called the ObservableViewModel, and give an example of its usage. Because the ObservableViewModel shared a lot of functionality with the MasterDetailViewModel an intermediate viewmodel called CollectionViewModel is needed. The class diagram of the viewmodels now looks like the figure below:
When I first started learning about the Model-View-ViewModel (MVVM) pattern, I saw this video of Jason Dollinger on how to create a program with such a pattern. I wanted to have a close look at the code to see how everything worked. But there was no source code available so I recreated the code by watching the video. I will use a changed version of this program to demonstrate the ObservableViewModel.

The CollectionViewModel

In my previous post about the Master-Detail ViewModel I already described the NavigationViewModel and explained that it is an abstract class that holds all the commands to navigate through a collection and change it. The CollectionViewModel is derived from it and the most important job for this class is to hold a property called ViewSource of type CollectionViewSource. CollectionViewSource has a View property that holds the actual view and a Source property that holds the source collection. The View property is of type ICollectionView. The microsoft documentation says about it: You can think of a collection view as a layer on top of a binding source collection that allows you to navigate and display the collection based on sort, filter, and group queries, all without having to manipulate the underlying source collection itself.

        /// <summary>

        /// Gets the view source.

        /// </summary>

        /// <value>The view source.</value>

        public CollectionViewSource ViewSource { get; private set; }

        /// <summary>

        /// Gets the View of the ViewSource.

        /// </summary>

        protected ICollectionView IView { get { return ViewSource.View; } }

So IView just returns ViewSource’s View property and is primarily used to shorten notation. The MasterDetailViewModel derives from the CollectionViewModel and has a property called View of type BindingListCollectionView. BindingListCollectionView is the default view for collections that implement IBindingListView or IBindingList. The source code from the MasterDetailViewModel for this View property looks like this:

        /// <summary>

        /// Gets the view.

        /// </summary>

        /// <value>The view.</value>

        public BindingListCollectionView View { get { return (BindingListCollectionView)IView; } }

The ObservableViewModel

The ObservableViewModel derives from the CollectionViewModel. Its View property is of type ListCollectionView this type is the default view for collections that implement IList. The code for this property you see below:

        /// <summary>

        /// Gets the view.

        /// </summary>

        /// <value>The view.</value>

        public ListCollectionView View { get { return (ListCollectionView)IView; } }

You see it just returns ViewSource’s View property as a ListCollectionView. The ObservableViewModel also implements the add and remove commands of the NavigationViewModel. The ICollectionView type doesn’t have Add and Remove methods. But the ListCollectionView and BindingListCollectionView have them so they can only be implemented in the ObservableViewModel.

Implementation example: A watch list for stock quotes

As I said in the introduction I will change the source code of the original stock quote watch list program by Jason Dollinger so that it will implement the ObservableViewModel. The original program just had a subscribe button. For that button a subscribe command was created. This command is now replaced with the add command of ObservableViewModel. I added a remove button so that a selected stock quote can be removed from the watch list. The Navigation commands like previous, next, first and last are commands that are part of the ObservableViewModel but are not implemented in my program. The model of the MVVM pattern is an object of type RandomQuoteSource. This object creates stock quotes randomly and has an event called QuoteArrived that is raised every time a quote is created. The view of the program you see below. The viewmodel is called WatchListViewModel and as you can see below has the ObservableViewModel as its base class. In the constructor below you see that a qoute source of type IQuoteSource is passed in the constructor. The _quoteMap field is a dictionary that keeps track of the symbols that are used.

    /// <summary>

    /// Viewmodel for a watchlist of incoming stock quotes

    /// </summary>

    public class WatchlistViewModel : ObservableViewModel<Quote, QuoteViewModel>

        IQuoteSource _source;

        Dictionary<string, Quote> _quoteMap = new Dictionary<string, Quote>();

        string _lastSymbol, _symbol, _deleteText;

        /// <summary>

        /// Initializes a new instance of the <see cref="WatchlistViewModel"/> class.

        /// </summary>

        /// <param name="source">The source of incoming stock quotes.</param>

        public WatchlistViewModel(IQuoteSource source)

            : base(new ObservableCollection<Quote>())

            _source = source;

            _source.QuoteArrived += new Action<Quote>(_sourceQuoteArrived);

            CollectionChanged += new NotifyCollectionChangedEventHandler(WatchlistViewModel_CollectionChanged);

            CurrentChanged += new EventHandler<CurrentChangedArgs<Quote, QuoteViewModel>>(WatchlistViewModel_CurrentChanged);

You can see the method connected to the CollectionChanged event of the ObservableViewModel below. When items are added to the collection the quote source is notified that it should create a new quote source and if the symbol doesn’t already exist a new symbol is added to the _quoteMap field. When items are removed they also are removed in the quote source and in the _quoteMap dictionary.

        /// <summary>

        /// Handles the CollectionChanged event of the WatchlistViewModel object.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.Collections.Specialized.NotifyCollectionChangedEventArgs"/> instance containing the event data.</param>

        void WatchlistViewModel_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

            switch (e.Action)

                case System.Collections.Specialized.NotifyCollectionChangedAction.Add:

                    foreach (object item in e.NewItems)

                        Quote q = (Quote)item;

                        _source.Subscribe(this.Symbol);

                        q.Symbol = this.Symbol;

                        this.LastSymbol = this.Symbol;

                        if (!_quoteMap.ContainsValue(q))

                            _quoteMap.Add(q.Symbol, q);

                    break;

                case System.Collections.Specialized.NotifyCollectionChangedAction.Remove:

                    foreach (object item in e.OldItems)

                        Quote q = (Quote)item;

                        _source.UnSubscribe(q.Symbol);

                        _quoteMap.Remove(q.Symbol);

                    break;

                default:

                    break;

Remarks

When you compare the WatchListViewModel with the original viewmodel you don’t see much change in the amount of code. But don’t forget that you have the navigation commands at you disposal now. Furthermore it becomes easy to add sorting, filtering and grouping capabilities to the view. I noticed I didn’t explain the ItemViewModel much in this post and the previous post about the Master-Detail ViewModel. For now you should know that viewmodels that derive from IItemViewModel have an Item property that always is the currently selected item in a collection. I think I will change the stock quote program to demonstrate its usage. The application will get a datagrid. A datagrid in WPF has an interesting feature called RowDetails which is an area of customizable content beneath each row. When you select an item in the datagrid the RowDetails will show. It would be nice to then show a graph of the stock quotes in the RowDetails. The QuoteViewModel which has an ItemViewModel as its base class will handle this behaviour. So expect an update of this article. You can find the source code here.

Update
2-3-2010
I have an updated .net 4 version of this code. It includes a chart that is displayed in the rowdetails. You can download it here It is not tested on another computer so please report any problems to me.

A Master-Detail ViewModel

2009-04-24T13:45:00.000-07:00

Introduction

A while ago I attempted to write a Master/Detail viewmodel . The result you can find here. This article was a reaction on a video Beth Massi showed here. It’s a very nice tutorial on how to create a master-detail data entry form in WPF. However you have to type quite a lot of code each time you want to create your master-detail forms. So I thought I should write a viewmodel that does most of the work. My first attempt worked pretty good but since then I read some wonderful WPF articles like this one of Josh Smith. In it he describes some viewmodels that can be used as base classes for my own viewmodels.

The ViewModelBase base class

Below you see a diagram of all the viewmodels I use in this article.

The base class for all viewmodels is the ViewModelBase class. I changed the base class of Josh Smith a little because I don’t like using strings in my code. The base class uses the INotifyPropertyChanged interface and every property that changes its value can notify the change by calling a function like:



OnPropertyChanged("Position")

The code would look nicer and you wouldn’t get runtime errors if you typed a string wrong if the code would look like this.



RaisePropertyChanged(() => Position);

You can do this by using expression trees. I copied the code for this from an Italian blog by this guy, but more people posted code like this. First he uses an extension method:

    public static class PropertyExtensions

        public static PropertyChangedEventArgs CreateChangeEventArgs<T>(this Expression<Func<T>> property)

            var expression = property.Body as MemberExpression;

            var member = expression.Member;

            return new PropertyChangedEventArgs(member.Name);

The function below must now be added to the base class:

        protected void RaisePropertyChanged<T>(Expression<Func<T>> property)

            PropertyChangedEventHandler handler = this.PropertyChanged;

            if (handler != null)

                handler(this, property.CreateChangeEventArgs());

Every viewmodel that derives from the base class can now call the RaisePropertyChanged method with a property as its parameter. The property name will pop up now in the method parameter thanks to Intellisense.

NavigationViewModel

The Master-Detail viewmodel will derive from the NavigationViewModel and can be used by all kind of collections. I created the NavigationViewModel so that you can also use it as a base class for viewmodels that manipulate lists and observable collections. The NavigationViewModel is an abstract class that has all the commands to change and move through a collection. Also there’s a property for the position of the current item and the number of items in a collection. The NavigationViewModel creates a collection of CommandViewModels. I changed the CommandViewModel from Josh Smith’s article. My CommandViewModel now has properties for images and tooltips, and looks more like the RibbonCommand in the wpf toolkit. In the example program these extra properties aren’t used by the way. If you look at the code below you see that the property NavigationViewModels is a list of all the commands in the NavigationViewModel. If you look at the CreateCommands method you’ll notice that the third viewmodel in the command list is the NavigationViewModel itself. This is used in the WPF NavigationControl to show the position of the current selected item and the number of items.

    /// <summary>

    /// ViewModel for navigating and manipulating collections

    /// </summary>

    public abstract class NavigationViewModel : ViewModelBase, INavigationViewModel

        ObservableCollection<ViewModelBase> _navigationViewModels;

        /// <summary>

        /// Initializes a new instance of the <see cref="NavigationViewModel"/> class.

        /// </summary>

        public NavigationViewModel()

            VisibleCommandText = false;

        /// <summary>

        /// Gets the viewmodels of the <see cref="NavigationViewModel"/>.

        /// </summary>

        /// <value>The <see cref="NavigationViewModel"/> viewmodels.</value>

        public ObservableCollection<ViewModelBase> NavigationViewModels

get

                if (_navigationViewModels == null)

                    List<ViewModelBase> cmds = this.CreateCommands();

                    _navigationViewModels = new ObservableCollection<ViewModelBase>(cmds);

                return _navigationViewModels;

        /// <summary>

        /// Creates the CommandViewModels.

        /// </summary>

        /// <returns>a list of viewmodels</returns>

        List<ViewModelBase> CreateCommands()

            return new List<ViewModelBase>

                new CommandViewModel("First",FirstCommand,Properties.Resources.First_Small),

                new CommandViewModel("Previous",PreviousCommand,Properties.Resources.Previous_Small),

                this, // The navigation view model itself lies between the previous and next CommandViewModel

                new CommandViewModel("Next",NextCommand,Properties.Resources.Next_Small),

                new CommandViewModel("Last",LastCommand,Properties.Resources.Last_Small),

                new CommandViewModel("Delete",DeleteCommand,Properties.Resources.Cancel),

                new CommandViewModel("Add", AddCommand, Properties.Resources.Add_Small)

};

        #region INavigationViewModel Members

        RelayCommand _addCommand;

        /// <summary>

        /// Gets the add command.

        /// </summary>

        /// <value>The add command.</value>

        public ICommand AddCommand

get

                if (_addCommand == null)

                    _addCommand = new RelayCommand(param => this.Add(),

                        param => this.CanAdd);

                return _addCommand;

        /// <summary>

        /// Adds an item to the collection.

        /// </summary>

        protected abstract void Add();

        /// <summary>

        /// Gets a value indicating whether this instance can add an item.

        /// </summary>

        /// <value><c>true</c> if this instance can add an item; otherwise, <c>false</c>.</value>

        protected abstract bool CanAdd { get; }

The rest of the class above looks more or less the same. All the command properties use a RelayCommand field with an Execute and CanExecute delegate. In the case of the AddCommand the Add method is the execute delegate and the CanAdd property is the CanExecute delegate. In the NavigationViewModel all of these delegates are abstract.

The NavigationControl

In Windows Forms there is a NavigationControl for bindable collections. WPF doesn’t have a control for this yet. Because the NavigationViewModel has a list of navigation commands, creating one now becomes very easy. I created a new UserControl that should have an object derived from the NavigationViewModel as its DataContext. This control only has one ListBox. The ItemsSource binds to the NavigationViewModels property of the NavigationViewModel . If an item of the NavigationViewModels is of the CommandViewModel type, a button is created that binds to the CommandViewModel’s Command property. If an item is of type NavigationViewModel, a string is created that shows the number of items and the position of the currently selected item. It’s easy to create a textbox for the position field, so that you can type in the position you want to move to, but I had trouble aligning the position textbox and the count string.

    <UserControl.Resources>

        <!--The standard DataTemplate for the CommandViewModel.

           This template has an image with underneath it the display name of the command-->

        <DataTemplate DataType="{x:Type vm:CommandViewModel}">

            <Button Command="{Binding Path=Command}">

                <StackPanel Orientation="Vertical">

                    <Image Height="16" Width="16" Source="{Binding Path=SmallImageSource}"/>

                    <TextBlock HorizontalAlignment="Center" Text="{Binding Path=DisplayName}"

                               Visibility="{Binding Path=TextVisibility}"/>

                </StackPanel>

            </Button>

        </DataTemplate>

        <!--The standard DataTemplate for the NavigationViewModel.

           This template shows a text with the current position and the number of items of a collection-->

        <DataTemplate DataType="{x:Type vm:NavigationViewModel}">

            <TextBlock >

                <TextBlock.Text>

            <MultiBinding StringFormat=" {0:D} of {1:D}">

                <Binding Path="Position" Mode="OneWay" />

                <Binding Path="Count" Mode="OneWay"/>

            </MultiBinding>

                </TextBlock.Text>

            </TextBlock>

        </DataTemplate>

        <!--The Style for the ListBox.

           The commands are shown horizontally stacked-->

        <Style TargetType="{x:Type ListBox}">

            <Setter Property="ItemsPanel">

                <Setter.Value>

                    <ItemsPanelTemplate>

                        <StackPanel Orientation="Horizontal"

                          VerticalAlignment="Top"

                          HorizontalAlignment="Left"

/>

                    </ItemsPanelTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

    <!--The listbox holding the viewmodels of the NavigationViewModel class-->

    <ListBox Name="commandListbox" ItemsSource="{Binding Path=NavigationViewModels}">

    </ListBox>

The navigation control now looks like this:

The MasterDetailViewModel

The MasterDetailViewModel uses the CollectionViewModel as its base class and implements the IMasterDetailViewModel interface. The CollectionViewModel is described in this article.
The interface tells that each master-detail viewmodel holds a list of other master-detail viewmodels. Also each viewmodel has a property called ViewSource of type CollectionViewSource.
All the abstract methods and properties in the NavigationViewModel must now be implemented in this class. Below you see that the MasterDetailViewModel is a generic class that uses the NavigationViewModel as its base class. The class has a variable called CurrentItem of type T that holds the current selected item. The viewmodel of that selected item is of type V and must have the IItemViewModel<T> interface implemented.

    /// <summary>

    /// interface for the master detail viewmodel.

    /// Each master or detail viewmodel can have a number of detail view models.

    /// Each viewmodel has a property of type CollectionViewSource.

    /// </summary>

    public interface IMasterDetailViewModel

        List<IMasterDetailViewModel> Details { get; }

        Action OnMasterChanged { get; }

        CollectionViewSource ViewSource { get; }

    /// <summary>

    /// Viewmodel for master detail collections

    /// </summary>

    /// <typeparam name="T">The type of items the collection holds</typeparam>

    /// <typeparam name="V">The viewmodel of the items</typeparam>

    public class MasterDetailViewModel<T, V> : CollectionViewModel<T, V>, IMasterDetailViewModel where V : IItemViewModel<T>, new()

The equivalent of the BindingSource class in windows forms is the CollectionViewSource in WPF. This class has a Source property that holds the collection. There’s a View property that enables collections to have the functionalities of current record management. The constructors for creating the master-detail relation look like this.

        /// <summary>

        /// Initializes a new instance of the <see cref="MasterDetailViewModel&lt;T, V&gt;"/> class.

        /// </summary>

        private MasterDetailViewModel()

            : base()

            Details = new List<IMasterDetailViewModel>();

            OnMasterChanged = new Action(MasterChanged);

        /// <summary>

        /// Initializes a new instance of the <see cref="MasterDetailViewModel&lt;T, V&gt;"/> class.

        /// </summary>

        /// <param name="master">The master collection</param>

        /// <param name="path">The path.</param>

        public MasterDetailViewModel(IMasterDetailViewModel master, string path)

            : this()

            Binding b = new Binding();

            b.Source = master.ViewSource;

            b.Path = new PropertyPath(path);

            BindingOperations.SetBinding(ViewSource, CollectionViewSource.SourceProperty, b);

            master.Details.Add(this);

            ViewSourceChanged();

        /// <summary>

        /// Adds new handlers to the new View's CurrentChanged event and calls View_CurrentChanged.

        /// </summary>

        protected override void ViewSourceChanged()

            if (View == null) return;

            IView.CurrentChanged -= new EventHandler(View_CurrentChanged);

            IView.CurrentChanged += new EventHandler(View_CurrentChanged);

            View_CurrentChanged(null, EventArgs.Empty);

You can’t just set a DataSource and a DataMember like with the BindingSource in windows forms. Instead you have to call this strange looking BindingOperations.SetBinding method to set the _viewSource field of type CollectionViewSource.
The details viewmodel is added to the master viewmodel with this method:

master.Details.Add(this);

The AddEventCallCurrentChanged method is called every time the view changes. If there’s an event handler it will be removed because you don’t want to keep adding multiple event handlers to each view. Every time the view changes position the View_CurrentChanged method is called:

        /// <summary>

        /// Handles the CurrentChanged event of the View control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

        protected override void View_CurrentChanged(object sender, EventArgs e)

            base.View_CurrentChanged(sender, e);

            foreach (IMasterDetailViewModel detail in Details)

                this._currentDispatcher.BeginInvoke(detail.OnMasterChanged, DispatcherPriority.Render);

If the viewmodel is a master table with detail tables the OnMasterChanged action is called for each detail table. This action again calls the MasterChanged method that updates the handlers of the CurrentChanged event of the View. The MasterChanged method needs to be called with an BeginInvoke because otherwise the details of the old View property are shown instead of the current view.
The View_CurrentChanged method that is called in the CollectionViewModel base class looks like this:

       /// <summary>

        /// Handles the CurrentChanged event of the IView control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

        protected virtual void View_CurrentChanged(object sender, EventArgs e)

            if (IView == null)

                return;

            RaisePropertyChanged(() => Position);

            CurrentViewModel.Item = CurrentItem;

            RaisePropertyChanged(() => CurrentItem);

            RaisePropertyChanged(() => CurrentViewModel);

            EventHandler<CurrentChangedArgs<T, V>> temp = CurrentChanged;

            if (temp != null)

                temp(null, new CurrentChangedArgs<T, V>(CurrentItem, CurrentViewModel));

In this method the CurrentItem of the CurrentViewModel are set, and all changed properties will notify the view that they have changed.

        /// <summary>

        /// Called by the master viewmodel. Adds new handlers to the View's CurrentChanged event and

        /// Notifies the Count and View properties have changed.

        /// </summary>

        void MasterChanged()

            AddEventCallCurrentChanged();

            RaisePropertyChanged(() => Count);

            RaisePropertyChanged(() => View);

The Add method and the CanAdd property implementation are shown below:

        /// <summary>

        /// Adds an item to the collection.

        /// </summary>

        protected override void Add()

            T item = (T)View.AddNew();

            View.CommitNew();

            RaisePropertyChanged(() => Count);

        /// <summary>

        /// Gets a value indicating whether this instance can add an item.

        /// </summary>

        /// <value>

        ///     <c>true</c> if this instance can add an item; otherwise, <c>false</c>.

        /// </value>

        protected override bool CanAdd

get

                return View != null && View.CanAddNew;

The AddNew method of the View is called in the Add method. This creates a new item. If you want to change the item after its creation, you can add an handler to the ItemAddedEvent. The rest of the class overrides all the other abstract methods and properties of the NavigationViewModel.

Implementation

The database has a Customer, Order and an OrderDetails table. For each table a viewmodel must be created. You can also define a viewmodel for the currently selected items in the table. Below the viewmodel for an order is defined.

    /// <summary>

    /// Viewmodel of an Order item. Just to show the use of the IItemViewModel interface this one

    /// has the WorkSpaceViewModel as its base class.

    /// </summary>

    public class OrderWorkspaceViewModel : WorkspaceViewModel, IItemViewModel<Order>

        #region IItemViewModel<Order> Members

        public Order Item

            get;

            set;

        #endregion

The OrderWorkSpaceViewModel has the WorkSpaceViewModel of Josh Smith as its base class. This definition has no use in the example application but it shows how you can derive from another viewmodel and still add the needed behaviour of the IItemViewModel interface. The viewmodel for the orders table now looks like this:

    public class OrdersViewModel : MasterDetailViewModel<Order, OrderWorkspaceViewModel>

        public OrdersViewModel(CustomersViewModel vm)

            : base(vm, "Orders")

{ }

The master table is the customers table. The Orders table becomes the detail table.
In Xaml all you have to do to add a navigation control and a table view to a grid is type the following two lines:

        <vw:NavigationControl DataContext="{Binding Path=Orders}" Grid.Row="2" />

        <my:DataGrid Grid.Row="3" ItemsSource="{Binding Orders.View}"/>

The DataContext of the navigation control is bound to the orders viewmodel. The ItemsSource of the DataGrid is bound to View property of type BindingListCollectionView of the orders viewmodel. The creation of a view for the other tables is not very different. You can view all details in the source code.

Conclusion/Remarks

I think having a master/detail viewmodel reduces the amount of code you have to type considerably. It also reduces the complexity for the end user.
The navigation control and viewmodel work good but can have some added functionality.
Also I would like to add some custom sorting, filtering, and grouping. The View property of CollectionViewSource has functionality for filtering but it doesn’t work in the sample application.
So if you have any comments or know how to improve the code please contact me. You can find the source code here.

My version of Jason Dollinger's demonstration code

2008-12-03T12:39:00.000-08:00

I saw this post. It refers to a video where Jason Dollinger creates a small program with the help of a pattern called model-view-viewmodel (m-v-vm). Some people wrote in the comments to this post that they wanted the source code of the program that was created in this video. I thought it would be nice to recreate the program as a way of learning about this pattern. After I wrote it I thought it would be nice to share it with you. I haven't implemented the unity framework yet. But I already have used the MEF library in other programs. So I probably will write an update of this program in the future where the MEF framework is used. Because I wrote the program in Visual Studio Express no unit testing is included. You can download the file here. If you have any comments or suggestions please let me know!

Creating a master/detail viewmodel

2008-12-01T08:27:00.000-08:00

UPDATE 4-6-2009: An article about the latest version of this program can be found here. The viewmodel described in this article has changed a lot.

I'm just starting with wpf and I read Beth Massi's code that belonged to this video. It's about creating a master/detail view in wpf. I also saw Jason Dollingers's video about creating a viewmodel: Jason Dolinger on Model-View-ViewModel I though I could give this viewmodel thing a try using as a starting point Beth Massi's code.

The Master ViewModel

First I created a generic class called CollectionModelView:

public class CollectionViewModel<T> : DependencyObject //,ICollectionViewModel
{
protected IEnumerable<T> data;
protected CollectionViewSource masterViewSource = new CollectionViewSource();

public CollectionViewModel(IEnumerable<T> list):this()
{
Data = list;
}

public CollectionViewModel()
{
AddCommand = new CommandAdd(this);
DeleteCommand = new CommandDelete(this);
PreviousCommand = new CommandPrevious(this);
NextCommand = new CommandNext(this);
}

public IEnumerable<T> Data { get { return data; }
set
{
data = value;
masterViewSource.Source = data;
MasterView = (BindingListCollectionView)masterViewSource.View;
}
}

public BindingListCollectionView MasterView
{
get { return (BindingListCollectionView)GetValue(MasterViewProperty); }
set { SetValue(MasterViewProperty, value); }
}

// Using a DependencyProperty as the backing store for MasterView.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty MasterViewProperty =
DependencyProperty.Register("MasterView", typeof(BindingListCollectionView), 
typeof(CollectionViewModel<T>), new UIPropertyMetadata(null));

public CollectionViewSource MasterViewSource { get { return masterViewSource; } }

public T CurrentItem
{
get
{
return (T)GetValue(CurrentItemProperty);
}
set
{
SetValue(CurrentItemProperty, value);
}
}

// Using a DependencyProperty as the backing store for CurrentItem.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty CurrentItemProperty =
DependencyProperty.Register("CurrentItem", typeof(T), typeof(CollectionViewModel<T>), 
new UIPropertyMetadata(null, new PropertyChangedCallback(OnCurrentItemChanged)));

private static void OnCurrentItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
/*CollectionViewModel<T> mv = (CollectionViewModel<T>)d;
            if (mv.CurrentViewModel != null)
                mv.CurrentViewModel.Item = (T)e.NewValue;*/
}

//public ItemViewModel<T> CurrentViewModel { get; set; }

public ICommand AddCommand { get; private set; }
public ICommand DeleteCommand { get; private set; }
public ICommand PreviousCommand { get; private set; }
public ICommand NextCommand { get; private set; }

// Not all commands are shown because they are pretty simple






/// <summary>
/// Private implementation of the Add Command
/// </summary>
private class CommandAdd : MasterBaseCommand<T>
{
public CommandAdd(CollectionViewModel<T> viewmodel): base(viewmodel) { }
            #region ICommand Members

public override void Execute(object parameter)
{
_vm.MasterView.AddNew();
_vm.MasterView.CommitNew();
}

            #endregion
}


/// <summary>
/// Private implementation of the Delete Command
/// </summary>
private class CommandPrevious : MasterBaseCommand<T>
{

public CommandPrevious(CollectionViewModel<T> viewmodel) : base(viewmodel) { }
            #region ICommand Members

public override bool CanExecute(object parameter)
{
return _vm.MasterView.CurrentPosition > 0;
}

public override void Execute(object parameter)
{
_vm.MasterView.MoveCurrentToPrevious();
}

            #endregion

}

}

The generic base class for all commands looks like this:


public abstract class MasterBaseCommand<T> : ICommand
{
protected CollectionViewModel<T> _vm;
public MasterBaseCommand(CollectionViewModel<T> viewModel)
{
_vm = viewModel;
}

        #region ICommand Members

public virtual bool CanExecute(object parameter)
{
return true;
}

public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}

public abstract void Execute(object parameter);
        #endregion
}


Now you already can create your own master/detail viewmodel:


public class OrdersViewModel : CollectionViewModel<Order>
{
public OrdersViewModel(IEnumerable<Order> orders) :
base(orders) { }
}


Create a OrdersViewModel and assigning it to the DataContext of the window. Here's an example how you can create master/detail
tables in xaml now:

        <my:DataGrid Name="dataGrid1" ItemsSource="{Binding MasterView}"  SelectedValue="{Binding Path=CurrentItem, Mode=OneWayToSource}" IsSynchronizedWithCurrentItem="True" Grid.Row="1" />        <my:DataGrid Grid.Row="2" Height="Auto" Margin="0" Name="dataGrid2" VerticalAlignment="Stretch"
 ItemsSource="{Binding CurrentItem.OrderDetails}"/>

In this piece of xaml code the SelectedValue property of the datagrid binds to the CurrentItem property of the viewmodel. 

The second datagrid binds to the OrderDetails. 


The Details ViewModel 

By deriving from the generic CollectionVewModel class we can create a DetailViewModel class.

public class DetailViewModel<V> : CollectionViewModel<V>

private string path;

public DetailViewModel(CollectionViewSource master, string path)

: base()

this.path = path;

Binding b = new Binding();

b.Source = master;

b.Path = new PropertyPath(path);

BindingOperations.SetBinding(masterViewSource, CollectionViewSource.SourceProperty, b);

MasterView = (BindingListCollectionView)masterViewSource.View;

master.View.CurrentChanged += new EventHandler(View_CurrentChanged);

public string Path

get { return path; }

void View_CurrentChanged(object sender, EventArgs e)

MasterView = (BindingListCollectionView)masterViewSource.View;

The DetailViewModel is like the CollectionViewModel except that a child table name should be assigned in the constructor.

We can now create an OrdersViewModel and an OrderDetailsViewmodel like below:

public class OrdersViewModel : CollectionViewModel<Order>

public OrdersViewModel(IEnumerable<Order> orders) :

base(orders) { }

public class OrderDetailsViewModel : DetailViewModel<OrdersViewModel>

public OrderDetailsViewModel(OrdersViewModel vm)

: base(vm.MasterViewSource, "OrderDetails")

public class DataModule

private OMSDataContext db = new OMSDataContext();

public OrdersViewModel Orders { get; private set; }

public OrderDetailsViewModel OrderDetails { get; private set; }

public ViewModels()

Orders = new OrdersViewModel(db.Orders);

OrderDetails = new OrderDetailsViewModel(Orders);

All you have to do now is create a DataModule and connect it to the DataContext of the main window:

  

this.DataContext = new DataModule();
The xaml code for the main window now looks like this: 


<Window x:Class="MasterDetailViewModel.MasterDetailWindow2"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Window1" Height="302" Width="430" Loaded="Window_Loaded" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="36" />
            <RowDefinition Height="131*" />
            <RowDefinition Height="95*" />
        </Grid.RowDefinitions>
        <StackPanel Name="StackPanel3" Orientation="Horizontal" Grid.Row="0">
            <Button Height="25" Name="btnAdd" Width="Auto" Margin="3" Command="{Binding Orders.AddCommand}">Add Order</Button>
            <Button Height="25" Name="btnDelete" Width="Auto" Margin="3" Command="{Binding Orders.DeleteCommand}">Delete Order</Button>
            <Button Height="25" Name="btnPrevious" Width="75" Margin="3" Command="{Binding Orders.PreviousCommand}">Previous</Button>
            <Button Height="25" Name="btnNext" Width="75" Margin="3" Command="{Binding Orders.NextCommand}">Next</Button>
            <!-- The save button can work if I also allow the dataconnection in the ViewModel
            and add a save command
            <Button Height="25" Name="btnSave" Width="75" Margin="3" Command="{Binding SaveCommand}">Save</Button>-->
        </StackPanel>
        <my:DataGrid Name="dataGrid1" ItemsSource="{Binding Orders.MasterView}" IsSynchronizedWithCurrentItem="True" Grid.Row="1"/>
        <my:DataGrid Grid.Row="2" Height="Auto" Margin="0" Name="dataGrid2" VerticalAlignment="Stretch" 
 ItemsSource="{Binding OrderDetails.MasterView}" IsSynchronizedWithCurrentItem="True"/>
    </Grid>
</Window>

That's all! Creating master/details tables is now a very easy job with the the help of the two generic classes described above! 
Any comments are very welcome, this is my first attempt in publishing so I would love some feedback! 