The LinkLabel control is similar to a Label control with the exception that it can display a hyperlink. Multiple hyperlinks can be specified in the text of the control. Each hyperlink can perform a different task within an application.

Features

Link Area

Setting the LinkArea property of the LinkLabel control specifies the portion of text that will be shown as a hyperlink to the user.

Link Behavior

The behavior of the link can be configured to use one of the preset values:

• SystemDefault: The behavior of this setting depends on the browser.

• AlwaysUnderline: The link always displays with underlined text.

• HoverUnderline: The link displays underlined text only when the mouse is hovered over the link.

• NeverUnderline: The link text is never underlined.

Active Color

The LinkLabel selection color can be fully customized using the ActiveLinkColor property:

How To

Customize the Appearance

The Label control is fully customizable through the Font, Text, AllowHTML, and AppearanceKey properties.

Font

Like most other controls in Wisej, the LinkLabel control has a Font property that allows for customization of the size, features, and style of font to use for the control.

AllowHtml

When set to true, the Label's Text property will be interpreted as HTML content, allowing for full customization of the control.

Appearance Key

The AppearanceKey property of the control can be used to give the Label a custom look. This can be based off of another control already defined in the theme (i.e. button) or as an entirely new appearance defined in a mixin.

{
	"appearances":
	{
		"mylinklabel":
		{
			"inherit": "linklabel",
			"states":
			{
				"default":
				{
					"styles":
					{
						"backgroundColor": "blue"
					}
				}
			}
		}
	}
}

Advanced

JavaScript Widget

Most controls that need scroll bars already provide them and do not require this control. This is true of a multiline TextBox control, a ListBox, and a ComboBox, for example.

You can use this control to implement scrolling in containers that do not provide their own scroll bars such as a PictureBox or for user input of numeric data. The numeric data can be displayed in a control or used in code. The Minimum and Maximum properties determine the range of values the user can select. The LargeChange property determines the effect of clicking within the scroll bar but outside the scroll box. The SmallChange property determines the effect of clicking the scroll arrows at each end of the control.

Features

Advanced

JavaScript Widget

The PDFViewer control is used to display pdf documents in the browser. There are multiple viewer types available to display the documents based on the type of browser used.

To get started, set the PdfSource property to the URL of a pdf document and it will be loaded at runtime.

Features

Multiple Viewer Types

The PdfViewer has several preset PdfViewerTypes.

• Auto: The PDF viewer is selected by the client browser.

• Google: Use Google's document viewer.

• Mozilla: Use Mozilla PDF.js viewer.

Custom Viewer

The PdfViewer control can implement a custom pdf viewer by setting the ViewerType property to Custom and applying a ViewerURL.

The image below demonstrates an integration of Mozilla's PDF.js.

Advanced

JavaScript Widget

Wisej.NET Label controls are used to display text or images that cannot be edited by the user. They are used to identify objects on a form—to provide a description of what a certain control will do if clicked, for example, or to display information in response to a run-time event or process in your application. Because the Label control cannot receive focus, it can also be used to create access keys for other controls.

Features

AutoSize

When the AutoSize property is set to true, the Label control will automatically adjust itself to fit the size of it's text content.

HTML

The Label control can be scaled to any level of complexity by utilizing the AllowHtml property. This property controls whether the value applied to the Text property will be interpreted as HTML.

Mnemonics

Mnemonics can be used to provide shortcuts for form navigation. By pressing ALT + the Mnemonic key on a Label control, the focus will automatically be applied to the control at the next TabIndex. Mnemonic keys are specified with an ampersand (&) .

How To

Customize the Appearance

The Label control is fully customizable through the Font, Text, AllowHTML, and AppearanceKey properties.

Font

Like most other controls in Wisej, the Label control has a Font property that allows for customization of the size, features, and style of font to use for the control.

AllowHtml

When set to true, the Label's Text property will be interpreted as HTML content, allowing for full customization of the control.

Appearance Key

The AppearanceKey property of the control can be used to give the Label a custom look. This can be based off of another control already defined in the theme (i.e. button) or as an entirely new appearance defined in a mixin.

{
	"appearances":
	{
		"myTextLabel":
		{
			"inherit": "textlabel",
			"states":
			{
				"default":
				{
					"styles":
					{
						"backgroundColor": "blue"
					}
				}
			}
		}
	}
}

