Question

Still picking my way through learning XAML/WPF. If someone can show me how to accomplish the following – it will go a long way to helping me develop my next project (and several similar projects down the road).

Say I have a collection of objects that defines objects to be drawn on a canvas. The objects contain all the information necessary to render the objects, including the shape, color, and location. Can a XAML control be created that binds to this collection and handles the rendering, or is this better done by drawing on the canvas in the code-behind?

One other point – the objects must eventually be click-selectable, selectable via rectangle-lasso, and draggable. This doesn’t have to be solved in the example code someone supplies, but I thought it might be relevant to know this as it might affect the various implementations.

Example class below. thanks in advance.

Class DrawingElement

  readonly property Shape as string    ("circle", "square", "triangle")
  readonly property Position as point  (coordinates)
  readonly property Color as string    ("red", "blue", "yellow")

end class

Sub Main

   dim lst as new List(of DrawingElement)

   lst.add(new DrawingElement("Circle", 10,20, "Blue"))
   lst.add(new DrawingElement("Square", 80,35, "Red"))
   lst.add(new DrawingElement("Triangle", 210,120, "Yellow"))

   <draw lst!>

End Sub

Answer 1

Can be done, but not by using magic strings (e.g., “circle”) like in your example.

First, you should be designing your models based on existing framework elements rather than designing the model with the idea of whipping up some new UI elements or struggling to create code that interprets between them.

WPF already has an ellipse (circle), rectangle (square) and a whole host of other geometric primitives for you to use. You’ll want to create models that contain public bindable properties that you can bind to instances of these elements to control their shape and location.

Without going into much detail (or testing), I’d do something like this

public class GeometricElement : INotifyPropertyChanged
{
  // these are simplified and don't show INPC code
  public double Left {get;set;} 
  public double Top {get;set;}
  public Brush Fill {get;set;}
  // ...
}

// ...

public class Square : GeometricElement
{
  public double Width {get;set;}
  public double Height {get;set;}
}

// ...

// bound to the window
public class CadAppDataContext
{
  public ObservableCollection<GeometricElement> Elements {get; private set;}
}

And in my xaml, it would look something like

<ItemsControl ItemsSource="{Binding Source={StaticResource cadAppDataContext}}" >
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Canvas />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.Resources>
    <DataTemplate TargetType="{x:Type me:Square}">
      <Rectangle 
         Canvas.Left="{Binding Left}"
         Canvas.Top="{Binding Top}"
         Width="{Binding Width}"
         Height="{Binding Height}"
         Fill="{Binding Fill}" />
    </DataTemplate>
    <!-- more DataTemplates for circle, triangle, etc etc -->
  </ItemsControl.Resources>
</ItemsControl>

The ItemsControl will create a Canvas element and for every GeometricElement in my Elements collection it will add a new child UI element based on the type of object in Elements.

Items controls are bound to collections and can add or remove elements based on what’s happening in the collection within your code. It determines the UI element to add by looking for a DataTemplate that is designed for a particular Type. This is a common, and important, pattern and is why using magic strings will hurt you in the long run; the magic string route won’t let you leverage the power of the framework already built into WPF.

Now, I’m not saying this will work out of the box. You’ll probably run into properties that won’t bind without some heavy lifting. You might even have to extend the geometry primitives to get them to behave how you want. But this is the pattern used in WPF applications. Understanding the pattern and using it will help you avoid hours of stress and failure.