Skip to end of metadata
Go to start of metadata

WebDesktop 5 sets new standards in bringing desktop experience to web application through full support for the new WebUI Unified Theming and leverage the latest trends in web standards. More than just a theme, the desktop's core architecture and rendering mechanism have been significantly improved to fully support unified theming. It sets a new foundation for the future, allowing all of its user interface elements to be styled externally through CSS styles.

This page explains the concepts, features, benefits and the best practices when using WebDesktop unified theme in your web projects.

If you're not familiar with WebUI unified theming, please refer to Unified Theming and WebUI Modern Theme.

On this page:

Introducing WebDesktop Modern Theme

In the past versions, WebDesktop control is typically styled by specifying the style definition explicitly in the control markup. Alternatively, you can also use the built-in default style which requires only a property set in the WebDesktop control. However, both approaches apply their own styles individually and did not support reusing a common style definition. Consequently, you can't easily leverage modern CSS frameworks such as Bootstrap to create a consistent theming around your application.

To address these challenges, WebDesktop 5 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebDesktop styles in a unified theme, enabling a consistent look-and-feel across the application.

At a glance, here's how the WebDesktop controls look like with unified modern theme.

 

 

 

 

 

 

 

 

 

 

 

 

WebButton

WebButton component resembles a multi-purpose button with various display mode that you can easily customize. Supporting unified theme, you can easily provide a consistent button appearance throughout the entire application.

Display Modes

Configure the display mode whether to text, image, or both by setting the DisplayMode property. If you need to specify an image, it's preferably to use vector-based image to support high dpi resolution. See the example below.

Here's the result.

Size Class Variants

WebButton's size can be set depending on your needs. See the following figure for example.

To apply a specific size class, see the example below.

It's important to specify the comma prefix in the CssClass property which will add the specified classes along with the default class instead of overriding the default class.

Contextual Classes

Including default, there are six contextual styles that you can set in WebButton. To apply the style, set the ButtonStyle's MergeCssClass to True and specify the contextual class in the CssClass property, see example below.

WebCallOut

WebCallOut is a superior replacement for the standard tooltip. With its beautifully designed styles, appealing visual effects, and customizable elements, WebCallOut has everything you need to build the perfect tooltip to complement your web applications.

Content Mode

If you need to change the WebCallOut's content to your liking, set the ContentMode property to UseTemplate (the default value is UseText), then specify the content in ContentTemplate property, see the following example.

Pointing Position

By configuring PointingPosition property, it's possible to determine the WebCallOut's appearance position. Take a look at the example below.

If the PointingPosition property is not set, then WebCallOut will appear automatically where it's visible to users.

Tooltip

The new WebCallOut has a brand new display called Tooltip. This feature presents a simpler look than WebCallOut which provides short information with a compact black and white display. Simply add the callout-tooltip class to FrameStyle's CssClass to apply this mode. Look at the following example on how to create a simple WebCallOut Tooltip.

And this is how the new feature looks like.

WebDesktopManager

WebDesktopManager employs an object-based approach to give you granular control over every visual aspect of its elements. Offering a rich set of properties to control shortcut, icons, taskbar, and window elements, it enables you to create the precise appearance your desktop requires with a minimum of effort. See WebDesktop Modern Theme Style Reference for complete theme style reference about WebDesktopManager.

Frame Style Variants

The modern theme sports three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.

The frameless variant is suitable in scenario when WebDesktop is displayed in a full-screen mode.

To apply a specific frame variant, i.e., desktop-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.

WebDialogBox

WebDialogBox provides you a powerful dialog box component from Intersoft that delivers a true desktop experience. WebDialogBox has keyboard support and eight predefined button types returned as DialogResult when it is close. Offers you with easiest way to change the style of dialog box, WebDialogBox allows you to make stylish dialog box in web applications.

IsModal Property

There is a feature mode in WebDialogBox which enables users to be still able to interact with the application content. To enable this feature, set the IsModal property to False. See the following code for example.

Button Types

There are eight command button types that are available to fill your needs, which are abort, retry, ignore, yes, no, cancel, and custom. To use these buttons, specify the WebDialogBoxButton Type property, see example below for making the custom type button.

Dialog Box Images

