How to modify ControlTemplate to add items directly to my custom control

Question

I have defined following control template for my custom control.

<ControlTemplate TargetType="{x:Type local:CustomControl}">
    <Grid x:Name="MainGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <local:CustomPanel x:Name="MyCustomPanel" Grid.Column="0" />
        <ScrollBar Grid.Column="1" Width="20" />
    </Grid>
</ControlTemplate>

Here the CustomPanel derives form Panel class. Now I cannot add the items to my CustomControl directly like this

<local:CustomControl x:Name="CControl" Grid.Row="1">
    <Button/>
    <Button/>
    <Button/>
</local:CustomControl>

What can I do for adding the items to my custom control directly from XAML?

Does custom panel have a content property that's not been set? — Andy, Jun 14 '12 at 15:20

score 3 · Answer 1 · 2012-06-14T17:21:41.227

Use [ContentProperty(PropertyName)] on your CustomControl.

And: make sure that the content property initialized to an empty list (must not be null).

E.g.:

[ContentProperty("Items")]
public class CustomControl : UserControl
{

    public static readonly DependencyProperty ItemsProperty =
        DependencyProperty.Register("Items", typeof(UIElementCollection), typeof(CustomControl), new UIPropertyMetadata(null)));

    public UIElementCollection Items     
    {     
        get { return (UIElementCollection) GetValue(ItemsProperty); }     
        set { SetValue(ItemsProperty, value); }     
    }   

    public CustomControl()
    {
        Items = new UIElementCollection();
    }

}

IMPORTANT: Do not create the empty collection inside the dependency property registration, i.e. do not use this:

... new UIPropertyMetadata(new UIElementCollection())

This is considered bad practice, because you then would unintentionally create a singleton collection. Please see Collection-Type Dependency Properties for more details.

Andy · Accepted Answer · 2012-06-14T15:43:47.660

Here is a sample control that allows you to directly add content in the way that you're after.

The lines of interest here are the attribute on top of the MyCustomControl class, this tells the XAML editor which property any directly added content should be placed in.

In the XAML code the important line is the ItemsControl that's bound to the Items property, this actually displays each item.

C#

[ContentProperty("Items")]
public class MyCustomControl : Control
{
    public ObservableCollection<Object> Items
    {
        get { return (ObservableCollection<Object>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }

    public static readonly DependencyProperty ItemsProperty =
        DependencyProperty.Register("Items", typeof(ObservableCollection<Object>), typeof(MyCustomControl), new UIPropertyMetadata(new ObservableCollection<object>()));        
}

XAML

<Style TargetType="{x:Type local:MyCustomControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyCustomControl}">
                <ItemsControl ItemsSource="{TemplateBinding Items}"  />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<local:MyCustomControl>
    <Button />
    <Button />
</local:MyCustomControl>

If the C# property looks a bit verbose, don't forget it's a code snippit, just type propdp and press tab twice. — Andy, Jun 14 '12 at 15:37

How to modify ControlTemplate to add items directly to my custom control

2 Answers2