AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1482&pId=-1
Introducing Infragistics Dock and Toolbar Manager Components
page
by Brian Mains
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 26221/ 46

Introduction

Infragistics is a leading developer of windows, web, charting, and WPF components that developers can use to increase the attractiveness and functionality of an application. Infragistics allows you to leverage many of the common toolset appearances (such as the Office 2007, 2003, or Visual Studio 2005 appearance) that most developers want to have in an application. This can work seamlessly because all it takes is a simple assignment of a property for this to happen.  Infragistics also supports other ways to apply common sets of styling information using presets, which are unique to the Infragistics products, and may be close to WPF's styling capabilities, though stored separately from the application code.

Infragistics has a Ribbon component that you see a wide array of in application frameworks these days, which will be discussed next. It is very easy to implement a professional looking ribbon within an application, which has the same styling as you see in the Office 2007 environment.

Infragistics Ribbon Control

The Infragistics Ribbon control is a very functional control. It supports the same styling as the Office 2007 platform. What's nice about this platform is that the controls within the ribbon fit to the contours of the section it is given, which means you have to manage less about the ribbon.

In addition, it automatically includes spacing between columns when one grouping overflows.  It's nice not to have to manage those details about the control itself.  To see how well this works, start by going to the Infragistics Toolbox, and selecting the UltraToolbarsManager component and dragging it onto a Windows Form.  It will prompt you to add a docked control to the form, so the form can be setup correctly (since the ribbon is docked to the top).  The following toolbar appears:

Figure 1

The "Show Ribbon" option allows the developer to show and hide the ribbon in the screen, expanding or compacting it.  This is nice if you have limited working room, you can collapse it out of the way. Design MiniToolbar designs a toolbar that is similar to the ToolStrip approach, and it is out of the scope of this article.  We are going to focus on the Ribbon only, and by clicking New Toolbar, the following prompt opens:

Figure 2

In the ribbon control, we have a new toolbar that appears as below:

Figure 3

The Toolbar has several collections that are important when setting up the Ribbons; first, there is a Ribbon property, which has a Tabs collection.  This collection hosts the series of tabs available in the ribbon (such as ribbon1 above).  There is a Toolbars collection, which lists each toolbar (we have one toolbar with one ribbon as shown above), and the tools associated with that toolbar.  In addition, there is an overall Tools collection, which contains all of the tools (buttons, etc.) setup in either the mini toolbar, or the ribbons.

To setup the form, these properties can be used to setup controls on the form.  However, the designer for the Infragistics controls is very dynamic, as we will soon see.  There are two ways to add controls; go into the Tabs collection editor in the Properties window.  Select the ribbon1 tab, and go to the Groups collection. Add a couple of groups, and view the results below:

Figure 4

When clicking on the tool, the following form appears, containing a variety of properties that you can assign (similar to the toolbar form above).  You can see that there is a nice list of controls that you can embed into your ribbon control.

Figure 5

Using some of these options, I quickly setup the following ribbon.  Though it may not make the most sense from the options I used, it's meant to illustrate some of the various options available:

Figure 6

Each item in the group is configurable.  To do this, right-click an item, this will adjust several of the needed properties.  In addition, the designer for the Toolbar manager also makes it easier with the following control:

Figure 7

Clicking "New Group" creates new groups that can be adjusted appropriately.  And, to help rapidly setup the code for the control, the designer has a "Generate Tool Click Code" option that pops up an editor to perform the requested action, as shown below.

Figure 8

In addition, Infragistics supports loading and saving configuration options, as well as a variety of other features to make this a very capable control.  The last feature that I'll mention is that the top region portion is also customizable using the same approach as shown above.

Figure 9

This is the top bar with a button, masked edit, and textbox.

Infragistics Docking Control

Infragistics also comes with a docking manager, which manages which controls are docked in which reason.  This adds two properties that can be set for controls, which manager where they are docked in the application.  However, Infragistics gives docked controls the ability to be moved around the screen, in a very flexible way.  When clicking and dragging a docked control, several screen icons (the same screen icons that appear when moving Visual Studio Windows around) appear, allowing the user to dock the control in a wide array of layouts.  The tool windows also support the ability to pin windows, which disappear in the sidebar when unpinned and unfocused.

Controls now have a "Dock Controls" option that looks like the following:

Figure 10

This option controls where the control will be docked, namely in the left area.  You can dock multiple controls to one location.  When choosing the Sliding Group option for Child Pane Style, any controls docked at that area are shown in a sliding group, similar to the Office navigation pane, where one panel is shown at a time.  The left sidebar is setup as a tab group, which displays tabs at the bottom of the window.

Figure 11

Initially, when docking windows, they are not docked, but by simply dragging and dropping one on top of the other, they are combined into a multi-tab docked window.  To apply styling to the docked windows, select the smart tag for the docking manager, and select a theme to use.  I've selected as all possibilities the Office 2007 themes, which are illustrated above.  There are many options, using Office, Visual Studio, and other themes available.  When run, the docked windows can be pinned, as illustrated below:

Figure 12

In addition, when at runtime, it is possible to rearrange the windows into a variety of places. It can be bound on top, bottom, left, or right, against an existing docked window, or inside a docked window that appears stacked upon one another. I flipped the bottom image sideways because of its length, and as you can see, similar to the Visual Studio's Solution Explorer and Property Window.

Figure 13

Conclusion

All of what you've seen has been setup in the designer, without any code. As you can see, Infragistics provides a lot that is often desired with controls, which the current Microsoft Framework doesn't offer. Although I didn't setup an elaborate example, you can easily see how the toolset can be a great benefit, with its ease of use and deep designer capabilities.


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-04-25 2:07:50 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search