WPF ToolBars

Similar to Menus, WPF also supports Toolbars for your application. They are fairly simple to use and will hold just about any control. For best usage, you will want to first place a ToolBarTray onto the container (I’m using a DockPanel). The ToolBarTray will handle things like placement and letting users move the toolbars around as needed.

Then, inside your tray place your ToolBar controls. From there simply add whatever controls you wish to place. You would programmatically respond to events on your controls like you normally would, with Click=”” type syntax or whatever is appropriate for the control. Since I’ve demonstrated that in previous lessons I’ll skip it for today.

In this example I’ve created two bars, one with 3 buttons, the other with a mixture of controls.

    <DockPanel>

      <ToolBarTray DockPanel.Dock=Top

                  Background=LightGray>

        <ToolBar Name=ButtonBar >

          <Button>One</Button>

          <Button>Two</Button>

          <Button>Three</Button>

        </ToolBar>

        <ToolBar Name=Mixed>

          <TextBlock>Hunt For it:</TextBlock>

          <TextBox Width=50></TextBox>

          <Button>GO</Button>

        </ToolBar>

      </ToolBarTray>

      <Grid>

        <Grid.ColumnDefinitions>

          <ColumnDefinition Width=3*/>

          <ColumnDefinition Width=*/>

        </Grid.ColumnDefinitions>

        <TextBlock Margin=5,5,0,0

                  VerticalAlignment=Top>

          More Stuff Here

        </TextBlock>

      </Grid>

    </DockPanel>

Note that I put a Grid in the lower half of the Dock area, don’t worry to much about it right now I just wanted to have something to fill the space.

wpf059

Run the app and grab the “Hunt For it” bar down and see what happens:

wpf060 

The ToolBars stack nicely. As you might expect, you may rearrange them as well.

wpf061 

At the end of the ToolBar is the Overflow control, the little thing that looks like a black arrow pointing down. If you resize the Window too small, or drag one ToolBar too close to it’s neighbor, it will act as a drop down with the remaining controls.

wpf062 

Here you can see it even expands outside the boundaries of the Window, in case the Window is not big enough.

wpf063 

It’s possible to lock your ToolBars down, should you not want the users to be able to move them. All you have to do is add a IsLocked=True to the tray declaration.

      <ToolBarTray DockPanel.Dock=Top

                  Background=LightGray

                  IsLocked=True >

If you look carefully, you’ll notice the moving handles are gone, and your ToolBars are locked down as if they were behind jail bars.

wpf064 

While in the above example I’ve placed my ToolBars in a ToolBarTray, it’s not required. You could place a ToolBar out on it’s own. Let’s add one to our Grid, in the column next to the “More Stuff Here” area.

  <DockPanel>

    <!–Tool Bar Tray here, same as previous sample–>

    <Grid>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width=3*/>

        <ColumnDefinition Width=*/>

      </Grid.ColumnDefinitions>

      <TextBlock Margin=5,5,0,0

                VerticalAlignment=Top>

        More Stuff Here

      </TextBlock>

      <ToolBar Grid.Column=1

              Margin=0,5,0,0

              VerticalAlignment=Top

              ToolBarTray.IsLocked=True >

        <Button>

          <Image Source=D:\Icons\Win9x\DISK06.ico

            Height=16 Width=16 />

        </Button>

        <Button>

          <Image Source=D:\Icons\WinXP\IPML.ICO

            Height=16 Width=16 />

        </Button>

      </ToolBar>

    </Grid>

  </DockPanel>

wpf065

Note something interesting in the ToolBar declaration, ToolBarTray.IsLocked. Even though we are not explicitly creating a tray, WPF takes care of it for us. You are locked in, however, and cannot move the ToolBar anywhere. That’s why I added the IsLocked, to get rid of the useless moving handle.

I could have simulated this with the two buttons placed in columns in the Grid, but this does give us the advantage of the overflow button should the Window get resized smaller than it needs to be.

ToolBars are a common user interface element that will add that professional touch to your major applications.

About these ads

5 Responses to “WPF ToolBars”

  1. Mina Fayek Says:

    Hi, Thanks for the demonstration .. but I like to ask if there’s a way to add a common click event handler for the buttons in the toolbar!

    Thanks!

  2. karim Says:

    @Mina
    common click event?

    the tools are just buttons so i you just do

    btnBold.Command = EditingCommands.ToggleBold

  3. ITtuition.com Says:

    Good, compressed and easy to follow. Thanks!

  4. Jo Says:

    Nice Article..Could you please explain how to make a toolbar by writing the code in .xaml.cs file?

  5. Quỳnh Says:

    Thank you very much!!! So simple but very helpful!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 106 other followers

%d bloggers like this: