Creating a customizable grid overlay

Question

Just looking for some input as to what control I should go with or a broad approach. I am going to load up a png in the program I am writing. Then I could specify that I want 32x32 lines split over the picture (I'm not breaking the picture up, just specifying a grid to be on top). So, obviously I am going to need something which I can select multiples of these "cells" (which the grid or whatever broke into) and easily identify which the user is selecting. Does the grid do this or is it something more like creating guidelines and then creating some rectangles or something?

Answer 1

You would use an ItemsControl or derived class such as the Selector with the ItemsPanel property set to a Grid. In the ItemsContainerStyle property would set the Style for a ContentControl. The ContentControl is a the of object that will be generated for each item in the list that your ItemsControl will be bound against using the ItemsSource property. In that style you will setup a ControlTemplate for the ContentControlto soemthing that includes a Border or Rectangle or similar to get the grid lines. The root Control in your ControlTempalte will have the Grid.Row and Grid.Column properties bound against the .Row and .Column properties of your dataitems wich will be the DataContext.

Finally you bind the ItemsControl agains an ObservableCollection of these DataItems.

<ItemsControl ItemsSource={Binding MyDataItems}  ....

Your DataItem would look something like this:

public class DataItem : INotifyPropertyChanged
{
     public int Row
     {
          get { // return field  }
          set { // raise the PropertyChanged event here  }
     }

     public int Column
     {
          get { // return field  }
          set { // raise the PropertyChanged event here  }
     }

}