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.

txt1.gif
 

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.

tbt2.gif
 

Figure 2.

Now add ToolBar in the ToolBarTray to press add button.

tbt3.gif
 

Figure 3.

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

tbt4.gif
 

Figure 4.

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

tbt5.gif
 

Figure 5.

XAML code

Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

    <Grid>

        <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" />

            </ToolBar>

        </ToolBarTray>

        <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" />

    </Grid>

</Window>

Now run the application and test it.

tbt6.gif
 

Figure 6.

Now drop some text into RichTextBox.

tbt7.gif
 

Figure 7.

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

tbt8.gif
 

Figure 8.

Now select some text.

tbt9.gif
 

Figure 9.

Now press the cut Button.

tbt10.gif
 

Figure 10.

We can add also more than one Toolbar. such as

XAML code

<Window x:Class="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">

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

               LastChildFill="True">

        <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>

            <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" />

                </ComboBox>

                <Separator Margin="5"/>

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

                             IsChecked="True"/>

                <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" />

            </ToolBar>

        </ToolBarTray>

        <RichTextBox Name="rtbTextBox">

            <FlowDocument>

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

                    This example shows a ToolBarTray

                </Paragraph>

            </FlowDocument>

        </RichTextBox>

    </DockPanel>

</Window>

The form looks like this.

tbt11.gif
 

Figure 11.

Now run the application and test it.

tbt12.gif
 

figure 12

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

tbt13.gif
 

Figure 13.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.