MVVM-pattern for a Paint-like WPF-Application?

Question

Hi girls and guys!

I'm currently in the planning phase for a project of mine.

I thought about using the MVVM-pattern for my application for testability, maintainability etc. I have only started to get my head around MVVM but there is one thing that I just can't figure out in the context of my planned application.

My application aims to aid sport coaches with their exercise planning by allowing them to visually capture exercises. It's a kind of Paint for sports trainers.

I already thought about how to implement the different PaintObjects (that's what I call them) for my application (for example: Ball, Player etc.) and have found the most convenient way to do it is write a class with a number of DependencyProperties and then supplying a XAML-ControlTemplate for this class.

Now when I think about structuring the paint screen of my application I figured I would use something like PaintView.xaml with a PaintViewModel.cs. Now the question is how does the PaintViewModel store the PaintObjects? What are PaintObjects anyway? Are they ViewModels themselves? Are they models? Are they views?

That's the part where I'm totally stuck thoughtwise and hoping to get some advice by more experienced MVVM-users. Thanks in advance!

Best regards, crischu

Answer 1

Keep a separation between your VMs (which should be POCOs) and views. Your VMs should not have a hard dependency on your views, because that makes it difficult to test them in isolation.

So by the sounds of it, you'll need something in your VM to represent the various bits and pieces in your scenes (BallViewModel, PlayerViewModel etcetera). These might be exposed from a SceneViewModel:

public class SceneViewModel : ViewModel
{
    public ICollection<SceneObjectViewModel> SceneObjects
    {
        get { ... }
    }

    ...
}

public abstract class SceneObjectViewModel : ViewModel
{
    ...
}

public class BallViewModel : SceneObjectViewModel
{
    ...
}

Then your SceneView would bind to that collection and render each item using a DataTemplate:

<ItemsControl ItemsSource="{Binding SceneObjects}">
    <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
      <Canvas/>
     </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
     <Style>
      <Setter Property="Canvas.Top" Value="{Binding Top}"/>
      <Setter Property="Canvas.Left" Value="{Binding Left}"/>
     </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

The above XAML assumes your DataTemplates are defined elsewhere, and that each SceneObjectViewModel has a Top and Left property.

HTH, Kent

Answer 2

Hi try looking at thisComposite Application Guidence for WPF and Silverlight

It has MVVM inside that as well as some others... might help.