Question

I’m learning the ins and outs of creating custom controls in WPF. The concepts I understand thus far:

1. The code defines the control’s behavior.
2. The template defines the control’s look and feel, the visual aspect.
3. You can bind elements of the template to properties of the underlying control object.

If the template has multiple collection controls, such as StackPanels, how do you bind them so that they are populated by underlying collections? My first inclination was to make use of the DataContext of each StackPanel, but I couldn’t make it work. I get the feeling I’m missing a key concept that would solve this for me.

Answer 1

What did you want to be in these StackPanels? Panels are used for arranging items. If you want to show a collection of items, you probably want to be using an ItemsControl (or one of the many types of ItemsControls). An ItemsControl is very powerful- you can specify how the items are displayed and how the panel that they’re displayed on is displayed as well. You can even specify that the panel is a StackPanel. For example,

    <ItemsControl ItemsSource="{Binding ElementName=root, Path=List1}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <!-- Template defines the panel -->
                <StackPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- Template defines each item -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Then you wanted to bind to a list of items, which is very easy with an ItemsControl! In your case with the custom control, you may want to expose dependency properties on the control itself in the code-behind and then bind to those from the XAML. For example, you can create dependency properties for the various lists you have like this:

        public static readonly DependencyProperty List1Property = DependencyProperty.Register(
        "List1",
        typeof(IList<string>),
        typeof(MyControl));

    public static readonly DependencyProperty List2Property = DependencyProperty.Register(
        "List2",
        typeof(IList<string>),
        typeof(MyControl));

Then you can bind the ItemsSource property of your ItemsControls:

    <ItemsControl ItemsPanel="..." ItemsSource="{Binding ElementName=root, Path=List1}" />
    <ItemsControl ItemsPanel="..." ItemsSource="{Binding ElementName=root, Path=List2}" />

(in this case I assume that the custom control has a x:Name=”root”)

I hope this helps!