The Page control is the center point of activity in a Wisej.NET application. It's a container used to show content to a user (alongside the Form and Desktop).

Only one Page can be shown to the user at a time.

Page Navigation

There are several ways to navigate between pages in a Wisej.NET application.

Show()

Using the Show() method on a Page instance will show the page to the user, replacing any previously-displayed page.

Showing a previously-hidden Page:

Application.OpenPages["nameOfMyPage"].Show();

Setting MainPage

If a Page needs to be replaced, set the Application.MainPage property.

Features

AutoScroll

The AutoScroll property of the Page control determines whether scroll bars automatically appear when the control contents exceed its visible area.

Advanced

JavaScript Widget

A Form is a representation of any window displayed in your application. The Form class can be used to create standard, tool, borderless, and floating windows. You can also use the Form class to create modal windows such as a dialog box. A special kind of form, the multiple-document interface (MDI) form, can contain other forms called MDI child forms. An MDI form is created by setting the IsMdiContainer property to true. MDI child forms are created by setting the MdiParent property to the MDI parent form that will contain the child form.

Using the properties available in the Form class, you can determine the appearance, size, color, and window management features of the window or dialog box you are creating. The Text property allows you to specify the caption of the window in the title bar. The Size and Location properties allow you to define the size and position of the window when it is displayed. You can use the ForeColor property to change the default foreground color of all controls placed on the form. The FormBorderStyle, MinimizeBox, and MaximizeBox properties allow you to control whether the form can be minimized, maximized, or resized at run time.

Features

Container

Similar to WinForms, the Form control acts as a container for any other Wisej.NET control and can be manipulated in the designer to fit its contents.

Modal Dialog

Modal Dialogs are used to demand an action from a user. They draw the user's attention away from other parts of the form and require the user to attend to an action.

A Form control can be shown as a modal dialog by calling the ShowDialog() method.

// create and show a modal form.
var form = new MyForm();
var result = form.ShowDialog();
if (result == DialogResult.OK)
    AlertBox.Show("Success");
    
// or

// create and dispose of a form upon completion.
using (var form = new MyForm())
    if (form.ShowDialog() == DialogResult.OK)
        AlertBox.Show("Success");

Modal Form

The Form can also be shown in a manner that simulates a modal-appearance without the modal functionality.

Simply set the ModalMask property to true and call the Form's Show() method.

An optional callback can be specified upon completion:

var form = new MyForm
{
    ShowModalMask = true
};
form.Show((form, result) => AlertBox.Show(result.ToString()));

Advanced

JavaScript Widget

The Desktop control provides an easy-to-use container for Form navigation. Only one Desktop can be shown to a user at a time, but an unlimited number of Desktop controls can be created for each Wisej.NET application.

Features

Switch Desktop

Wisej.NET applications can contain an unlimited number of customized Desktop controls. To switch between desktops, set the Application.Desktop property.

Application.Desktop = new MyDesktop();

Child Control

The Desktop container can also be hosted on a Page control.

Taskbar

The Taskbar portion of the Desktop control manages and displays open Forms. When a new Form is shown within the application, a shortcut is automatically created in the Desktop's taskbar.

Advanced

JavaScript Widget

A Panel is a control that contains other controls. You can use a Panel to group collections of controls such as a group of RadioButton controls. As with other container controls such as the GroupBox control, if the Panel control's Enabled property is set to false, the controls contained within the Panel will also be disabled.

The Panel control is displayed by default without any borders. You can provide a standard or three-dimensional border using the BorderStyle property to distinguish the area of the panel from other areas on the form. Because the Panel control derives from the ScrollableControl class, you can use the AutoScroll property to enable scroll bars in the Panel control. When the AutoScroll property is set to true, any controls located within the Panel (but outside of its visible region), can be scrolled to with the scroll bars provided.

The Panel control does not display a caption. If you need a control similar to a Panel that can display a caption, see the GroupBox control.

Features

Auto Size

When enabled, the Panel control can resize itself to fit its contents according to the AutoSizeMode property specified.

.gif)

Header

Several containers in Wisej.NET come with a built-in header for displaying a title and optional collapsible icon. The header can be shown by setting the ShowHeader property of the container to true. The collapsible icon can be hidden by setting the ShowCloseButton property to false.

.png)

Collapse Direction

The Panel control can be collapsed to the Top, Bottom, Left, or Right using the CollapseSide property. The default value is Top. The default header position can be changed by setting the HeaderPosition property.


Advanced

JavaScript Widget

