Configurable HeaderTemplate

Question

I have about 12 Expanders that need to have a custom HeaderTemplate. The HeaderTemplate has a textblock to display the header text, along with a button. The button has a custom control template so that I can display the button as a Path within a VisualBrush.

<Expander VerticalAlignment="Top"
            Header="Fields"
            IsExpanded="True">
    <Expander.HeaderTemplate>
        <DataTemplate>
            <DockPanel LastChildFill="False">
                <TextBlock VerticalAlignment="Center"
                            DockPanel.Dock="Left" 
                            FontSize="14" 
                            Foreground="{DynamicResource IdealForegroundColorBrush}" 
                            Text="{Binding}"/>
                <Button DockPanel.Dock="Right" Margin="0 0 10 0"
                        Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle Fill="Transparent" />
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    Content="{TemplateBinding Content}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Grid>
                        </ControlTemplate>
                    </Button.Template>
                    <Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" />
                </Button>
            </DockPanel>
        </DataTemplate>
    </Expander.HeaderTemplate>

I would like to re-use this template across all 12 Expanders, but need to specify what icon and Command the button within the template will use. How would I go about doing that? Can this be achieved by breaking the data template up in to a series of templates? What I want to do is move the template into a static resource

<Expander VerticalAlignment="Top"
            Header="Fields"
            IsExpanded="True"
            HeaderTemplate="{StaticResource IconHeader}">

I'm just not sure how to provide the template what Command and Icon resource it should use. Would a Dependency property make sense here?

Thanks.

Answer 1

I believe that there are at least to ways to achieve this. First is to inherit from Expander, extend it with your Dependency properties and bind to them inside DataTemplate.

Another way to do this is to create some attached properties, and bind to them inside DataTemplate as below:

public class TemplateConfig
{
    public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached("Command", typeof (ICommand), typeof (TemplateConfig), new PropertyMetadata(default(ICommand)));

    public static void SetCommand(DependencyObject element, ICommand value)
    {
        element.SetValue(CommandProperty, value);
    }

    public static ICommand GetCommand(DependencyObject element)
    {
        return (ICommand) element.GetValue(CommandProperty);
    }

    public static readonly DependencyProperty IconProperty = DependencyProperty.RegisterAttached("Icon", typeof (VisualBrush), typeof (TemplateConfig), new PropertyMetadata(default(VisualBrush)));

    public static void SetIcon(DependencyObject element, VisualBrush value)
    {
        element.SetValue(IconProperty, value);
    }

    public static VisualBrush GetIcon(DependencyObject element)
    {
        return (VisualBrush) element.GetValue(IconProperty);
    }
}

Header template:

    <DataTemplate x:Key="ExpanderHeaderTemplate">
        <DockPanel LastChildFill="False">
            <TextBlock VerticalAlignment="Center"
                       DockPanel.Dock="Left"
                       FontSize="14"
                       Text="{Binding}" />
            <Button Margin="0 0 10 0"
                    Command="{Binding Path=(test:TemplateConfig.Command),
                                      RelativeSource={RelativeSource AncestorType=Expander}}"
                    DockPanel.Dock="Right">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle Fill="Transparent" />
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Content="{TemplateBinding Content}" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
                <Rectangle Width="20"
                           Height="20"
                           Fill="{Binding Path=(test:TemplateConfig.Icon),
                                          RelativeSource={RelativeSource AncestorType=Expander}}" />
            </Button>
        </DockPanel>
    </DataTemplate>

and finally expander:

    <Expander VerticalAlignment="Top"
              Header="Fields"
              HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"
              IsExpanded="True"
              test:TemplateConfig.Command="{Binding SomeCommand}"
              test:TemplateConfig.Icon="{StaticResource VisualBrush}" />  

Hope this helps.