MVVM template for a paint-like WPF application?

Question

Now I am at the planning stage of my project.

I was thinking about using an MVVM template for my application for validation, maintainability, etc. I was just starting to ponder MVVM, but there is one thing that I just cannot understand in the context of my planned application.

My app aims to help sports trainers with their exercise planning, allowing them to visually capture exercises. This is a kind of paint for sports trainers.

I already thought about how to implement various PaintObjects (what I call them) for my application (for example: Ball, Player, etc.), and found the most convenient way to do this is to write a class with a number from DependencyProperties, and then supply the XAML-ControlTemplate for this class.

Now that I am thinking about structuring the paint screen of my application, I decided that I would use something like PaintView.xaml with PaintViewModel.cs. Now the question is, how does PaintViewModel store PaintObjects? What are PaintObjects? Are they ViewModels themselves? Are they models? Are they visible?

This is the part where I completely thought it over and hope to get advice from experienced MVVM users. Thanks in advance!

Regards, crischu

Answer 1

Keep the separation between your virtual machines (which should be POCOs ) and views. Your virtual machines should not be very dependent on your views, because it makes it difficult to test them in isolation.

, - , (BallViewModel, PlayerViewModel ..). SceneViewModel:

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

    ...
}

public abstract class SceneObjectViewModel : ViewModel
{
    ...
}

public class BallViewModel : SceneObjectViewModel
{
    ...
}

SceneView 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>

XAML , DataTemplate SceneObjectViewModel Top Left.

Answer 2

, WPF Silverlight

MVVM, ... .