如何将工具栏添加到 WPF 中列表框内部的底部、顶部、左侧或右侧？

Question

我有一个具有圆角样式的列表框。我想在属于该特定列表框的列表框中添加一个工具栏。目前，如果我在包含列表框的网格内添加一个工具栏，它将与该行中的最后一项重叠（取决于工具栏的高度）。有谁对实现这一点的最佳方法有任何想法吗？我知道我可以创建一个与列表框边缘的外观相匹配的边框控件，然后在主边框内放置一个无边框样式的列表框，并与底部的工具栏堆叠在一起，但我希望有更好的方法保持我当前的列表框样式，只需在列表框底部放置一个工具栏，不隐藏任何列表框项目。

谢谢，

约翰

Answer 1

不确定我是否完全遵循，但我认为您有几个选择：

1. 将 ToolBar 集成到 ListBox 模板中，可能通过编写扩展 ListBox< 的控件来实现/code> 并添加一个属性来设置 ToolBar 项。
2. 关闭 ListBox 上的 Border 并在其周围粘贴您自己的 Border，该边框也包含 ToolBar。

2 更容易一点，可能就是您想要的。

示例 1

（我没有在此处对 ListBox 进行子类化 - 我只是硬编码了一些工具栏项目）

    <Grid Margin="10">
        <ListBox>
            <ListBox.Template>
                <ControlTemplate TargetType="ListBox">
                    <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="1,1,1,1" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True" CornerRadius="5">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <ToolBarTray Background="White">
                                <ToolBar Band="1" BandIndex="1">
                                    <Button>
                                        Cut
                                    </Button>
                                    <Button>
                                        Copy
                                    </Button>
                                    <Button>
                                        Paste
                                    </Button>
                                </ToolBar>
                                <ToolBar Band="2" BandIndex="1">
                                    <Button>
                                        Undo
                                    </Button>
                                    <Button>
                                        Redo
                                    </Button>
                                </ToolBar>
                            </ToolBarTray>
                            <ScrollViewer Grid.Row="1" Padding="{TemplateBinding Control.Padding}" Focusable="False">
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                            </ScrollViewer>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="Panel.Background" TargetName="Bd">
                                <Setter.Value>
                                    <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ItemsControl.IsGrouping" Value="True">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ListBox.Template>
            <ListBoxItem>One</ListBoxItem>
            <ListBoxItem>Two</ListBoxItem>
            <ListBoxItem>Three</ListBoxItem>
        </ListBox>
    </Grid>

示例 2

<Grid Margin="10">
    <Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" Padding="1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ToolBarTray Background="White">
                <ToolBar Band="1" BandIndex="1">
                    <Button>
                        Cut
                    </Button>
                    <Button>
                        Copy
                    </Button>
                    <Button>
                        Paste
                    </Button>
                </ToolBar>
                <ToolBar Band="2" BandIndex="1">
                    <Button>
                        Undo
                    </Button>
                    <Button>
                        Redo
                    </Button>
                </ToolBar>
            </ToolBarTray>
            <ListBox Grid.Row="1" BorderThickness="0">
                <ListBoxItem>One</ListBoxItem>
                <ListBoxItem>Two</ListBoxItem>
                <ListBoxItem>Three</ListBoxItem>
            </ListBox>
        </Grid>
    </Border>
</Grid>

在这两种情况下，结果看起来都很相似：

< a href="http://img42.imageshack.us/img42/372/screenshotof.png" rel="nofollow noreferrer">替代文本 http://img42.imageshack.us/img42/372/screenshotof.png

Answer 2

如果事情在视觉上重叠，很可能您的代码中声明了错误。如果您不希望它们重叠，则应该使用 Grid.Row="0" 声明 ListBox，并将工具栏声明为 Grid.Row="1" （或类似的内容）。 这篇 MSDN 文章很好地解释了网格布局。

如果您的 ListBoxItems 不是数据绑定的，您只需添加具有自定义样式的 ListBoxItem 作为列表中的最后一项。否则，您可以使用 DataTemplateSelector 进行格式化您的项目样式基于其中绑定的内容。