通过 DataTemplate 的分隔符

Question

我有一个带有绑定 ItemsSource 的 ToolBar，我使用 DataTemplateSelector 在运行时确定 DataTemplate （即 <代码>按钮 / <代码>切换按钮）。

我想添加一个 Separator DataTemplate，我该怎么做？

Answer 1

ToolBar 是一个 ItemsControl，因此它想用“容器”“包装” Items/ItemsSource 中定义的项目。容器是一个可用于显示项目的 UIElement。例如，对于 ListBox，容器是 ListBoxItem。如果一个项目是正确的类型，那么它也可以是它自己的容器。

此设置允许您将字符串列表传递到 ListBox 并让它显示属性并支持选择、键盘导航、样式等。

对于 ToolBar，它确实希望它的项目已经是一个容器（即 UIElement ）。如果该项目不是 UIElement，那么它将用 ContentPresenter 包装它。

现在，容器使用 DataTemplateSelecter 来确定如何显示其项目。但是您需要该项目是 Button、ToggleButton、Separator 等。您建议您应该将容器添加到容器显示的 DataTemplate 中。

还有样式的问题，可以通过这个简单的示例看出：

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=mscorlib" Title="Main"
        Height="500" Width="500">
    <DockPanel LastChildFill="False">
        <ToolBar DockPanel.Dock="Top">
            <ToolBar.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" />
                </DataTemplate>
            </ToolBar.ItemTemplate>
            <system:String>Test1</system:String>
            <system:String>Test2</system:String>
        </ToolBar>
        <ToolBar DockPanel.Dock="Top">
            <Button>Test1</Button>
            <Button>Test2</Button>
        </ToolBar>
    </DockPanel>
</Window>

顶部工具栏中的按钮将以与不在工具栏中相同的外观呈现。底部工具栏中的按钮将具有“工具栏”外观。分隔符也是如此。

您可以像这样手动应用样式：

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=mscorlib" Title="Main"
        Height="500" Width="500">
    <DockPanel LastChildFill="False">
        <ToolBar DockPanel.Dock="Top">
            <ToolBar.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}"
                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" /> <!-- Add the Style attribute -->
                </DataTemplate>
            </ToolBar.ItemTemplate>
            <system:String>Test1</system:String>
            <system:String>Test2</system:String>
        </ToolBar>
        <ToolBar DockPanel.Dock="Top">
            <Button>Test1</Button>
            <Button>Test2</Button>
        </ToolBar>
    </DockPanel>
</Window>

使用分隔符也会遇到同样的问题。因此，您需要像这样手动应用样式：

<DataTemplate x:Key="MySeparatorTemplate">
    <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
</DataTemplate>

您应该能够在 DataTemplateSelector 中使用上面的 DataTemplate，就像使用按钮一样。