如何使用自己的DataTemplate DependencyProperty实现WPF控件？

Question

I am an intermediate WPF developer, with working knowledge on how to implement dependency properties as well as simple custom controls. I do not yet understand how I can add a DataTemplate dependency property to a custom control, and use it to define the element tree for each datum in a collection of data.

The full story is that I have been working on creating a WPF map control that displays many different points and geometric shapes on the map, over map tiles. These shapes will translate with the rest of the map when user "drags" the map around.

I have accomplished this, insofar that I have created the map control, and can add child elements to it in Xaml that have map coordinates. I would like to take this farther, and add properties for collections of data, ie points, areas, etc. To better understand what I'm looking for, I would like to re-create two properties from ListBox: ItemsSource and ItemTemplate.

I have added two dependency properties to my Map control - PointsSource and PointsTemplate. PointsSource is of type IEnumberable and represents the collection of data to display on the map. PointsTemplate represents what each of those datum should look like. Simply throwing these properties into my control is obviously not enough, but I am unsure of how to coordinate them with one another. If anyone has working knowledge of creating a custom data control with it's own DataTemplate properties for changing the UI tree for each data element, I would really appreciate it.

Answer 1

I have found what I am looking for in the DataTemplate itself. The DataTemplate provides a function for code behind called LoadContent(). LoadContent produces a dependency object that represents the tree of content for a given datum. From what I have found elsewhere, the common use for LoadContent might look like the following:

foreach (object point in PointsSource)
        {
            FrameworkElement pointElement = _PointsTemplate.LoadContent() as FrameworkElement;
            pointElement.DataContext = point;
            this.Children.Add(pointElement);
        }

The above code will add a content tree for every single element of data, and we give it the datum to bind its DataContext to.

Answer 2

If anyone has working knowledge of creating a custom data control with it's own DataTemplate properties for changing the UI tree for each data element, I would really appreciate it.

Basically, you will want to use an ItemsControl inside your control template, and bind its ItemsSource and ItemTemplate properties to your custom Dependency Properties. Ie,

<Style TargetType="{x:Type local:CustomControl}">
    <Setter Property="Template">
        <ControlTemplate TargetType="{x:Type local:CustomControl}">
            <ItemsControl ItemsSource="{TemplateBinding PointsSource}"
                          ItemTemplate="{TemplateBinding PointsTemplate}"
            />
        </ControlTemplate>
    </Setter>
</Style>

(assuming the DPs IEnumerable - "PointsSource" and DataTemplate - "PointsTemplate")