可配置的标题模板

Question

我有大约 12 个扩展器需要自定义 HeaderTemplate。 HeaderTemplate 有一个文本块来显示 header 文本，还有一个按钮。该按钮具有自定义控件模板，因此我可以将按钮显示为 VisualBrush.

中的 Path

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

我想 re-use 在所有 12 个 Expanders 中使用此模板，但需要指定模板中的按钮将使用的图标和命令。我该怎么做呢？这可以通过将数据模板分解为一系列模板来实现吗？我想做的是将模板移动到静态资源中

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

我只是不确定如何为模板提供它应该使用的命令和图标资源。依赖项属性在这里有意义吗？

谢谢。

Answer 1

我相信至少有 to 种方法可以实现这一目标。首先是继承自 Expander，使用您的 Dependency 属性扩展它并在 DataTemplate 中绑定到它们。

另一种方法是创建一些附加属性，并在 DataTemplate 中绑定到它们，如下所示：

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

希望对您有所帮助。

可配置的标题模板

Configurable HeaderTemplate

wpf

xaml

controltemplate