TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF ToolBar Example: Uses ToolBarTray
ToolBar. Programs often have buttons that are easy to access. These are stored in ToolBars. We arrange ToolBars in a ToolBarTray. We use nested controls, like Buttons, to add functionality to our ToolBars.
First, a ToolBarTray is used to contain ToolBars. So we should add it first. Please drag a ToolBarTray from the Toolbox to your window Grid. You will probably want to adjust its size by dragging its corner.
Caution: When trying to nest a ToolBar within a ToolBarTray, you may need to simply edit the XAML. It may not work by dragging.
In this example, I add two ToolBars to the ToolBarTray. In the first ToolBar, I add two Buttons—a ToolBar can store Buttons and Images and other controls, just like other program areas.
Band: On the ToolBar element, add a Band attribute. This is the vertical index, starting at 0, of the ToolBar.
BandIndex: This is the horizontal index of the ToolBar, starting at zero on the left. It goes up when two ToolBars are on the same line.
Example markup: XAML
<Window x:Class="WpfApplication11.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ToolBarTray HorizontalAlignment="Left" Height="74" Margin="10,10,0,0"
VerticalAlignment="Top" Width="497">
<ToolBar HorizontalAlignment="Right" Height="27"
Band="0" BandIndex="0">
<Button Content="In band 1" Height="22" VerticalAlignment="Top" Width="75"/>
<Button Content="Button" Height="22" VerticalAlignment="Top" Width="75"/>
</ToolBar>
<ToolBar HorizontalAlignment="Left" Height="27"
Band="1" BandIndex="0">
<Button Content="In band 2" Height="22" VerticalAlignment="Top" Width="75"/>
</ToolBar>
</ToolBarTray>
</Grid>
</Window>
In testing this program, try dragging the ToolBars around. You should be able to position them on the same band, next to each other. Please see the next example for a way to access the Band and BandIndex properties with C# code.
Note: Some attributes on the above XAML, including the HorizontalAlignment ones are not necessary for the program to correctly work.
HorizontalAlignmentExample 2. Let us try something else. Variety makes life more entertaining. In this example, I added a Click event handler to the first Button in the above XAML. Type in Click, press equals and have Visual Studio make a Button_Click event.
Name: Please also assign a Name to the first ToolBar so it is easy to access from the Button_Click event handler.
NameExample markup 2: XAML
<ToolBar HorizontalAlignment="Right" Height="27" Band="0" Name="Bar1">
<Button Content="In band 1" Height="22" VerticalAlignment="Top" Width="75"
Click="Button_Click"/>
Next, we add some code to the contents of Button_Click. When you run it, this code will help you see how the Band and BandIndex properties change as ToolBars are dragged. It displays both Band and BandIndex.
Tip: The BandIndex is the horizontal index, while the Band is the vertical index. This program makes this concept clear.
Example code: C#
using System.Windows;
namespace WpfApplication11
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
// ... Change the title when this button is clicked.
this.Title = "Band: " + this.Bar1.Band.ToString() +
"; BandIndex: " + this.Bar1.BandIndex.ToString();
}
}
}
Summary. Programs can be complex to use, with lots of buttons. The ToolBar control, and its companion ToolBarPanel, makes it simpler to lay out these buttons. These controls make it possible for user store position controls.
Thus: We position ToolBars within a ToolBarPanel using the Band and BandIndex attributes in XAML.
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop