如何将工具栏添加到WPF中列表框的底部,顶部,左侧或右侧?
问题描述:
我有一个带有圆角的样式的列表框。我想在列表框中添加一个与该特定列表框相关的工具栏。目前,如果我在包含列表框的网格中添加一个工具栏,它将重叠行中的最后一个项目(取决于工具栏的高度)。有没有人有任何想法来实现这个最好的方法?我知道我可以创建一个与列表框边缘相匹配的边框控件,然后放置一个带有无边框样式的列表框,并将其放在主工具栏的底部,但我希望有更好的方法保持我当前的列表框样式,只是在列表框底部放置一个不隐藏任何列表框项目的工具栏。如何将工具栏添加到WPF中列表框的底部,顶部,左侧或右侧?
感谢,
约翰
答
不知道我遵循完全,但我认为你有两个选择:
- 整合
ToolBar
到ListBox
模板,可能通过编写扩展ListBox
并增加了一个属性来设置ToolBar
控制项目。 - 关闭
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>
在这两种情况下,结果都看起来类似:
alt text http://img42.imageshack.us/img42/372/screenshotof.png
答
最有可能的,你有什么错宣布在你的代码,如果事情被视觉重叠。如果你希望它们不要重叠,你应该让你的ListBox用Grid.Row =“0”和你的工具栏作为Grid.Row =“1”(或类似的东西)声明。 This MSDN article很好地解释了网格布局。
如果您ListBoxItems没有数据绑定,您可以只需添加一个ListBoxItem的自定义样式在列表中的最后一项。否则,您可以使用DataTemplateSelector根据绑定的内容格式化您的项目样式。