White Paper: Using the Layout Control

To learn more about the industry-leading features of the XtraLayoutControl and why you should never create another Windows Form without it, read on...

• A Few Reasons Why You Should Use the XtraLayoutControl
• Reason #1. Less Work for You, Total Freedom for your End-users
• Reason #2. Extremely Simple and Effective Design-time Layout Customization
• Reason #3. Think Naturally When Writing Code
• Reason #4. A Simpler Approach to Application Design
• Getting Started (Fundamental Principles)
• Step 1. Layout Control
• Step 2. Layout Item
• Step 3. Item Groups
• Step 4. Tabbed Groups
• Step 5. Empty Space Items
• Feature Details
• Item Labels
• Size Constraints
• Spacings and Paddings
• Customization Form
• Drop Types
• Save and Restore Layout
• Summary

A Few Reasons Why You Should Use the XtraLayoutControl

Reason #1. Less Work for You, Total Freedom for your End-users

The XtraLayoutControl is not simply a "brain-dead" design-time control arrangement tool. It delivers to you and your team capabilities that are unavailable in any other product of its kind. Once you've incorporated the library into your application, you can deliver run-time customization and form management options to your end-users so that their business needs can be addressed as needed, without any additional design-time modification on your end.

Figure 1. Click the image to see the animation that demonstrates how end-users can customize a layout created with the XtraLayoutControl.

By now, you might be asking yourself - that's all well and good, but since I don't currently allow my end-users to modify form layout at runtime, why would I want to use this product? The answer to this question will become obvious as you continue reading this document, but ultimately lies in the simple premise that introducing end-user flexibility enhances the user experience as is evidenced by the countless features today's modern Windows programs offer consumers.

Take for instance Visual Studio's dock windows and toolbar system. It's integrated options allow you to determine what you see on-screen, the location of individual items and help you extend it as your skills and business requirements mature. Of course, once you are no longer satisfied with a given layout or your programming habits change, you can make the necessary modifications instantly - no need to wait for Microsoft to deliver the next major version...

Toolbars and dock windows are not the only examples of user-customizable interfaces. End-users frequently resize and reorder grid columns, sort and group rows by clicking and dragging headers. They can collapse splitters to temporarily hide unnecessary controls, resize and reorder windows in multi-window applications, etc. If you think about it, not many applications that ship today will maintain the "default" layout throughout the life of the application.

You might now be thinking - Ok, it all makes sense as it relates to toolbars and dock windows, but what does it have to do with the controls on my form? Rather than a narrative explaining why control layout customization makes sense, let's review a few scenarios wherein this capability is not only convenient, but essential for any well designed business solution.

• Ever spent time trying to guess the most efficient arrangement of individual controls on a form and their tab order and when specifications change or security rules are modified had to redesign the entire layout?
• Rebuild and release a new version of your application to simply move an editor to a new position or adding a new data entry field?
• Provide two or more forms with different layouts that are used to edit the same type of object when different users/departments require unique views of the same information?

The XtraLayoutControl to the Rescue.

The XtraLayoutControl blows away all these limitations to pixel oriented form design and automatically ensures that your forms look polished at any resolution and best of all, empowers your end-users to create the desired experience as their requirements dictate.

Reason #2. Extremely Simple and Effective Design-time Layout Customization

To create an attractive UI with the XtraLayoutControl takes only a few seconds. You simply drop controls and perform familiar "dock" operations. Controls are then automatically positioned at appropriate distances from one another, automatically aligned to one another, automatically resized when the container size changes, etc.

Let's review how one would build a very simple form and all the individual layout aspects that must be considered to generate a polished layout.

Figure 2. When not using the XtraLayoutControl, you would have to consider pixel based control distances and initiate countless alignment operations.

As is evidenced by the image above you have at least 15 distances, locations or sizes to consider when constructing even a simple login form.

If you've used Visual Studio 2005 in the past, these indicators should be familiar to you. Yes, the new version of Visual Studio offers you these convenient alignment markers so that you can position your controls properly, but the XtraLayoutControl goes far beyond this trivial capability by automatically managing distances, sizes and locations - all you ever need to do is to drop the control at that approximate location you wish to see it placed.

