ToolBars in Avalon : CSharp Feeds

ToolBars in Avalon

by Keyvan Nayyeri via Keyvan Nayyeri on 9/9/2006 6:39:35 PM

Creating a ToolBar is easy and sweet in Avalon. Using XAML markups or Avalon codes you can create a ToolBar quickly. In this post I introduce this control in Avalon.

ToolBar in XAML

Building a simple ToolBar is as easy as writing a <ToolBar /> element. Except some common attributes this element has following important attributes for its own:

IsOverFlowOpen: A Boolean value that specifies the position of ToolBarOverflowPanel at start.
Band: Determines the position of ToolBar in a ToolBarTray.
BandIndex: Determines the position of ToolBar in a ToolBarTray.

Following code creates a simple ToolBar with four Buttons on it:

<Window x:Class="ToolBarExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Toolbar Example" Height="200" Width="300"
    >
  <ToolBar
  Margin="5"  
  Width="200" 
  Height="50">
    <Button>
      <TextBlock Margin="10">A1</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A2</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A3</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A4</TextBlock>
    </Button>
  </ToolBar>
</Window>

And this is its output:

ToolBarPanel in XAML

But ToolBar is more than this. You can create a ToolBarPanel to show it beside your ToolBar. Creating a ToolBarPanel is as easy as putting a <ToolBarPanel /> element in your XAML markup. ToolBarPanel has these attributes:

OverFlowMode: Specifies the behavior of ToolBarPanel.
Orientation: Adjusts the orientation of ToolBarPanel and can get Horizontal or Vertical values. Default is Vertical.

Below code adds a ToolBarPanel to my previous ToolBar:

<Window x:Class="ToolBarExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Toolbar Example" Height="200" Width="300"
    >
  <ToolBar Band="0" BandIndex="0"
    Margin="5"  
    Width="200" 
    Height="50">
    <Button>
      <TextBlock Margin="10">A1</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A2</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A3</TextBlock>
    </Button>
    <Button>
      <TextBlock Margin="10">A4</TextBlock>
    </Button>
 
    <ToolBarPanel ToolBar.OverflowMode="Always">
      <Button>
        <TextBlock Margin="10">A1</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A2</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A3</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A4</TextBlock>
      </Button>
    </ToolBarPanel>
  </ToolBar>
</Window>

And its output:

ToolBarTray in XAML

Another important element around ToolBar is ToolBarTray which is a container for a set of ToolBar elements. This element has two important attributes:

IsLocked: Enables or disables the ability to drag and drop child ToolBars in a ToolBarTray. Default is False.
Orientation: Represents the initial form of ToolBar items in a ToolBarTray. Default is Horizontal.

Following code creates two ToolBars in a ToolBarTray:

<Window x:Class="ToolBarExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Toolbar Example" Height="101" Width="362"
    >
  <ToolBarTray>
    <ToolBar
      Margin="5"  
      Width="200" 
      Height="50">
      <Button>
        <TextBlock Margin="10">A1</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A2</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A3</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="10">A4</TextBlock>
      </Button>
    </ToolBar>
    <ToolBar
      Margin="5"  
      Width="130" 
      Height="40">
      <Button>
        <TextBlock Margin="5">B1</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="5">B2</TextBlock>
      </Button>
      <Button>
        <TextBlock Margin="5">B3</TextBlock>
      </Button> 
    </ToolBar>
  </ToolBarTray>
</Window>

Running above XAML markup you get this:

ToolBar has two attributes that can help you to set the initial position of your ToolBars in a ToolBarTray: Band and BandIndex. They are very similar to a row or column index for a ToolBar element.

For example, by setting BandIndex to 0 for both previous ToolBars and setting Band to 0 for first one and 1 for second ToolBar, you get this result:

Create a ToolBar Programmatically

Usually creating your UI via XAML markup is absolutely easier and takes less code than creating them programmatically. But this is an example of creating a very simple ToolBar with C# codes:

public partial class Window1 : Window
{
    ToolBar toolbar;
    Button button1;
    Button button2;
    TextBlock textBlock1;
    TextBlock textBlock2;
 
    public Window1()
    {
        this.toolbar = new ToolBar();
        this.toolbar.Margin = new Thickness(5);
        this.toolbar.Width = 120;
        this.toolbar.Height = 50;
 
        // First Button
        this.textBlock1 = new TextBlock();
        this.textBlock1.Text = "A1";
        this.textBlock1.Margin = new Thickness(10);
        this.button1 = new Button();
        this.button1.Content = this.textBlock1;
 
        // Second Button
        this.textBlock2 = new TextBlock();
        this.textBlock2.Text = "A2";
        this.textBlock2.Margin = new Thickness(10);            
        this.button2 = new Button();
        this.button2.Content = this.textBlock2;
 
 
        this.toolbar.Items.Add(this.button1);
        this.toolbar.Items.Add(this.button2);
 
        this.Content = this.toolbar;
    }
}