Question

我有大约12个需要自定义HeaderTemplate的扩展程序。 HeaderTemplate有一个文本块，用于显示标题文本以及一个按钮。该按钮具有自定义控件模板，以便我可以在Path内将该按钮显示为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中重复使用此模板，但需要指定模板中的按钮将使用的图标和命令。我该怎么做呢？这可以通过将数据模板分解为一系列模板来实现吗？我想要做的是将模板移动到静态资源

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

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

感谢。

Answer 1

我相信至少有办法实现这一目标。首先是从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}" />

希望这有帮助。

可配置的HeaderTemplate

1 个答案: