binding to nested object from the parent user control wpf

Question

I am writing a new user control. It needs to be able to display an ObservableCollection of items. Those items will have a property that is also an observable collection, so it is similar to a 2-d jagged array. The control is similar to a text editor so the outer collection would be the lines, the inner collection would be the words. I want the consumer of the control to be able to specify not only the binding for the lines, but also the binding for the words. The approach I have so far is as follows:

The user control inherits from ItemsControl. Inside this control it has a nested ItemsControl. I would like to be able to specify the binding path of this nested ItemsControl from the parent user control. The XAML for the UserControl is

<ItemsControl x:Class="IntelliDoc.Client.Controls.TextDocumentEditor"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          xmlns:local="clr-namespace:IntelliDoc.Client"
          xmlns:con="clr-namespace:IntelliDoc.Client.Controls"
          xmlns:data="clr-namespace:IntelliDoc.Data;assembly=IntelliDoc.Data"
          xmlns:util="clr-namespace:IntelliDoc.Client.Utility"
          xmlns:vm="clr-namespace:IntelliDoc.Client.ViewModel"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
          xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
          mc:Ignorable="d"
          x:Name="root"
          d:DesignHeight="300" d:DesignWidth="300"
         >
<ItemsControl.Template>
    <ControlTemplate>
        <StackPanel Orientation="Vertical">
            <ItemsPresenter Name="PART_Presenter" />
        </StackPanel>
    </ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
    <DataTemplate >
        <StackPanel Orientation="Horizontal">
            <ItemsControl Name="PART_InnerItemsControl" ItemsSource="{Binding NestedBinding, ElementName=root}" >
                <ItemsControl.Template>
                    <ControlTemplate>
                        <StackPanel Name="InnerStackPanel" Orientation="Horizontal" >
                            <TextBox Text="" BorderThickness="0" TextChanged="TextBox_TextChanged" />
                            <ItemsPresenter />
                        </StackPanel>
                    </ControlTemplate>
                </ItemsControl.Template>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" >
                            <ContentControl Content="{Binding Path=Data, Mode=TwoWay}" />
                            <TextBox BorderThickness="0" TextChanged="TextBox_TextChanged" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </DataTemplate>
</ItemsControl.ItemTemplate>

The code behind has this property declared

public partial class TextDocumentEditor : ItemsControl
{


    public static readonly DependencyProperty NestedItemsProperty = DependencyProperty.Register("NestedItems", typeof(BindingBase), typeof(TextDocumentEditor),
        new PropertyMetadata((BindingBase)null));

    public BindingBase NestedItems
    {
        get { return (BindingBase)GetValue(NestedItemsProperty); }
        set
        {
            SetValue(NestedItemsProperty, value);
        }
    }
...
}

The expected bound object will be as follows:

public class ExampleClass
{
    ObservableCollection<InnerClass> InnerItems {get; private set;}
}

public class InnerClass : BaseModel //declares OnPropertyChanged
{
   private string _name;
   public string Name //this is provided as an example property and is not required
   {
       get
       {
         return _name;
       } 
       set
       {
          _name = value;
          OnPropertyChanged(nameof(Name));
       }
   }
....
}

public class ViewModel
{
   public ObservableCollection<ExampleClass> Items {get; private set;}
}

The XAML declaration would be as follows:

<Window x:Class="IntelliDoc.Client.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    Title="TestWindow" Height="300" Width="300">
<DockPanel>
    <TextDocumentEditor ItemsSource="{Binding Path=Items}" NestedItems={Binding Path=InnerItems} >
      <DataTemplate>
         <!-- I would like this to be the user defined datatemplate for the nested items.  Currently I am just declaring the templates in the resources of the user control by DataType which also works -->
      </DataTemplate>
    </TextDocumentEditor>
</DockPanel>

In the end, I want the user control I created to provide the ItemsControl template at the outer items level, but I want the user to be able to provide the datatemplate at the inner items control level. I want the consumer of the control to be able to provide the bindings for both the Outer items and the nested items.

Answer 1

I was able to come up with a solution that works for me. There may be a better approach, but here is what I did.

First, on the outer ItemsControl, I subscribed to the StatusChanged of the ItemContainerGenerator. Inside that function, I apply the template of the ContentPresenter and then search for the Inner ItemsControl. Once found, I use the property NestedItems to bind to the ItemsSource property. One of the problems I was having originally was I was binding incorrectly. I fixed that and I changed the NestedItems to be a string. Also, I added a new property called NestedDataTemplate that is of type DataTemplate so that a user can specify the DataTemplate of the inner items control. It was suggested that I not use a UserControl since I don't inherit from a UserControl, so I will change it to a CustomControl. The code changes are below

    public static readonly DependencyProperty NestedItemsProperty = DependencyProperty.Register("NestedItems", typeof(string), typeof(TextDocumentEditor),
        new PropertyMetadata((string)null));


    public static readonly DependencyProperty NestedDataTemplateProperty = DependencyProperty.Register("NestedDataTemplate", typeof(DataTemplate), typeof(TextDocumentEditor),
        new PropertyMetadata((DataTemplate)null));

    public DataTemplate NestedDataTemplate
    {
        get { return (DataTemplate)GetValue(NestedDataTemplateProperty); }
        set
        {
            SetValue(NestedDataTemplateProperty, value);
        }
    }

    public string NestedItems
    {
        get { return (string)GetValue(NestedItemsProperty); }
        set
        {
            SetValue(NestedItemsProperty, value);
        }
    }

    private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
    {
        if (((ItemContainerGenerator)sender).Status != GeneratorStatus.ContainersGenerated)
            return;
        ContentPresenter value;
        ItemsControl itemsControl;
        for (int x=0;x<ItemContainerGenerator.Items.Count; x++)
        {
            value = ItemContainerGenerator.ContainerFromIndex(x) as ContentPresenter;
            if (value == null)
                continue;
            value.ApplyTemplate();
            itemsControl = value.GetChildren<ItemsControl>().FirstOrDefault();
            if (itemsControl != null)
            {
                if (NestedDataTemplate != null)
                    itemsControl.ItemTemplate = NestedDataTemplate;
                Binding binding = new Binding(NestedItems);
                BindingOperations.SetBinding(itemsControl, ItemsSourceProperty, binding);
            }
        }
    }