Question

I’m a little surprised that it is not possible to set up a binding for Canvas.Children through XAML. I’ve had to resort to a code-behind approach that looks something like this:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    DesignerViewModel dvm = this.DataContext as DesignerViewModel;
    dvm.Document.Items.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Items_CollectionChanged);

    foreach (UIElement element in dvm.Document.Items)
        designerCanvas.Children.Add(element);
}

private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    ObservableCollection<UIElement> collection = sender as ObservableCollection<UIElement>;

    foreach (UIElement element in collection)
        if (!designerCanvas.Children.Contains(element))
            designerCanvas.Children.Add(element);

    List<UIElement> removeList = new List<UIElement>();
    foreach (UIElement element in designerCanvas.Children)
        if (!collection.Contains(element))
            removeList.Add(element);

    foreach (UIElement element in removeList)
        designerCanvas.Children.Remove(element);
}

I’d much rather just set up a binding in XAML like this:

<Canvas x:Name="designerCanvas"
        Children="{Binding Document.Items}"
        Width="{Binding Document.Width}"
        Height="{Binding Document.Height}">
</Canvas>

Is there a way to accomplish this without resorting to a code-behind approach? I’ve done some googling on the subject, but haven’t come up with much for this specific problem.

I don’t like my current approach because it mucks up my nice Model-View-ViewModel by making the View aware of it’s ViewModel.

Answer 1

I don’t believe its possible to use binding with the Children property. I actually tried to do that today and it errored on me like it did you.

The Canvas is a very rudimentary container. It really isn’t designed for this kind of work. You should look into one of the many ItemsControls. You can bind your ViewModel’s ObservableCollection of data models to their ItemsSource property and use DataTemplates to handle how each of the items is rendered in the control.

If you can’t find an ItemsControl that renders your items in a satisfactory way, you might have to create a custom control that does what you need.