可配置的HeaderTemplate [英] Configurable HeaderTemplate

问题描述

我大约有12个需要自定义HeaderTemplate的扩展器. HeaderTemplate具有一个用于显示标题文本的文本块以及一个按钮.该按钮具有自定义控件模板，因此我可以在VisualBrush中将按钮显示为Path.

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>

我想在所有12个Expanders中重用此模板，但是需要指定模板中将使用的图标和命令按钮.我将如何去做?是否可以通过将数据模板分解为一系列模板来实现?我要做的就是将模板移到静态资源中

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}">

我只是不确定如何为模板提供应使用的命令和图标资源. Dependency属性在这里有意义吗?

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?

谢谢.

推荐答案

我认为至少有一些方法可以实现这一目标.首先是从Expander继承，使用您的Dependency属性对其进行扩展，并在DataTemplate中将其绑定.

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.

执行此操作的另一种方法是创建一些附加属性，并在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);
    }
}

标题模板:

    <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>

最后是扩展器:

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

希望这会有所帮助.

这篇关于可配置的HeaderTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！