It's also possible to decorate your dialog box with icon images to indicate the dialogbox's content to your liking. You can use six types of dialog box image (Default, Information, Warning, Error, None, and Custom). Look at following figure for example.

Specify the DialogBoxImage property to show the image icons, see the example below.

WebDragDropExtender

WebDragDropExtender component is the first of its kind in the industry that provides sophisticated drag and drop implementation with elegant object model so that you can add drag and drop behavior to any existing server controls easily in consistent programming model.

DefaultEffect Property and DefaultEffectText Property

There are six types of indicator that you can use in WebDragDropExtender (Copy, Link, Move, Remove, NotAllowed, and None). These indicators use scalable vector graphic (SVG) so they remain sharp when presented with zoomed settings or in high-dpi screens such as Retina or the latest 5K displays. To apply these feature, look at the example below.

It's also possible to add text to WebDragDropExtender by configuring the value of DefaultEffectText property. See the figure below for result.


WebExplorerPane

WebExplorerPane lets you easily create intuitive navigation interface with multiple grouped panes in your web applications. It offers a true Explorer look with sleek visual styles and advanced features.

Content Mode Variants

WebExplorerPane has three built-in content modes that can be used. The first one is UseItems, it allows you to show a list of option neatly by arranging them in a grid. Next, there's UseIFrame which allows you to fill the pane content using URL. If you need to configure the content to your needs, such as Bootstrap Grid or Tables, you should use UseInlineContent mode. See below for example.

Here's the result:

Display Mode Variants

You can also change the bar CaptionDisplayMode property whether to Text, Image, or Both. Look at the following example.

Contextual Classes

The new WebExplorerPane supports the same contextual classes as Bootstrap's. They are default, success, info, warning, danger, and primary. These classes can be implemented in both special bar and explorer bar. See the figure below.

To apply these changes, configure the SpecialBarStyle and BarStyle's CssClass property, look at the following example.

WebMenu

WebMenuBar includes most functionalities a MenuBar control should have, and power-packed with advanced features such as integration with PlaceHolderManager and powerful designer support. The new WebMenu presents you with a brand-new theming through full support for the new WebUI Unified ThemingIt presents a stylish theme which shows a simple, yet elegant look. See WebDesktop Modern Theme Style Reference for complete theme style reference about WebMenu.

WebNavPane

WebNavPane has been redesigned with a much cleaner, modern interface based on WebUI Unified Theming. WebNavPane offers a superior navigation pane system similar to popular Outlook application, along with rich visual styles and advanced features.

Frame Style Variants

The modern theme sports three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.

The frameless variant is suitable in scenario when WebNavPane is placed in a container which already has border or decorators such as in panels.

To apply a specific frame variant, i.e., navpane-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.

Display Mode Variants

You can change the content DisplayMode property whether to Text, Image, or Both. Look at the following example.

Here's the result.

Contextual Classes

The new WebNavPane supports the same contextual classes as in Bootstrap. They are default, success, info, warning, danger, and primary. See the figure below.

To apply these changes, simply add the style in FrameStyle's CssClass property. See below for code example.

WebNotification

WebNotification enables interactive push message systems to your ASP.NET applications. It’s an ideal tool for the ability to send notification messages from servers to clients. WebNotification's broad and rich feature set supports all types of web applications regardless of their size and complexity. A few of its advanced features include a built-in context menu, clickable notification, and audio visual notification effects.

Display Mode Variants

Not only could you show Image and Text, you can set sound as well to notify users. The default display are Text and Image where the image consists of Bell svg which supports high-dpi resolution. See the figure and code example below.

WebService

DropDown Action

This feature allows you to put extra actions that are contextual to the notification message, while the content can be adjusted to your liking. Set ShowActionDropdown property to True and configure the WebMenuItems in Items property, see the example below.

Contextual Classes

You can change the WebNotification's color by applying the style through FrameStyle's CssClass property, see below for example.

There are four styles that you can use, see the figure below.

WebPaneManager

WebPaneManager puts you in control of the application layout, providing all the tools you need to develop layouts that organize your applications content and give it a consistent, professional appearance.

Frame Style Variants

The new unified theming provides three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.

The frameless variant is suitable in scenario when WebPaneManager is placed in a container which already has border or decorators such as in panels.

To apply a specific frame variant, i.e., panemanager-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.

Layout Style Variants