The FlexLayoutPanel arranges its child controls using the layout engine specified in the LayoutStyle property. When set to Default, child controls are arranged using the default layout engine, using their location, dock style, and anchor properties.

When the LayoutStyle property is set to Horizontal, child controls are arranged horizontally in a single row.

When the LayoutStyle property is set to Vertical, child controls are arranged vertically in a single column.

Features

AutoSize

When enabled, the FlexLayoutPanel control resizes itself to fit its contents according to the AutoSizeMode property specified.

Advanced

JavaScript Widget

The FlowLayoutPanel control arranges its contents in a horizontal or vertical flow direction. You can wrap the control's contents from one row to the next, or from one column to the next. Alternatively, you can clip instead of wrap its contents.

You can specify the flow direction by setting the FlowDirection property. The FlowLayoutPanel control correctly reverses its flow direction in Right-to-Left (RTL) layouts. You can also specify whether the contents are wrapped or clipped by setting the WrapContents property.

The FlowLayoutPanel control automatically sizes to its contents when you set the AutoSize property to true. It also provides a FlowBreak property to its child controls. Setting the FlowBreak property to true causes the control to stop laying out controls in the current flow direction and wrap to the next row or column.

Any Wisej.NET control can be a child of the FlowLayoutPanel control, including other FlowLayoutPanel instances. This enables construction of sophisticated layouts that adapt to your form's dimensions at runtime.

Features

AutoSize

When enabled, the FlowLayoutPanel control resizes itself to fit its contents according to the AutoSizeMode property specified.

Flow Direction

The FlowLayoutPanel control supports multiple layout directions for its children using the FlowDirection property. Available options are LeftToRight, TopDown, RightToLeft, and BottomUp. The default layout direction is LeftToRight.

Advanced

JavaScript Widget

The TableLayoutPanel control arranges its contents in a grid. Because the layout is performed both at design time and run time, it can change dynamically as the application environment changes. This gives the controls in the panel the ability to proportionally resize, so it can respond to changes such as the parent control resizing or text length changing due to localization.

Any Wisej.NET control can be a child of the TableLayoutPanel control, including other instances of TableLayoutPanel. This allows you to construct sophisticated layouts that adapt to changes at runtime.

The TableLayoutPanel control can expand to accommodate new controls when they are added, depending on the value of the RowCount, ColumnCount, and GrowStyle properties. Setting either the RowCount or ColumnCount property to a value of 0 specifies that the TableLayoutPanel will be unbound in the corresponding direction.

You can also control the direction of expansion (horizontal or vertical) after the TableLayoutPanel control is full of child controls. By default, the TableLayoutPanel control expands downward by adding rows.

Features

AutoSize

When enabled, the TableLayoutPanel control is able to resize itself to fit its contents according to the AutoSizeMode property specified.

Advanced

JavaScript Widget

The GroupBox displays a frame around a group of controls with or without a caption. Use a GroupBox to logically group a collection of controls on a form. The GroupBox is a container control that can be used to define groups of controls.

A typical use for a group box is to contain a logical group of RadioButton controls. When you have two group boxes, each containing several radio buttons, each group of buttons is mutually exclusive, setting one option value per group.

You can add controls to the GroupBox using the Add method of the Controls property.

Features

Collapsible

The visibility of the GroupBox can be controlled at runtime using the ShowCloseButton property.

CheckBox

The GroupBox control features an optional checkbox that can be toggled to enable or disable the child controls. Set the ShowCheckBox property to true to show the checkbox. Set the Checked property to toggle the checked state.

AutoSize

When enabled, the GroupBox control resizes itself to fit its contents according to the AutoSizeMode property specified.

Advanced

JavaScript Widget

The Accordion control provides a way to toggle between hiding and showing large amounts of content.

Features

Design-Time Customization

Each AccordionPanel can be fully customized at design-time.

Advanced

JavaScript Widget

A TabControl contains tab pages, which are represented by TabPage objects that you add through the TabPages property. The order of tab pages in this collection reflects the order the tabs appear in the control.

Features

Movable Tabs

When AllowUserToMoveTabs is set to true, the user is able to rearrange the tab pages at runtime.

Orientation

The TabControl can be configured to display the tabs in a Horizontal or Vertical manner. The default orientation is Horizontal.

Advanced

JavaScript Widget

UserPopups are used to display a popup relative to a target control.

Features

Alignment

The UserPopup can be shown anywhere in relation to the popup's target control.

• TopLeft: The popup is shown above the opener aligned to the left edge.

• TopCenter: The popup is shown above the opener and horizontally centered.

