WPF的ToolBar控件
在WPF中，ToolBarTray和ToolBar控件一起使用来创建工具栏容器。
ToolBarTray可以包含多个ToolBar，而Band和BandIndex属性用于控制ToolBar在ToolBarTray中的布局。
Band和BandIndex属性
Band：表示ToolBar在ToolBarTray中所处的行（或带区）的索引。Band索引从0开始， Band值相同的ToolBar位于同一行。
BandIndex：表示在同一Band（行）中ToolBar的显示顺序。BandIndex值越小，ToolBar在行中的位置越靠前（左）。
WPF ToolBar的Band和BandIndex属性详解
Band和BandIndex是ToolBar在ToolBarTray中布局的两个关键属性，它们共同决定了工具栏的位置和排列顺序。
基本概念
Band属性
- 作用：定义工具栏所在的行（带区）
- 类型：
int - 默认值：0
- 说明：Band值相同的工具栏会显示在同一行
BandIndex属性
- 作用：在同一个Band中定义工具栏的显示顺序
- 类型：
int - 默认值：0
- 说明：BandIndex值较小的工具栏会显示在左侧
实际示例
<Window x:Class="ToolBarExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Band和BandIndex示例" Height="400" Width="600">
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" Background="LightBlue">
<!-- 第一行工具栏 -->
<ToolBar Band="0" BandIndex="0" Background="LightYellow">
<Label Content="Band=0, BandIndex=0" FontWeight="Bold"/>
<Button Content="文件"/>
<Button Content="编辑"/>
<Button Content="视图"/>
</ToolBar>
<ToolBar Band="0" BandIndex="1" Background="LightGreen">
<Label Content="Band=0, BandIndex=1" FontWeight="Bold"/>
<Button Content="工具"/>
<Button Content="窗口"/>
<Button Content="帮助"/>
</ToolBar>
<ToolBar Band="0" BandIndex="2" Background="LightCoral">
<Label Content="Band=0, BandIndex=2" FontWeight="Bold"/>
<Button Content="设置"/>
<Button Content="关于"/>
</ToolBar>
<!-- 第二行工具栏 -->
<ToolBar Band="1" BandIndex="0" Background="LightPink">
<Label Content="Band=1, BandIndex=0" FontWeight="Bold"/>
<Button Content="新建"/>
<Button Content="打开"/>
<Button Content="保存"/>
</ToolBar>
<ToolBar Band="1" BandIndex="1" Background="LightSeaGreen">
<Label Content="Band=1, BandIndex=1" FontWeight="Bold"/>
<Button Content="复制"/>
<Button Content="剪切"/>
<Button Content="粘贴"/>
</ToolBar>
<!-- 第三行工具栏 -->
<ToolBar Band="2" BandIndex="0" Background="LightGoldenrodYellow">
<Label Content="Band=2, BandIndex=0" FontWeight="Bold"/>
<Button Content="加粗"/>
<Button Content="斜体"/>
<Button Content="下划线"/>
</ToolBar>
</ToolBarTray>
<Grid>
<TextBlock Text="观察不同Band和BandIndex的工具栏排列"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="16" TextAlignment="Center"/>
</Grid>
</DockPanel>
</Window>
布局规则详解
1. 同一Band内的排列
<!-- 这三个工具栏都在Band=0行 -->
<ToolBar Band="0" BandIndex="0">...左边...</ToolBar>
<ToolBar Band="0" BandIndex="1">...中间...</ToolBar>
<ToolBar Band="0" BandIndex="2">...右边...</ToolBar>
2. 不同Band的排列
<!-- 从上到下的三行工具栏 -->
<ToolBar Band="0" BandIndex="0">第一行</ToolBar>
<ToolBar Band="1" BandIndex="0">第二行</ToolBar>
<ToolBar Band="2" BandIndex="0">第三行</ToolBar>
动态调整示例
<Window x:Class="ToolBarExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="动态Band调整示例" Height="500" Width="700">
<Window.Resources>
<Style TargetType="ToolBar">
<Setter Property="Background" Value="#F0F8FF"/>
<Setter Property="Margin" Value="2"/>
</Style>
</Window.Resources>
<DockPanel>
<!-- 控制面板 -->
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal"
Background="White" Height="40">
<TextBlock Text="调整Band和BandIndex:" VerticalAlignment="Center" Margin="10,0"/>
<ComboBox x:Name="BandComboBox" Width="80" Margin="5"
SelectionChanged="BandComboBox_SelectionChanged">
<ComboBoxItem Content="0"/>
<ComboBoxItem Content="1"/>
<ComboBoxItem Content="2"/>
</ComboBox>
<ComboBox x:Name="BandIndexComboBox" Width="80" Margin="5"
SelectionChanged="BandIndexComboBox_SelectionChanged">
<ComboBoxItem Content="0"/>
<ComboBoxItem Content="1"/>
<ComboBoxItem Content="2"/>
</ComboBox>
<Button Content="重置布局" Click="ResetLayout_Click" Margin="10" Padding="10,5"/>
</StackPanel>
<!-- 工具栏区域 -->
<ToolBarTray DockPanel.Dock="Top" Name="MainTray" Background="White">
<ToolBar Name="ToolBar1" Band="0" BandIndex="0">
<Label Content="工具栏1" FontWeight="Bold" Foreground="DarkBlue"/>
<Button Content="新建"/>
<Button Content="打开"/>
<Button Content="保存"/>
</ToolBar>
<ToolBar Name="ToolBar2" Band="0" BandIndex="1">
<Label Content="工具栏2" FontWeight="Bold" Foreground="DarkGreen"/>
<Button Content="复制"/>
<Button Content="剪切"/>
<Button Content="粘贴"/>
</ToolBar>
<ToolBar Name="ToolBar3" Band="1" BandIndex="0">
<Label Content="工具栏3" FontWeight="Bold" Foreground="DarkRed"/>
<Button Content="加粗"/>
<Button Content="斜体"/>
<Button Content="下划线"/>
</ToolBar>
</ToolBarTray>
<!-- 状态显示 -->
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock x:Name="StatusText" FontSize="14" TextAlignment="Center"
TextWrapping="Wrap" Margin="20"/>
<TextBlock Text="当前布局状态:" FontWeight="Bold" Margin="0,10,0,5"/>
<TextBlock x:Name="LayoutInfoText" TextAlignment="Center"/>
</StackPanel>
</Grid>
</DockPanel>
</Window>
对应的C#代码：
using System.Windows;
using System.Windows.Controls;
namespace ToolBarExample
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
UpdateLayoutInfo();
BandComboBox.SelectedIndex = 0;
BandIndexComboBox.SelectedIndex = 0;
}
private void BandComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ToolBar1 != null && BandComboBox.SelectedItem is ComboBoxItem item)
{
int band = int.Parse(item.Content.ToString());
ToolBar1.Band = band;
UpdateLayoutInfo();
}
}
private void BandIndexComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ToolBar1 != null && BandIndexComboBox.SelectedItem is ComboBoxItem item)
{
int bandIndex = int.Parse(item.Content.ToString());
ToolBar1.BandIndex = bandIndex;
UpdateLayoutInfo();
}
}
private void ResetLayout_Click(object sender, RoutedEventArgs e)
{
ToolBar1.Band = 0;
ToolBar1.BandIndex = 0;
ToolBar2.Band = 0;
ToolBar2.BandIndex = 1;
ToolBar3.Band = 1;
ToolBar3.BandIndex = 0;
BandComboBox.SelectedIndex = 0;
BandIndexComboBox.SelectedIndex = 0;
UpdateLayoutInfo();
}
private void UpdateLayoutInfo()
{
if (ToolBar1 != null)
{
StatusText.Text = $"工具栏1: Band={ToolBar1.Band}, BandIndex={ToolBar1.BandIndex}";
LayoutInfoText.Text = $"工具栏1: Band={ToolBar1.Band}, BandIndex={ToolBar1.BandIndex}\n" +
$"工具栏2: Band={ToolBar2.Band}, BandIndex={ToolBar2.BandIndex}\n" +
$"工具栏3: Band={ToolBar3.Band}, BandIndex={ToolBar3.BandIndex}";
}
}
}
}
实际应用场景
场景1：分组工具栏
<ToolBarTray>
<!-- 文件操作组 -->
<ToolBar Band="0" BandIndex="0">
<TextBlock Text="文件:" FontWeight="Bold" Margin="5,0"/>
<Button Content="新建"/>
<Button Content="打开"/>
<Button Content="保存"/>
</ToolBar>
<!-- 编辑操作组 -->
<ToolBar Band="0" BandIndex="1">
<TextBlock Text="编辑:" FontWeight="Bold" Margin="5,0"/>
<Button Content="复制"/>
<Button Content="剪切"/>
<Button Content="粘贴"/>
</ToolBar>
<!-- 格式操作组 -->
<ToolBar Band="1" BandIndex="0">
<TextBlock Text="格式:" FontWeight="Bold" Margin="5,0"/>
<Button Content="加粗"/>
<Button Content="斜体"/>
<Button Content="下划线"/>
</ToolBar>
</ToolBarTray>
场景2：响应式工具栏布局
<ToolBarTray>
<!-- 主要功能 -->
<ToolBar Band="0" BandIndex="0">
<Button Content="常用功能1"/>
<Button Content="常用功能2"/>
</ToolBar>
<!-- 次要功能 -->
<ToolBar Band="0" BandIndex="1">
<Button Content="辅助功能1"/>
<Button Content="辅助功能2"/>
</ToolBar>
<!-- 扩展功能（在小屏幕上可能隐藏） -->
<ToolBar Band="1" BandIndex="0" x:Name="ExtendedToolBar">
<Button Content="扩展功能1"/>
<Button Content="扩展功能2"/>
</ToolBar>
</ToolBarTray>
重要注意事项
- Band值可以跳跃：不需要连续，Band=0和Band=2之间可以没有Band=1
- BandIndex决定同一行内的顺序：同一Band中，BandIndex小的在左，大的在右
- 用户可调整：用户可以在运行时拖动工具栏改变Band和BandIndex
- 空Band的处理：如果某个Band没有工具栏，该行不会显示
- 性能考虑：Band值过大会创建很多空行，影响性能
总结
- Band = 行号（垂直位置）
- BandIndex = 列号（水平位置）
- 两者配合可以精确控制工具栏在ToolBarTray中的布局
- 特别适合需要分组显示或复杂布局的工具栏场景
通过合理使用Band和BandIndex，可以创建出既美观又实用的工具栏布局。
浙公网安备 33010602011771号