Advanced

JavaScript Widget

To use the AspNetPanel control, simply set the PageSource property to the location of an existing .aspx document in the project.

Features

Page Source

Any ASP.NET or MVC page source can be shown in the AspNetPanel control.

Here's a sample page that converts text from lowercase to uppercase.

The corresponding code in the PageSource:

Advanced

JavaScript Widget

The Wisej.NET Widget control is the key to integrating the rest of the JavaScript world into a Wisej.NET application. The Widget control allows developers to load custom JavaScript and CSS libraries into their Wisej.NET application at runtime to utilize and containerize custom controls.

The custom-integrated controls are able to be configured and populated from server-side resources and fire server-side events.

Features

Server Communication

Delegating communication between a client and server for individual controls on a webpage can be a cumbersome task. Wisej.NET makes this easy by providing the infrastructure to communicate the messages with a few calls.

Client to Server

When working with JavaScript widgets, everything is handled on the client. If you want to send a message to the server you can do so by attaching to the client-side widget event and calling fireWidgetEvent:

After the Wisej.NET application receives the event data, it delegates it to the corresponding server-side control's WidgetEvent handler, if one exists.

Server to Client

Sending a message to the client-side widget is easy using the Instance dynamic member.

Create a function in your client-side Widget's InitScript:

Then you, can call this method from the server-side Widget instance:

Advanced

JavaScript Widget

A Spacer control draws a line, horizontal or vertical, between controls. Spacer controls do not react to any keyboard, mouse, mouse wheel, or tablet input and cannot be enabled or selected.

Features

Custom Size

The Spacer control can be customized to create spacers of any size.

Typically the PictureBox is used to display graphics from a bitmap, metafile, icon, JPEG, GIF, or PNG file.

Set the Image property to the Image you want to display, either at design time or at run time. You can alternatively specify the image by setting the ImageSource property and load the image synchronously using the Load method or asynchronously using the LoadAsync method.

Features

Size Modes

The SizeMode property of the PictureBox control manages the image placement and control sizing. It features several preset configurations:

• AutoSize: The PictureBox is sized equal to the size of the image that it contains.

• CenterImage: The image is displayed in the center if the PictureBox is larger than the image. If the image is larger than the PictureBox, the picture is placed in the center of the PictureBox and the outside edges are clipped.

• Cover: The image is resized to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

• Normal: The image is placed in the upper-left corner of the PictureBox. The image is clipped if it is larger than the PictureBox it is contained in.

• Stretch: The image within the PictureBox is stretched or shrunk to fit the size of the PictureBox.

• Zoom: The size of the image is increased or decreased maintaining the size ratio.

Advanced

JavaScript Widget

The ImageList component is typically used by other controls, such as the ListView, TreeView, or ToolBar. You can add bitmaps or icons to the ImageList, and the other controls are able to use the images as they require.

The Wisej.NET ImageList component is used to store images, which can then be displayed by controls. An image list allows you to write code for a single, consistent catalog of images. For example, you can rotate images displayed by a Button control simply by changing the button's ImageIndex or ImageKey property. You can also associate the same image list with multiple controls. For example, if you are using both a ListView control and a TreeView control to display the same list of files, changing a file's icon in the image list will cause the new icon to appear in both views.

Features

Resizing

When set, the ImageSize property will automatically force all images in the ImageSet to become the given size.

Transparent Color

When set, the TransparentColor property specifies which color in the image should be treated as transparent.

Original Image:

A ProgressBar is used to visual indicate the progress of lengthy operations.

The Style property determines the style of ProgressBar that is displayed. Note that the ProgressBar control can only be oriented horizontally. The ProgressBar control is typically used when an application performs tasks such as copying files or printing documents. Users of an application might consider an application unresponsive if there is no visual cue. By using the ProgressBar in your application, you alert the user that the application is performing a lengthy task and that the application is still responding.

Features

Maximum and Minimum

The ProgressBar can specify a custom integer value for the Maximum and Minimum properties.

How To

Customize the Appearance

The ProgressBar control can be customized through the Font, Color, and AppearanceKey properties.

Appearance Key

