WPF/Silverlight Bind Canvas to Collection of View Model Elements

Question

Is it possible to use a DataTemplate to render a collection of points as a bunch of lines (with data binding and drag and drop)?

Here are the details:

I have multiple objects in my view model. These objects ultimately have locations on a canvas specified in absolute pixel coordinates. I need to be able to drag and drop these items around on the canvas and update their coordinates. Some objects are represented by a point, others are a collection of line segments. I'm using MVVM (Jounce). Should my view model expose a ObservableCollection that somehow binds the coordinates? That feels wrong. Or is there a way I can use DataTemplates here to draw lines with points on the end of each line segment given a collection of line segments? Here is an example ViewModel:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using Jounce.Core.ViewModel;

namespace CanvasBindTest.ViewModels
{
    /// 
    /// Sample view model showing design-time resolution of data
    /// 
    [ExportAsViewModel(typeof(MainViewModel))]
    public class MainViewModel : BaseViewModel
    {
        public MainViewModel()
        {
            var start = new PointView { X = 0, Y = 0 };
            var middle = new PointView { X = 1132 / 2, Y = 747 / 2 };
            var end = new PointView() { X = 1132, Y = 747 };
            var lineView = new LineView(new[] { start, middle, end });
            Lines = new LinesView(new[] { lineView });
        }

        public LinesView Lines { get; private set; }
    }

    public class LinesView : BaseViewModel
    {
        public ObservableCollection Lines { get; private set; }

        public LinesView(IEnumerable lines)
        {
            Lines = new ObservableCollection(lines);
        }
    }

    public class LineView : BaseViewModel
    {
        public ObservableCollection Points { get; private set; }

        public LineView(IEnumerable points)
        {
            Points = new ObservableCollection(points);
        }
    }

    public class PointView : BaseViewModel
    {
        private int x, y;

        public int X
        {
            get { return x; }
            set { x = value; RaisePropertyChanged(() => X); }
        }

        public int Y { 
            get { return y; }
            set { y = value; RaisePropertyChanged(() => Y); }
        }
    }
}

Here is the View, which is a canvas wrapped in a ItemsControl with a background image. The view model coordinates are relative to the background image's unscaled size:

Jason · Accepted Answer

It's absolutely disgusting how much XAML this takes. I'll look for a way to clean it up using styles and templates. Also, I need to draw the line to the center of the point, that shouldn't be hard. For now, below is what worked. I ended up created a Collection> ViewModel to bind the "Line" collection. Otherwise I'm looking at the line point-by-point and can't draw a line since I can't find X2/Y2.

Thanks for the inspiration Alexander.

Here is the XAML:

Here is the ViewModel:

namespace CanvasBindTest.ViewModels
{
    /// 
    ///     Sample view model showing design-time resolution of data
    /// 
    [ExportAsViewModel(typeof (MainViewModel))]
    public class MainViewModel : BaseViewModel
    {
        public MainViewModel()
        {
            var start = new PointViewModel {X = 0, Y = 0};
            var middle = new PointViewModel {X = 30, Y = 10};
            var end = new PointViewModel {X = 20, Y = 0};
            var simpleLine = new LineSegmentsViewModel(new[] {start, middle, end});
            Lines = new ObservableCollection {new LineViewModel(new[] {simpleLine})};
        }

        public ObservableCollection Lines { get; private set; }
    }

    public class LineViewModel : BaseViewModel
    {
        public LineViewModel(IEnumerable lineSegments)
        {
            LineSegments = new ObservableCollection(lineSegments);
        }

        public ObservableCollection LineSegments { get; private set; }
    }

    public class LineSegmentsViewModel : BaseViewModel
    {
        public LineSegmentsViewModel(IEnumerable lineSegment)
        {
            LineSegment = new ObservableCollection(lineSegment);
            Lines = new Collection>();
            var tmp = lineSegment.ToArray();
            for (var i = 0; i < tmp.Length - 1; i++)
            {
                Lines.Add(new Tuple(tmp[i], tmp[i+1]));
            }
        }

        public Collection> Lines { get; private set; }  

        public ObservableCollection LineSegment { get; private set; }
    }


    public class PointViewModel : BaseViewModel
    {
        private int x, y;

        public int X
        {
            get { return x; }
            set
            {
                x = value;
                RaisePropertyChanged(() => X);
            }
        }

        public int Y
        {
            get { return y; }
            set
            {
                y = value;
                RaisePropertyChanged(() => Y);
            }
        }
    }
}

WPF/Silverlight Bind Canvas to Collection of View Model Elements

Answers (2)

Related Questions