Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Collapse]Application UI Manager
   [Collapse]Views
    [Collapse]Widget View
      Stack Layout Mode
      Table Layout Mode
      Flow Layout Mode
      Free Layout Mode
    [Expand]WindowsUI View
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
    Documents
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
   [Expand]Examples
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Widget View

The Widget View of the Document Manager allows you to create dashboard-like applications. The figure below illustrates an example.

In code Widget Views are represented by the WidgetView class objects. As any other Document Manager View, Widget View works with documents (the Document class objects). The way documents are arranged depends on the current layout mode (see below). The Widget View supports four layout modes - Stack Layout, Table Layout, Flow Layout and Free Layout.

Expanded Getting Started

  • Creating and populating the Widget View at design time
    This video demonstrates how to populate the Widget View with documents, arranged into multiple Stack Groups.
    Watch on YouTube...

  • Creating and populating the Widget View in code
    This example illustrates the way to populate the Widget View in code and arrange your widgets into Stack Groups.
    Learn more...

Expanded Layout Modes

The Widget View can function in multiple layout modes that affect the way documents are organized. Use the WidgetView.LayoutMode property to select the currently applied layout mode.

  • Stack Layout Mode
    In this default layout mode, documents are placed into either vertically or horizontally arranged groups.

  • Table Layout Mode
    This layout mode allows you to build a grid of columns and rows and place documents into one or multiple cells of this grid.

  • Flow Layout Mode
    Documents in this layout mode are not held in any containers and simply follow each other in the given direction. Supports wrapping documents into multiple columns or rows.

  • Free Layout Mode
    This layout mode allows you to build any desired layout of widget documents.

Expanded Colorized Widgets

The Document.AppearanceCaption and Document.AppearanceActiveCaption properties provide access to a set of properties that specify this widget's appearance. The BackColor property available through these properties allow you to set a custom color to any widget. This color will be used to paint the widget caption area and its borders, as the following figure illustrates.

Note that caption forecolors are automatically updated to fit the custom background color. The figure above illustrates this feature - for some widgets the color of their captions remains almost unchanged (purple widget), while other widgets (pink and green widgets) colorize their captions more intensively. This process uses a complex algorithm to mix the default forecolor with a custom backcolor to achieve the most visually appropriate result.

Expanded Runtime Capabilities

At runtime, end-users can do the following.

  • Resize documents if the IDocumentDefaultProperties.AllowResize property does not equal false. Widget View documents can only be resized in the same dimension as the View orientation. Widgets in Table Layout Mode cannot be resized.

  • Maximize Documents by clicking the Maximize button. The button's visibility is specified by the IDocumentDefaultProperties.AllowMaximize property. Maximized Documents fill the entire View space. To restore the Document size, click the Restore button.

    Expanded Show the animation

    You can also specify the Document.MaximizedControl property. In this case, a control (User Control A) will be displayed in its normal (“preview”) state, but when a document with this control is maximized, it displays another control (User Control B). The animation below illustrates this functionality.

    Expanded Show the animation

  • Close documents using the Close button (use the IBaseDocumentDefaultProperties.AllowClose property to enable or disable document closing).

Animation effects can be applied to all state change operations (Maximize, Minimize and Restore). To turn these effects on or off, use the WidgetView.AllowDocumentStateChangeAnimation property.

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