Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Collapse]What's Installed
   Controls: Recently Added
   Controls: As on Toolbox
   Controls: In Alphabetical Order
   Menu Entries
   Demo Applications
   Template Gallery
   Layout Assistant Extension
   Image Gallery and Context-Dependent Images
   Getting Help on API
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Layout Assistant Extension

The DevExpress WinForms component installation automatically adds the Layout Assistant Extension to your Visual Studio. When enabled, the extension provides smart tags and links for forms and user controls, and allows you to utilize the Instant Layout Assistant.

Expanded Enable or Disable the Layout Assistant Extension

The extension is enabled by default, there is no need to turn it on manually. To toggle the extension on or off, go the Visual Studio's "DEVEXPRESS | WinForms Controls" sub-menu and click "Disable (Enable) Layout Assistant Extension".

Expanded Form/UserControl Smart Tags and Links

A smart tag for any form or user control is the entry point for other Layout Assistant Extension features.

The smart tag contains the following items.

  • Instant Layout Assistant - invokes the Instant Layout Assistant guides.
  • Predefined Form (User Control) Templates - invokes the Template Gallery with UI-ready templates that can be applied directly to this form (user control).
  • Show Actions in Design Surface - moves the previous two smart tag items onto the form (user controls). To undo this action, click the "Hide Actions to Smart Tag" link.

  • Convert to... - multiple commands that allow you to convert your form to an XtraForm, Ribbon Form or Tabbed Form. For user controls, conversion to the XtraUserControl is available.
  • Select Skin... - click this item to add a DefaultLookAndFeel component and select a required DevExpress skin. This option is displayed in form smart tags only.

If your form or user control does not display a smart tag, check the following list that addresses the most common causes.

  • Your solution does not reference any DevExpress libraries.
  • DevExpress libraries have just been added. Rebuild the solution and re-open the form at design time.
  • The version of DevExpress libraries included in your solution is 15.2 or older. Use the Project Converter tool to replace your DevExpress libraries with libraries of newer versions.
  • You are using a Visual Studio version prior to 2012.
  • The Layout Assistant Extension is disabled.

Expanded Instant Layout Assistant

Instant Layout Assistant (ILA) is a design-time helper that allows you to build a form (user control) layout without searching for DevExpress controls in the Visual Studio toolbox. When ILA is activated, it breaks down your form's free space into five abstract regions (see the animation below). This mark-up fits a traditional UI with commanding regions at the form's top, navigation controls at both sides, a status panel or additional navigation control docked to the form's bottom, and main form content displayed in the middle.

The three buttons visible next to the form are:

  • the close button that discards any previous modifications and hides the ILA interface (click the Instant Layout Assistant link once again to re-display ILA with five blank default regions);
  • the apply button that closes the ILA interface and applies your layout; all layout modification are considered as drafts until you click this button;
  • the add button that allows you to add non-visual components, such as the Workspace Manager or Spell Checker.

When you hover over a region, ILA will show multiple available actions (see below).

  • Clicking the Remove Area link will delete this region. Remaining regions will resize accordingly to occupy this free space. Removing the central region will leave a gap between the left and right ILA regions.
  • The Wrap in Dock Panel link adds the Dock Manager component and creates a dock panel. You can identify regions wrapped in panels by false panel headers (see the figure below). This option is unavailable for the central region.

    Note

    Wrapping regions in dock panels also adds the Application UI Manager component to enable advanced docking hints. See the Interaction with Dock Panels article to learn more about the benefits of using both components within the same form.

  • The Add Control link shows controls that suit the current region.

Controls shown after you click the Add Control link are grouped by their purpose. Depending on a region, ILA will display different groups with different controls inside. For instance, side regions offer a Navigation group that allows you to add Accordion Control, Navigation Bar, Navigation Pane, Tree List, Tile Bar, Tile Control or GalleryControl. The Back button navigates back from the currently viewed control group.

To change a control that should be displayed within a region, hover over this region and click the Change Control option.

If ILA has automatically added the Application UI Manager, but your central region hosts any other control (e.g., a Data Grid), this control will be displayed inside the Application UI Manager. See the Non-Document Mode article for more details.

After you customize and populate all the required ILA regions, click the Apply button to add all reserved controls and components. If no free space remains on your form, actions that invoke ILA will become unavailable from both a form surface and form smart tag. Otherwise, you can click the Instant Layout Assistant link again to break down the remaining space. The figure below illustrates a form with populated side and bottom regions; the remaining space is marked up by ILA into five more regions.

How would you rate this topic?​​​​​​​