A Better Way to Design and Style Applications Using ComponentOne Studio and Designbox

December 16 2008

Applies To:

Studio for WinForms

Author:

Joseph Burke

Published On:

12/16/2008

Note: StudioWorks Software is a featured partner of ComponentOne. This article was written by Joseph Burke, President, StudioWorks Software. The community edition of StudioWorks' product, Designbox Gallery is available for free download at http://www.componentone.com/SuperProducts/StudioWinForms/Featured Partner/. It comes preloaded with over 100 Designs that work with ComponentOne Studio for WinForms.

If you're like me, then you love developing your applications in Microsoft Visual Studio and you have probably been doing it for quite a while. Personally, I have been using Microsoft IDE's since the early 90's, when they had separate language specific products like the original Visual Basic and Visual C . long before the Common Language Runtime. Over this time, there have been great improvements in the core set of development and debugging tools in the IDE. And of course there have been the constant and steady stream of ever more impressive Frameworks starting with the introduction of .NET and the current state of the art WPF and Silverlight.

But there is one feature that has not kept pace over these past 20 years. And that is the traditional Visual Studio design experience of dragging and dropping uninitialized controls onto a design surface and using property editors to design and stylize your application. Granted there have been improvements in the design process with SmartTags and the delivery of Expression Blend for WPF. But the basic design experience within Visual Studio no longer matches the richness of the commercially available controls like those found in ComponentOne Studio for WinForms. More and more, feature and content rich controls like C1Ribbon, C1NavBar, and C1Chart have needed to rely upon custom design experiences such as ComponentOne's Smart Designers rather than the built-in design capabilities of Visual Studio. And with all the features built into today's controls, you typically have a single control that is implemented as a complex component model with dozens of supporting components and 100s of properties. It seems like it is taking longer and longer to create your application's look and feel. We could all benefit from a design experience that lets you design and stylize your applications in seconds, not minutes.

Designbox is a Visual Studio Extensibility Package that introduces you to new ways of building your WinForm Applications. The basic concept is that Designbox will enable to you capture and work with control Designs. Designs are modeling specifications for what a control should look like. They target a particular control type that they apply to and they can contain a rich and complete set of property values that represent the state of controls that are in that design. Once you've come up with a formal definition of a design, you can edit it, share it, and apply it to controls. This is the essence of working with Designbox. By using Designs, you'll be able to create, stylize, and theme your WinForm applications in a fraction of the time that it takes using the traditional "drag, drop, set properties" method.

Designbox delivers the ability to share your Designs in Design Libraries that you own and publish. You can share these libraries within your organization to better enforce the use of your own Design Standards or those of your customers. Or you can have Design Libraries that serve as Quick Start tools for rapidly creating vertical industry solutions. You'll be able to build a complete forms based application for your business and financial applications, healthcare sector solutions, or engineering enterprise systems more quickly than before.

Designbox Window

Before we begin with the example, I need to introduce you to the Designbox Windows. These are Tool Windows in Visual Studio that you can show or hide at any time:

The window that's docked with the Toolbox is your Designbox. Your Designbox shows you all the Design Palettes that are currently loaded. Design Palettes are shareable XML files that hold your designs. You can have as many Design Palettes loaded into Designbox as you need and the rest are stored in your Design Repository folder. Design Palettes can be loaded or unloaded by using the buttons on the Designbox Toolbar.

I'm jumping ahead a bit here but this is a great place to point out the fact that you can drag Designs from your Designbox onto your Form's Design Surface. Doing this will be like dragging a control from the Toolbox except that when you use the Designbox, you'll instantly have a completely designed control that already has a Design applied to it. (Just the same, you'll be able to drag finished controls back into the Designbox when you want to capture new designs!)

Design Gallery

The Design Gallery Window, located at the bottom pane of Visual Studio, tracks the current selection on your Form and shows you the Designs from all the loaded Design Palettes that can be applied to that control. So it's like a Style Gallery, and with a single click you can apply a Design to the control. In the above screenshot, you'll notice that a C1NavBar is selected and the Design Gallery is showing you various C1NavBar Designs.

So let's see it in action. This example shows you how you can use Designbox with your ComponentOne Studio for WinForms controls. All of the Designs you will be seeing are part of the newly released Designbox Gallery for ComponentOne Studio product that you can download from ComponentOne's or StudioWorks' Web sites.

Downloads

Download the free version of Designbox that comes pre-installed with over 100 already made designs:

[Design Gallery - Community Edition](http://download.componentone.com/pub/Net/Designbox/Updates/designbox_gallery_for_c1_setups.zip)

For more information, support, and to buy the full version of Designbox, visit StudioWorks' Web site at:

[www.studioworkssoft.com](http://www.studioworkssoft.com/)

The goal for this example is to show you how to quickly capture a design, edit it, and then reuse it later. I've already created a sample C# Windows Application project with a main form, a menu bar, and a simple C1NavBar populated with panels for a sales application and docked it to the left. It took a few minutes to create, so it's likely something I'd like to save and not need to repeat for future applications.

Step 1 - Create the Design Palette

Let's begin by first creating the Design Palette where we will store the design. In your Designbox, just click on the New Palette button in the toolbar and you'll see the following Add New Palette dialog box:

In the Title field, enter the name of our palette, "My C1 Designs". The Add New Palette dialog box shows you the names of other palettes in your Design Repository that are not yet loaded.

After you click the Add button, you'll see your new Design Palette in your Designbox.

Step 2 - Save Your Design

Now, let's save our design. Right-click on the C1NavBar control and you'll see a menu item in the context menu called "Design by Example". This feature by Designbox creates a design from an example of a control that currently exemplifies that design:

When you click on "Design by Example", you'll see the following Design by Example dialog box that lets you select the Design Palette and name your new Design. (Note: If this control wasn't docked to the left, you would have been able to simply drag and drop the control directly into a Design Palette to create a new design.)

When you are all done, you can click the Create button and you'll see your first new design in the My C1 Designs palette. At this point, you've just captured the design of the C1NavBar including the panels, panel buttons, and panel contents. You've even captured the fact that it needs to dock to the left on the form.

Step 3 - Modify Your Design

Now let's make a couple of changes to the design and then we'll reuse it in the Design Gallery.

You can double-click on your new "Products and Customers" design in the Designbox. This will open the Design for editing as a Visual Studio Document. Notice that what you are seeing is actually a separately hosted WinForms designer that's editing the new C1NavBar control. You are no longer seeing the control in any project. This technique lets you have the same design experience for directly editing a design as you do when you are creating one by example:

We edited the design by adding a new "Ship Date" panel that contains a calendar control.

Step 4 - Apply New Design to C1NavBar Control

So now our design changes are finished. We can now go to any project that has a C1NavBar and apply this new design to it by using the Design Gallery. Or we can instantly create a new C1NavBar that's preconfigured to this design simply by dragging and dropping the design from the Designbox. Either way will give you a C1NavBar that's completely designed, docked to the left, and stylized the way you want:

This example demonstrates the basics of using Designbox with your ComponentOne controls. You can see how easy it was to capture a design, edit it, and then reuse it later with Designbox.