WinForms — New DirectX Form with HTML and CSS Template Support

As you may already know, the DevExpress WinForms Subscription ships with a number of counterparts to standard System.Windows.Forms.Form objects. Before we dive into a new Form option shipping in our v22.1 release, let's quickly review all currently available Form options.

XtraForm

XtraForm is your default go-to option when it comes to standard Form replacements. This is the most basic, “skinnable” Form option from DevExpress.

The list below summarizes some of the unique features available in XtraForm:

• Accepts raster and vector images as icons (whereas standard Form objects can only accept ".ico" images).
• XtraForm can increase the thickness of its border (you can read more about this feature in the following blog post: Thicker Form Borders). This mode is automatically activated when you enable the OptimizeRemoteConnectionPerformance property.
• Incorporate MDI document captions within title strings (see the ShowMdiChildCaptionInParentTitle property).
• Can display Glow effect instead of standard shadows (see the FormBorderEffect property).
• Supports attachable Behaviors. The Snap Window Behavior allows you to implement "sticky" windows that snap to screen edges and each other, and the Persistence Behavior saves user Form layout customizations to the registry.

Most XtraForm features are also available for XtraForm descendants, such as Toolbar Forms.

Ribbon Form

The selling points for this type of DevExpress Form is extremely short: use it whenever you plan on adding a Ribbon. This form merges its title bar with our WinForms Ribbon Control to create a unified block.

Toolbar Form

My personal favorite, this handy Form option embeds two regions for BarItems into its title bar. Toolbar Forms are perfect when you do not need a dedicated command region with a large number of toolbars or Ribbon actions.

Tabbed Form

Tabbed Form is built for one specific UI metaphor — browser-like windows with tabs in form title bar area. You can click the "+" button at design time to add tabs, each tab includes its own content container that can host controls.

Fluent Design Form

Fluent Design Form is definitely the most exquisite Form option in the DevExpress WinForms subscription. Inspired by Windows 10, this Form offers actions in its title bar (similar to those in the Toolbar Form), adaptive layout based on Form width, and advanced communication with its child Accordion Control. In addition, the Form's side area renders a semi-transparent Acrylic material.

DirectX Form

Our newest DirectX Form (available in v22.1) is a convergence of all our breakthrough initiatives started in the last few years: High DPI support, DirectX rendering, and HTML & CSS Templates.

As its name implies, this Form enables DirectX Hardware Acceleration for all child controls capable of using the DirectX render engine. Compared to standard techniques (when you flip the global WindowsFormsSettings.ForceDirectXPaint switch) the DirectX form offers the following advantages:

• Enables the DirectX engine for Ribbon Control, Gallery Control, Buttons, Stack and Layout Panels, Editors, and many other controls that previously could not run in DirectX mode. For example, a SimpleButton is not in the DirectX-compatible controls list. It does not have an individual UseDirectXPaint property (unlike, for instance, Data Grid or Accordion Control) that allows you to choose the preferred rendering engine. However, when placed on a DirectX Form, these (and many other controls) run in DirectX mode.
  Note: A number of DevExpress WinForms controls (for example, Spreadsheet) do not support DirectX rendering. These controls are currently not displayed if you place them on a DirectX Form. We expect to introduce the DirectX support for these controls in future updates.
• All DirectX-enabled controls are rendered in a single device context, which offers better performance (especially with large numbers of controls).
• Form resize calculations are faster, and resize animations are smoother.

DirectX Forms also accept HTML & CSS templates, which allows you to design stunning Forms inspired by modern Web UI solutions. The following figure from our Demo Center illustrates an example of such custom UI.

The initial DirectX Form’s appearance emulates the standard XtraForm style. This standard appearance is stored in the default template:

<dx-form-frame id="frame">
    <dx-form-titlebar id="titlebar">
        <dx-form-icon id="icon"></dx-form-icon>
        <dx-form-text id="text"></dx-form-text>
        <dx-form-minimizebutton id="minimizebutton"></dx-form-minimizebutton>
        <dx-form-maximizebutton id="maximizebutton"></dx-form-maximizebutton>
        <dx-form-closebutton id="closebutton"></dx-form-closebutton>
    </dx-form-titlebar>
    <dx-form-content id="content"></dx-form-content>
</dx-form-frame>

This default template requires neither CSS styles nor onClick properties for buttons — appearance and behavior for these standard elements are hard-coded. The appearance of an element depends on tag name, and its behavior is set via the element ID. For example, the following line adds a button that looks like a Close button, but behaves like a Minimize button.

<dx-form-closebutton id="minimizebutton"></dx-form-closebutton>

This feature allows you to use standard Form elements when you do not need a custom design, or quickly set a behavior for a custom element. For instance, you can create a custom button from a <div> element, and set its ID to "closebutton".

If you aim for a completely custom Form layout, start with the following template.

<div id="frame" class="frame">
    <div id="content">
    </div>
</div>

.frame {
    height: 100%;
}

This is the shortest valid custom template you can add - templates without "frame" and "content" element IDs are considered invalid.

Your Opinion Matters

We'd love to hear more from you. Use the form below to submit your comments to us.