WebPaneManager presents you with two powerful layout mode that you can choose according to your application needs. The Island layout, which is the default mode, presents each panel in logical visual group which has spacing between the panels, where the Compact layout removes the border and spacing between panels which look cleaner and more stylish. See the illustration below to examine the differences.

The Island layout is the default layout that will be applied to WebPaneManager. To apply enable Compact layout, simply set PaneSettings' CompactMode to True.

Contextual Classes

There are six classes that you can apply to each panel in WebPaneManager, see the figure below.

To apply these changes, simply add the style to HeaderCustomStyle's CssClass in WebPane, see the code below for example.

WebTab

WebTab offers several new modern styles to enrich your web applications, such as line tab and pill tab.

Frame Style Variants

There are four frame styles that can be applied in the new WebTab, default frame tab, frameless tab, line tab, and pill tab. See the illustration below.

 

To apply a specific frame variant, i.e., tab-frameless, simply add the style to the FrameStyle's CssClass property, see the example below.

Display Mode Variants

You can also configure the display mode to your needs whether to show image, text, or both by setting the CaptionDisplayMode property. See the following example.

WebToolBar

WebToolBar delivers a desktop toolbar experience similar to Office applications. Modeled after the Office toolbar style and behaviors, WebToolBar features sliding visual effects, docking, and more. The new unified theming WebToolBar presents you with an entirely new, modern aesthetic design. See WebDesktop Modern Theme Style Reference for complete theme style reference on WebToolBar.

Applying Theme

Building on unified theming concept, the webdesktop modern theme is designed as part of the WebUI modern theme. This means that once you applied the WebUI modern theme, it will automatically theme the webdesktop control without additional code. To learn more how to apply the WebUI modern theme, please see Applying Unified Modern Theme in WebUI Application and Creating a New WebUI Application with Unified Modern Theme.

If you're new to the unified theming concept or unfamiliar with WebUI modern theme, please visit Unified Theming and New WebUI Modern Theme respectively. These two pages provide comprehensive details you need to know to understand how WebUI modern theme works.

Best Practices

If you're applying the modern theme to an existing web projects, please review your existing code to comply with the following best practices:

  • Remove appearance settings that are defined explicitly in the control. For instances, BorderColorBorderStyle, BorderWidth, and ForeColor are examples of settings that might affect appearance.
  • Remove style settings that are defined explicitly in the control. Most style settings have Style suffix and are type of either WebStyle or DynamicStyle, such as FrameStyle, TaskBarStyle, ShortcutStyle, and so on.
  • If you applied a webdesktop layout file (.isl) from code behind, the code should be no longer necessary and can be safely removed.

In conclusion, you should avoid defining settings that might affect appearance such as explicit styles, since all styles are defined externally and streamlined in the CSS stylesheets. Defining appearance-related settings might introduce conflict with the theme definition and produce unexpected results.
As the result, your webdesktop control definition should look much cleaner and simpler. The following example shows a simple webdesktop control that should be themed perfectly.

 

Customizing Theme

With unified theming concept, you no longer specify any style settings explicitly in the control markup. Written completely in developer-friendly SCSS language, all WebDesktop styles are now streamlined in CSS classes contained in the theme source. This makes it easier for you to review the overall style definitions and make necessary changes to the styles.

Customizing the webdesktop theme source requires you to copy the source to your projects and configure a SCSS compiler. For more information how to customize WebUI theme source, please see Customizing WebUI Modern Theme.

WebDesktop SCSS Variables

For easy customization, the WebDesktop modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebDesktop.

The complete SCSS variables can be found in _variables.scss, while the webdesktop theme source can be found in the _webdesktop.scss file located in the theme source folder.

For more information how to customize SCSS variables and ensure the output is properly generated, see Customizing SCSS Variables.

WebDesktop Layout Definition

In addition to the styles defined in the SCSS, one of the main component in a theme source is the component layout definition. The layout definition contains the contracts between the control and the CSS classes. The connection between the layout definition and the corresponding controls are automatically taken care by the WebUI Theme Framework at runtime.

To get a better understanding of the webdesktop styles, see its layout definition below.

webdesktopmanager.isl

For complete visualization details of WebDesktop modern theme, please refer to WebDesktop Modern Theme Style Reference.