WPF ToolBarTray control in VB.NET

In this article we will learn how to use ToolBarTray control in WPF using VB.NET.
  • 3952

In this article we will learn how to use ToolBarTray control in WPF using VB.NET.

ToolBarTray control

ToolBarTray is an ItemsControl and handles multiple toolbars in the same tray. It is divided by Bands and each Band can contain multiple toolbars.

Properties - This control has the following properties.


Figure 1.

ToolBar Control

ToolBar controls are containers for a group of commands or controls which are typically related in their function. A ToolBar usually contains buttons which invoke commands.

Properties - ToolBar control has two important properties.

Band - Band indicates the position in which the ToolBar is placed within its parent ToolBarTray.

BandIndex - BandIndex indicates the order in which the ToolBar is placed within its band.

For example

Drag a ToolBarTray and RichTextBox control from the toolbox on the form and select ToolBarTray control then press F4 to property window.

Select ToolBar collection property.


Figure 2.

Now add ToolBar in the ToolBarTray to press add button.


Figure 3.

Now click on the items collection property of the ToolBar and set the content and command property.


Figure 4.

Now click on the OK Button. The form looks like this.


Figure 5.

XAML code

Window x:Class="MainWindow"



    Title="MainWindow" Height="338" Width="525">


        <ToolBarTray Height="40" HorizontalAlignment="Left" Name="ToolBarTray1" VerticalAlignment="Top" Width="481" Background="Aqua">

            <ToolBar Band="0">

                <Button Content="Cut" Command="ApplicationCommands.Cut" />

                <Button Content="Copy" Command="ApplicationCommands.Copy" />

                <Button Content="paste" Command="ApplicationCommands.Paste" />



        <RichTextBox Height="190" HorizontalAlignment="Left" Margin="0,37,0,0" Name="RichTextBox1" VerticalAlignment="Top" Width="469" />

        <Border BorderBrush="Silver" BorderThickness="1" Height="100" HorizontalAlignment="Left" Margin="86,403,0,0" Name="Border1" VerticalAlignment="Top" Width="200" />



Now run the application and test it.


Figure 6.

Now drop some text into RichTextBox.


Figure 7.

Now select the Text and enter the copy Button and then press paste Button.


Figure 8.

Now select some text.


Figure 9.

Now press the cut Button.


Figure 10.

We can add also more than one Toolbar. such as

XAML code

<Window x:Class="MainWindow"



   Title="MainWindow" Height="350" Width="525">

    <DockPanel FocusManager.FocusedElement="{Binding ElementName=rtbTextBox}"


        <ToolBarTray DockPanel.Dock="Top">

            <ToolBar Band="0">

                <Button Command="ApplicationCommands.Cut" Content="Cut" />

                <Button Command="ApplicationCommands.Copy" Content="Copy" />

                <Button Command="ApplicationCommands.Paste" Content="Paste" />


            <ToolBar Band="1">

                <TextBlock Text="Font Size" VerticalAlignment="Center" />

                <ComboBox Name="cbxFontSize">

                    <ComboBoxItem Content="12" IsSelected="True" Margin="2" />

                    <ComboBoxItem Content="14" Margin="2" />

                    <ComboBoxItem Content="16" Margin="2" />

                    <ComboBoxItem Content="18" />


                <Separator Margin="5"/>

                <RadioButton Command="EditingCommands.AlignLeft" Content="Left"


                <RadioButton Command="EditingCommands.AlignCenter"

                             Content="Center" />

                <RadioButton Command="EditingCommands.AlignRight"

                             Content="Right" />

                <Separator Margin="5"/>

                <Button Command="EditingCommands.ToggleBold"

                        Content="Bold" />

                <Button Command="EditingCommands.ToggleItalic"

                        Content="Italic" />

                <Button Command="EditingCommands.ToggleUnderline"

                        Content="Underline" />



        <RichTextBox Name="rtbTextBox">


                <Paragraph FontSize="{Binding ElementName=cbxFontSize, Path=SelectedItem.Content}">

                    This example shows a ToolBarTray






The form looks like this.


Figure 11.

Now run the application and test it.


figure 12

Now select the text and click bold and increase text size.


Figure 13.


More Articles

© 2020 DotNetHeaven. All rights reserved.