WPF Displaying Parent Child relationship

Question

I can't wrap my head around how to accomplish rendering this

public class Shape{}
public class Circle: Shape{}
public class Square: Shape
{
    public List<Circle> CircleList{ get; private set; }
}

I have a List that holds Shape objects, now what I want to accomplish is having each object rendered in a grid.

If the object is a Square there should be a nested grid that holds Circle items from the CircleList property

I've tried with an ItemsControl and a HierarchicalDataTemplate, could not get it working, i've tried nesting an ItemsControl inside an ItemsControl, i'm pretty new to WPF so i'm kinda fumbling around here not knowing what the "proper" solution would be. I did manage to render the above in a TreeView, but what i'm trying to accomplish is a drawingboard that renders shapes.

UPDATE

The "Drawingboard" should contain items, each item should be rendered in a container.

If the object is of Type Square the Square container should have a nested container to hold the Circle objects from the CircleList Property.

Answer 1

Scott is pretty close but not quite there; setting the DataContext of the Grid will not render the contained Circle objects. What you need is an embedded control that can render its own items, and then bind the ItemsSource property of that control to the CircleList.

I have constructed an example using your original classes that demonstrates this. Here is the code-behind:

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        Square square = new Square();
        square.CircleList = new List<Circle>() { new Circle(25) };
        _shapes.Add(square);
    }

    private List<Shape> _shapes = new List<Shape>();

    public List<Shape> Shapes
    {
        get { return _shapes; }
    }
}

public abstract class Shape { }

public class Circle : Shape
{
    public double Diameter { get; private set; }

    public Circle(double diameter)
    {
        Diameter = diameter;
    }
}

public class Square : Shape
{
    public List<Circle> CircleList { get; set; }
}

So you can see I have added a single Square to my Shapes list, that contains a circle of diameter 25. Note that this does not add any support for positioning the shapes using absolute coordinates; I assume you already have something in place for that.

Now the XAML:

<Window x:Class="TestWpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfApplication"
Title="Window1"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
    <DataTemplate DataType="{x:Type local:Circle}">
        <Ellipse Stroke="Black" 
                 Width="{Binding Diameter}" 
                 Height="{Binding Diameter}"/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:Square}">
        <Border BorderThickness="1" BorderBrush="Black">
            <ItemsControl ItemsSource="{Binding CircleList}"/>
        </Border>
    </DataTemplate>
</Window.Resources>

<ListBox ItemsSource="{Binding Shapes}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Here are your DataTemplates; you can see the Circle is rendered simply with an Ellipse. The Square, on the other hand, has an embedded ItemsControl that renders its contained items. I have also drawn a Border around it to make the square shape.

Here is the result:

alt text http://img212.imageshack.us/img212/8658/squarewithcirclecontent.png

Answer 2

You could try using two DataTemplates, one for a Circle (just renders a Circle) and one for a Square. The Square DataTemplate should render a Grid (just give it a border to make it look like a square) and then set the nested Grid's DataContext="{Binding CircleList}".

I'm not 100% sure how you're converting a list of shapes to a grid, but sounds like you've already got that solved, so I'll just omit that for simplicity. :)