The following image demonstrates the same control layout as above, but created using the XtraLayoutControl. As you can see, controls are arranged into a table-like structure. Table borders are visible when you design your form in the IDE. This should help you better understand layout creation principles and locate drop targets when reordering controls.

Figure 3. The XtraLayoutControl arranges controls into a table-like structure and automatically sets distances and alignment.

To see how easy it is to create this layout with the XtraLayoutControl, take a look at the animation below. The whole process can be divided into two main steps:

• Drop all the required controls onto the Layout Control.
• Rearrange the controls using simple drag-and-drop and resize operations where necessary.

Figure 4. Click the image to see an animation that demonstrates how easy it is to customize control layout using the XtraLayoutControl.

Another source of developer headaches when building forms is to force controls to resize with the container (e.g. the form). To do a half decent job, you often have to play with dock styles, z-order of controls, create auxiliary panels, etc. As you well know, the process is a pain in the neck. As you can imagine, this is no longer the case once you start using the XtraLayoutControl. As an example, the form we created a moment ago is a fully functional resizable form.

Figure 5. Controls are automatically resized together with the container if the layout has been created with the XtraLayoutControl.

In this section, we've described only a few of the key features available to you within the XtraLayoutControl - Read on to learn why you should never create another Windows Form without it.

Reason #3. Think Naturally When Writing Code

With the XtraLayoutControl, you can finally forget about the inherent limitations of pixels when customizing the layout of a form both at design and runtime. You can also forget about dock styles and anchors. With the XtraLayoutControl, you will think naturally, not in the way the IDE designer forces you to think. And that's how you will write code - a minimum number of lines, less errors, with maximum productivity.

Say for instance that you've been asked to create a data entry form at runtime. The image below describes which controls are to be added.

Figure 6. A layout to be created from scratch via code.

The following code addresses this requirement using the XtraLayoutControl. This code assumes there is a Layout Control that populates the entire area between the bar and bottom buttons. It also assumes that you have a BindingSource component named employeeSource bound to the Employees table in the NWind database.

Now compare this code to the code you would have to write to create a similar form using traditional design methods.

As is evident from the code above, the Layout Control makes it really easy to create layouts via code. It offers you a higher-level abstraction that results in fewer lines and improved code readability - AND best of all, gives you great results - automatically aligned form layouts that are resizable together with the container, an automatically applied tab order and much more.

Reason #4. A Simpler Approach to Application Design

Assume you build data-aware applications that enable end-users to browse multiple tables of data and edit records. As we all know this isn't really a rare case. Such a description matches most data-aware applications - from a bug tracker to a movie rental program. When developing such an application, a common approach is to introduce two types of forms (or user controls, frames, views - whatever you call them). The first form type is a list form - usually a form containing a grid control that displays data from an underlying table. This form enables end-users to browse, sort, group, filter records, etc. End-users can switch between list forms using a navigation control - side bar, explorer bar, tree view, list box, or any other you can imagine. The second form type is a detail form that appears when you double-click a row in a list form. This form is used to edit the clicked list entry or display additional information about it. Thus, detail forms are usually constructed from a number of bound data editors.

List and detail forms can be found in Microsoft Outlook. Take a look at the image below.

Figure 7. A typical structure of a data-editing application. A navigation control allows end-users to switch between lists. End-users can double-click list entries to invoke detail forms.

When you design multiple list forms, you will inevitably end up with duplicated code. They will have the same list control that needs the same settings to be changed and the same events to be handled. The obvious way out is to create a base form and move all duplicated code into it. Descendants will introduce their own list controls or will simply add the desired columns to the base form's list.

Another way to avoid code duplication is to use a single form to represent all lists. In this case you will need to modify the form on the fly - i.e. assign a new data source and re-create columns when an end-user clicks an item in the navigation control. If you use such an approach, you eliminate complex inheritance and reduce total form count - both things simplify your application and result in less effort required to maintain applications.

The same two alternatives are applicable to detail forms. You can create a base form and have multiple descendants with different editors on them. Or you can use a single detail form and recreate editor controls on the fly, like grid columns. With the XtraLayoutControl, the latter can be a matter of just a few lines of code. Without this control, you would definitely choose the first approach. But now you can easily implement the second one to simplify your application and be more productive.

1 2 3