• TopRight: The popup is shown above the opener aligned to the right edge.

• BottomLeft: The popup is shown below the opener aligned to the left edge.

• BottomCenter: The popup is shown below the opener and horizontally centered.

• BottomRight: The popup is shown below the opener aligned to the right edge.

• LeftTop: The popup is shown to the left of the opener aligned to the top edge.

• LeftMiddle: The popup is shown to the left of the opener and vertically centered.

• LeftBottom: The popup is shown to the left of the opener aligned to the bottom edge.

• RightTop: The popup is shown to the right of the opener aligned to the top edge.

• RightMiddle: The popup is shown to the right of the opener and vertically centered.

• RightBottom: The popup is shown to the right of the opener aligned to the bottom edge.

Full Customization

The UserPopup is fully customizable. Any kind of control can be added to the container.

Advanced

JavaScript Widget

The UserControl gives you the ability to create controls that can be used in multiple places within an application or organization. You can include all the code needed for validation of common data you ask the user to input; some examples of this are email addresses, telephone numbers, and postal codes. Another efficient use of the user control is to simply preload a ComboBox or ListBox with static items you commonly use in almost every application; some examples of this are countries/regions, cities, states, and office locations.

Advanced

JavaScript Widget

The ToolBar control is used on forms as a control bar that displays a row of drop-down menus and bitmapped buttons that activate commands. Thus, clicking a toolbar button is equivalent to choosing a menu command. The buttons can be configured to appear and behave as push buttons, drop-down menus, or separators. Typically, a toolbar contains buttons and menus that correspond to items in an application's menu structure, providing quick access to an application's most frequently used functions and commands.

Features

Button Styles

The ToolBarButton control features several styles for customizing its appearance:

• PushButton: A standard button.

• ToggleButton: A toggle button.

• Separator: A line between ToolBar buttons.

• DropDownButton: A drop-down button that displays a menu when clicked.

Advanced

JavaScript Widget

Typically, a StatusBar control consists of StatusBarPanel objects, each of which displays text and/or an icon. You can also provide owner-drawn panels to provide custom panels such as a progress bar or a series of images that displays the state of your application. A StatusBar control typically displays information about an object being viewed on a Form, the object's components, or contextual information that relates to that object's operation within your application.

The StatusBar control provides properties that enable you to customize the appearance of the control. If the StatusBar is displayed on a form that can be resized, you can use the SizingGrip property to display a sizing grip in the lower-right corner of the form to indicate to users that the form can be resized. The ShowPanels property enables you to display panels within your StatusBar or to display only the value of the Text property of the control.

Features

AutoSize

The AutoSize property of the StatusBarPanel provides a few preset ways to customize the size of the panel.

• None: The StatusBarPanel does not change size when the control resizes.

• Spring: The StatusBarPanel uses the available space on the StatusBar.

• Contents: The width of the StatusBarPanel is determined by its contents.

Panels

Any number of Panels can be added to a StatusBar using the Panels property. The panels can be customized to include an icon, text, and custom spacing.

Advanced

JavaScript Widget

You can add controls to the two resizable panels, and you can add other SplitContainer controls to existing SplitContainer panels to create many resizable display areas.

Use the SplitContainer control to divide the display area of a container (such as a Form) and allow the user to resize controls that are added to the SplitContainer panels. When the user passes the mouse pointer over the splitter, the cursor changes to indicate that the controls inside the SplitContainer control can be resized.

Features

Orientation

The splitter can be arranged horizontally or vertically by setting the Orientation property.

Collapsible Panels

Each SplitterPanel in the SplitContainer can collapse programmatically or by using the collapse button in the panel's header.

For each panel use the ShowHeader and ShowCloseButton properties to manage the header part of the SplitterPanel. When the user collapses the panel, it collapses to its side.

Nested SplitContainers

A SplitContainer can contain other SplitContainer controls and "merge" the internal splitter bar to make it look and behave as one control. It's all about the borders of the inner SplitterPanel.

Wisej.NET detects whether the docked child control has borders, if it does it removes the border from the inner SplitterPanel.

Icons and Tools

Panels can also show a custom icon and any number of tools. See Embedded Tools for more details on this awesome feature.

Advanced

JavaScript Widget

The SlideBar control can be used to show data in a Horizontal or Vertical format. The control features two customizable scroll bars and a panel on the inside that can be used to host an unlimited number of controls.

Features

Orientation

The SlideBar control can be customized to show a collection of any type of control in a Horizontal or Vertical format by setting the Orientation property.

Advanced

JavaScript Widget