The Upload control can be customized to show any predefined theme appearance by setting the AppearanceKey property.

Font

Like most other controls in Wisej, the Label control has a Font property that allows for customization of the size, features, and style of font to use for the control.

Color

The ProgressBar has three properties to control the color of its components. The ForeColor property changes the text color, the BackColor property controls the container color, and the BarColor property controls the color of the bar.

Advanced

JavaScript Widget

The WebBrowser control lets you host Web pages and other browser-enabled documents in your Wisej.NET applications. You can use the WebBrowser control, for example, to provide integrated HTML-based user assistance or Web browsing capabilities in your application. Additionally, you can use the WebBrowser control to add your existing Web-based controls to your Wisej.NET application.

The WebBrowser control in Wisej.NET uses an iframe element to load and render the content.

Features

Load Webpages

The Url property of the WebBrowser can assign any valid webpage to the control, such as another Wisej.NET application.

Advanced

JavaScript Widget

The Upload control allows users to select files from their local machine and upload them to the server. The files are available in the Uploaded event as a HttpFileCollection.

Features

Capture Mode

The CaptureMode property contains several configuration options for defining the type of user input.

• Default: The default upload configuration.

• User: Specifies that the upload operation should show a user-facing camera and microphone.

• Environment: Specifies that the upload operation should show an environment-facing camera and microphone.

Filter File Types

The AllowedFileTypes property of the Upload control specifies the required media types for file selection.

Some examples include:

• audio/*: Meaning "any audio file".

• video/*: Meaning "any video file".

• image/*: Meaning "any image file".

Multiple File Selection

When the AllowMultipleFiles property is set to true, more than one file can be selected for upload.

How To

Customize the Appearance

The Upload control can be customized to have any kind of appearance by using the AppearanceKey, Font, and Color properties.

Appearance Key

The Upload control can be customized to show any predefined theme appearance by setting the AppearanceKey property.

Font

Like most other controls in Wisej, the Upload control has a Font property that allows for customization of the size, features, and style of font to use for the control.

Color Properties

The Upload control has a ForeColor and BackColor property that can specify the color for the text and container, respectively.

Advanced

JavaScript Widget

The Wisej.Web.IFramePanel control can be used to show embedded web pages.

Features

URL

The Url property of the IFramePanel can be used to assign any valid webpage to the control, such as another Wisej.NET application.

Advanced

JavaScript Widget

The Wisej.Web.HtmlPanel control can be used to embed full HTML documents within a Wisej.NET application.

Features

Custom HTML

Any HTML file or code can be directly linked to the HtmlPanel control using the Html or HtmlSource property.

//For the Html property, put the entire HTML code as a string
htmlPanel1.Html = "<b>Example Text Here</b>";

//For the HtmlSource property, provide a string contining the path to a HTML file
htmlPanel1.HtmlSource = "MyHtmlFile.html";

Clicks inside the HtmlPanel can be handled with the ElementClick event,

Advanced

JavaScript Widget

The Canvas is a control which can be used to draw graphics via scripting. This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations.

Features

Drawing

The Wisej.NET Canvas control implements all the same properties and methods as the JavaScript control. You can use methods like LineTo(), FillRect(), and FillText() to draw directly on the control in the browser.

How To

Draw a Line

You can draw a line with the Wisej.Web.Canvas control the same way you would a JavaScript Canvas element:

Advanced

JavaScript Widget

The Line control enables you to draw lines on a form or container at design time or run time.

Features

Line Size

The LineSize property can be used to get or set the height of the line in pixels.

Line Style

The LineStyle property can be used to customize the appearance of the line using one of the following presets:

• None: No line.

• Solid: A solid line.

• Dotted: A dotted line.

• Dashed: A dashed line.

• Double: A double solid line.

Orientation

Lines can be configured to be shown in a Horizontal or Vertical orientation:

Advanced

JavaScript Widget

Using the Wisej.Web.Shape control, you can create any kind of shape by modifying the various properties of the Shape control.

Features

Custom Colors

The BorderStyle property for each side of the Shape control can be customized to have a different Color, Radius, Size or Style.

Rotation

The Shape's Rotation property can be adjusted to show any custom rotation of the shape.

Advanced

JavaScript Widget