WPF ToolBar Using VB.NET

Toolbar control is very useful in our application or page because it contains the controls which invoke commands.
  • 3744

Introduction 

Here we will discuss about the WPF Toolbar control. Toolbar control is very useful in our application or page because it contains the controls which invoke commands. It can arrange all the controls in a single row. WPF ToolBar controls are used with the related ToolBarTray control, which provides different layout as well as support for sizing and arranging of toolbars. We used the ToolbarTray control with it because it gives different style or layout to our Toolbar control. When we add the ToolBar to our page it will look like this and we used ToolbarTray control with it. Here we have used Buttons, Images , ToolbarTray control and a Toolbar. WPF provides a greater facility to the users by which users can create controls easily and can understand code of that control easily. A ToolBar usually contains buttons which invoke commands. When we add a Tool bar control from toolbox it appears in toolbox. 

Toolbar in Toolbox

pehli.png

Creating a Toolbar 

when we create a Toolbar we need also a bar which name is ToolbarTray control. we can create a tool bar easily by using of it. Here we have buttons, ToolbarTray control and we can set images on the button. Here are the cut, copy, paste and zoom in, zoom out buttons on Toolbar with images. and code of XAML, When we add these buttons to it.

<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="509" Width="853">
<Grid>
<
ToolBarTray Background="White">
<
ToolBar Band="1" BandIndex="1">
<
Button>
<
Image Source="images\img2.png"/>
</
Button>
<
Button>
<
Image Source="images\img3.png"/>
</
Button>
<
Button>
<
Image Source="images\img1.png"/>
</
Button>
<
Button>
<
Image Source="images\img7.png"/>
</
Button>
<
Button>
<
Image Source="images\img9.png"/>
</
Button>
<
Button>
<
Image Source="images\img5.png"/>
</
Button>
<
Button>
<
Image Source="images\img4.png"/>
</
Button>
</
ToolBar>
</
ToolBarTray>
</
Grid>
</
Window>

Output for this code will look like this on main window.

dusri.png

Toolbar with simple buttons

Here is a Toolbar with simple buttons and it will show employee details. Toolbar having buttons related to employee details.

Code

<Grid>
<
Grid.RowDefinitions>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="*"/>
<
RowDefinition Height="Auto"/>
</
Grid.RowDefinitions>
<
DockPanel LastChildFill="False" 
   HorizontalAlignment
="Stretch" Background
="#FFCAA0F0">
<ToolBar x:Name="tbToolBar" DockPanel.Dock="Left" 
   Background
="{x:Null}" Width
="370">
<Button ToolTip="New">
<
TextBlock Text="New"></TextBlock>
</
Button>
<
Button ToolTip="Save">
<
TextBlock Text="Save"></TextBlock>
</
Button>
<
Button ToolTip="Details"> 
<TextBlock Text="Details"></TextBlock> 
</Button> 
<Button ToolTip="Work status">
<
TextBlock Text="WorkStatus"></TextBlock>
</
Button>
<
Button ToolTip="Technology">
<
TextBlock Text="Technology"></TextBlock>
</Button>
<
Button ToolTip="Experience">
<
TextBlock Text="Experience"></TextBlock>
</
Button>
<
Button ToolTip="Delete">
<
TextBlock Text="Delete"></TextBlock>
</
Button>
</
ToolBar>
<
ToolBar x:Name="tbToolBarHelp" DockPanel.Dock="Right" 
   Background
="{x:Null
}">
<Button ToolTip="Help">
<
TextBlock Text="Help"></TextBlock>
</
Button>
</
ToolBar>
</
DockPanel>
<
Border Grid.Row="1" Background="#FFE8F9FF" 
   Padding
="20,0,0,0" BorderBrush="#FF0032AA" 
   BorderThickness
="0,1,0,0" Margin
="-37,0,0,0">
<Grid Background="#FFA6D1AA" Width="937">
<
Grid.RowDefinitions>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="Auto"/>
<
RowDefinition Height="67*" />
<
RowDefinition Height="277*" />
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="154"/>
<
ColumnDefinition Width="745*"/>
</
Grid.ColumnDefinitions><TextBlock Grid.ColumnSpan="2" 
  Text
="Employee login" Margin="0,10,757,10" FontSize="18" FontWeight="Bold" 
  Foreground
="#FFEF2582"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="Employee name"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="Email"/>
<TextBlock Grid.Column="0" Grid.Row="3" Text="Password"/>
<TextBox Grid.Column="1" Grid.Row="1" Width="150"
  
HrizontalAlignment="Left"/>
<TextBox Grid.Column="1" Grid.Row="2" Width="150" 
  HorizontalAlignment="Left" Margin="0,5,0,0"/>
<PasswordBox Grid.Column="1" Grid.Row="3" Width="150" 
  HorizontalAlignment
="Left"  Margin
="0,5,0,0"/>
<Button ToolTip="Employee Login" Grid.Column="1" Margin="0,6,703,33" 
  Grid.Row
="4" Background="#FFE6CBCB">
<
TextBlock Text="Login" Foreground="#FFEC1B60" 
  Background
="{x:Null}" FontWeight="Bold"></TextBlock>
</
Button>
</
Grid>
</
Border>
</
Grid>

Output for this code is a Employee login page and a Toolbar which have some buttons with related to employee.

teesri.png

 I hope this articles will help you to create a toolbar with different types of controls.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.