wpf - 通过 DataTemplate 分隔符

Question

我有一个 ToolBar有界ItemsSource , 我正在使用 DataTemplateSelector确定DataTemplate在运行时(即 Button/ToggleButton )。

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

Answer 1

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

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

在 ToolBar 的情况下，它真的希望它的项目已经是一个容器(即 UIElement)。如果该项目不是 UIElement，则它将用 ContentPresenter 包装它。

现在，容器使用 DataTemplateSelecter 来确定如何显示它的项目。但是你需要item是Button、ToggleButton、Separator等。你建议你在容器显示的DataTemplate中添加容器。

还有Styles的问题，通过这个简单的例子可以看出:

<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，就像使用按钮一样。