Question

I am new in WPF and I would like to have a quick advice on how to bind this object to a wpf control and I dont know which control should I use:

public class Parent
{
  public string Name{get; set;}
  public List<Child> Childs {get; set;}
}

public class Child
{
  public string Name{get; set;}
  public int Age {get; set;}
}

public class ParentFactory
{
   public List<Parent> Parents {get; set;}

   public ParentFactory()
   {
      Child child1 = new Child() {Name="Peter", Age=10;};
      Child child2 = new Child() {Name="Mary", Age=9;};
      Child child3 = new Child() {Name="Becky", Age=12;};

      Parent parent1 = new Parent(){Name="Adam", Childs = new List<Child<>(){child1, child2}};
      Parent parent2 = new Parent(){Name="Kevin", Childs = new List<Child<>(){child3}};

      Parents = new List<Parent>(){parent1, parent2};
   }
}

After creating this instance:

ParentFactory parentFactory = new ParentFactory();

I would like to bind the parentFactory.Parents() to a control in WPF. I would expect to see something like this:

---

Adam

— Peter, 10

— Mary, 9

Kevin

— Becky, 12

---

They are all displayed on textboxes and I can change them.

Thanks in advance.

Answer 1

Use a TreeView with a HierarchicalDataTemplate.

Note however that without implement INotifyPropertyChanged on your model, your bindings won’t update on any property changes. Also, without replacing your lists with ObservableCollections, your view won’t update as you add more items to the list.

Something like this should work, first define your templates:

<Window.Resources>
    <HierarchicalDataTemplate DataType="{x:Type local:Parent}" ItemsSource="{Binding Childs}">
        <TextBlock Text="{Binding Name}"/>
    </HierarchicalDataTemplate>
    <DataTemplate DataType="{x:Type local:Child}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock>, </TextBlock>
            <TextBlock Text="{Binding Age}"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

Then you can use them with a TreeView like this (assuming Parents is a property in the DataContext of the TreeView):

<TreeView ItemsSource="{Binding Parents}"/>

If you don’t want a TreeView, you can easily do something list this with a ListView, change you DataTemplates to this:

    <DataTemplate DataType="{x:Type local:Parent}">
        <StackPanel>
            <TextBlock Text="{Binding Name}"/>
            <ListView ItemsSource="{Binding Childs}"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:Child}">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock>, </TextBlock>
            <TextBlock Text="{Binding Age}"/>
        </StackPanel>
    </DataTemplate>

And then you can bind it like this:

<ListView ItemsSource="{Binding Parents}"/>

Note: You’ll probably want to fiddle around with the styles a little because out-of-the-box, this looks a bit crap. You’ll probably want to, at least, indent the child ListView (the one defined in the Parent DataTemplate) and get rid of it’s border.

Also Note: the StackPanel to layout multiple TextBlocks for the name and age isn’t ideal either, but it’s quick and dirty. You might want to handle that differently. You could use a (multi) converter to format it, use StringFormat or add another property to your model just for display, or even just override ToString on the child class.

Another Edit

A quick (and ugly) example of using the DataGrid:

<DataGrid ItemsSource="{Binding Parents}" AutoGenerateColumns="False">
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <DataGrid ItemsSource="{Binding Childs}"/>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Name}"/>
    </DataGrid.Columns>
</DataGrid>

This puts a data grid inside a data grid using the row details template. If you click a row, it’ll display the children as row details. If you want details always available, you can remove the RowDetailsTemplate and replace the DataGridTextColumn with a DataGridTemplateColumn and then define a template for you data.