Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Represents an image control.
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.
For a full list of properties, methods and events see the API documentation.
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.
Represents a label control that can display hyperlinks.
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.
For a full list of properties, methods and events see the API documentation.
Setting the LinkArea property of the LinkLabel control specifies the portion of text that will be shown as a hyperlink to the user.
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.
The LinkLabel selection color can be fully customized using the ActiveLinkColor property:
The Label control is fully customizable through the Font, Text, AllowHTML, and AppearanceKey properties.
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.
When set to true, the Label's Text property will be interpreted as HTML content, allowing for full customization of the control.
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.
Represents a label control.
Wisej 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.
For a full list of properties, methods and events see the API documentation.
When the AutoSize property is set to true, the Label control will automatically adjust itself to fit the size of it's text content.
A BorderStyle is applied to the Labels to show the AutoSize functionality.
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 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 (&) .
Certain controls come with a Label property that allows it to display a label without having to create a separate Label control, see the link below.
The Label control is fully customizable through the Font, Text, AllowHTML, and AppearanceKey properties.
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.
When set to true, the Label's Text property will be interpreted as HTML content, allowing for full customization of the control.
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.
Represent an upload widget. Allows users to selected one or more files and upload them to the server.
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.
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.
The CaptureMode property works better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.
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".
The property takes its value as a string containing one or more unique file type specifiers, separated by commas.
When the AllowMultipleFiles property is set to true, more than one file can be selected for upload.
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.
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.
The Upload control has a ForeColor and BackColor property that can specify the color for the text and container, respectively.
Implements the basic functionality of a scroll bar control.
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.
Represents a control that can host ASP.NET or MVC pages within a Wisej application.
To use the AspNetPanel control, simply set the PageSource property to the location of an existing .aspx document in the project.
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:
Provides methods to manage a collection of Image objects. This class cannot be inherited.
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 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.
When set, the ImageSize property will automatically force all images in the ImageSet to become the given size.
When set, the TransparentColor property specifies which color in the image should be treated as transparent.
Original Image:
Item | Description |
---|---|
Item | Description |
---|---|
Item | Description |
---|---|
For a full list of properties, methods and events see the
Item | Description |
---|
For a full list of properties, methods and events see the
Item | Description |
---|
For a full list of properties, methods and events see the
Item | Description |
---|
For a full list of properties, methods and events see the
Class name
"wisej.web.PictureBox"
Theme appearance
"picturebox", see Themes.
Source Code
Class name
"wisej.web.LinkLabel"
Theme appearance
"linklabel", inherits appearance from "textlabel" see Themes.
Source code
Class name
"wisej.web.Label"
Theme appearance
"textlabel", see Themes.
Source code
Class name | "wisej.web.Upload" |
Theme appearance |
Child components | "button" is the upload button. "textfield" is the section of the control that holds the file names. |
Source Code |
Class name | "wisej.web.HScrollBar" for the horizontal scrollbar. "wisej.web.VScrollBar" for the vertical scrollbar. |
Theme appearance |
Child components | "slider" is the scroll container. "button-end" is the ending scroll button. "button-top" is the beginning scroll button. |
Source Code |
Class name | "wisej.web.IFrame" |
Source Code |
Represents a PdfViewer control that can display a pdf document in the browser either using the native pdf viewer, the pdf.js viewer, Google docs, or a custom viewer.
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.
For a full list of properties, methods and events see the API documentation.
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.
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.
Represents a spacer control. It can be used to add a space between controls in a layout panel. It is not rendered on the client.
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.
For a full list of properties, methods and events see the API documentation.
The Spacer control can be customized to create spacers of any size.
Represents a progress bar control.
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.
For a full list of properties, methods and events see the API documentation.
The ProgressBar can specify a custom integer value for the Maximum and Minimum properties.
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.
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.
Provides a generic widget that can use most third party javascript widgets.
The Wisej Widget control is the key to integrating the rest of the JavaScript world into a Wisej application. The Widget control allows developers to load custom JavaScript and CSS libraries into their Wisej 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.
For a full list of properties, methods and events see the API documentation.
Delegating communication between a client and server for individual controls on a webpage can be a cumbersome task. Wisej makes this easy by providing the infrastructure to communicate the messages with a few calls.
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:
When debugging the Widget, make sure to check the Browser console for important messages.
After the Wisej application receives the event data, it delegates it to the corresponding server-side control's WidgetEvent handler, if one exists.
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:
Represents a web browser control that enables the user to navigate web pages inside a form or a page.
The WebBrowser control lets you host Web pages and other browser-enabled documents in your Wisej 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 application.
The Url property of the WebBrowser can assign any valid webpage to the control, such as another Wisej application.
Represents a control that displays any html file in an IFrame element.
"upload", see .
"scrollbar", see .
Item | Description |
---|---|
Item | Description |
---|---|
Item | Description |
---|---|
The WebBrowser control in Wisej uses an to load and render the content.
For a full list of properties, methods and events see the
The Wisej WebBrowser control has the same Cross-Origin policies and limitations as the standard HTML IFrame element. .
Item | Description |
---|
For a full list of properties, methods and events see the
The Wisej IFramePanel control has the same Cross-Origin policies and limitations as the standard HTML IFrame element. .
Item | Description |
---|
Class name
"wisej.web.PdfViewer"
Theme appearance
"panel", see Themes.
Source Code
Class name
"wisej.web.ProgressBar"
Theme appearance
"progressbar", see Themes.
Child components
"progress" is the container that displays the value. "label" is the progress bar's text.
Source Code
Class name
"wisej.web.Widget"
Theme appearance
"widget", see Themes.
Source Code
Class name | "wisej.web.WebBrowser" |
Theme appearance |
Child components |
Source Code |
Class name | "wisej.web.IFramePanel" |
Theme appearance |
Child components |
Source Code |
Represents a control that displays any HTML file and a corresponding CSS style sheet as embedded HTML.
The Wisej.Web.HtmlPanel control can be used to embed full HTML documents within a Wisej application.
For a full list of properties, methods and events see the API documentation.
Any HTML file or code can be directly linked to the HtmlPanel control using the Html or HtmlSource property.
Clicks inside the HtmlPanel can be handled with the ElementClick event,
It's not recommended to use HTML containing an iframe within the HtmlPanel. The HtmlPanel cannot handle clicks on anything inside the iframe. If your HTML contains an iframe, use the IFramePanel instead.
Represents the HTML5 canvas element.
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.
For a full list of properties, methods and events see the API documentation.
The Wisej Canvas control implements all the same properties and methods as the JavaScript Canvas control. You can use methods like LineTo(), FillRect(), and FillText() to draw directly on the control in the browser.
You must still call BeginPath() and Stroke() to draw lines. See https://www.w3schools.com/tags/canvas_lineto.asp.
You can draw a line with the Wisej.Web.Canvas control the same way you would a JavaScript Canvas element:
Represents a shape control. Displays an element a border in any of the four sides.
Using the Wisej.Web.Shape control, you can create any kind of shape by modifying the various properties of the Shape control.
For a full list of properties, methods and events see the API documentation.
The BorderStyle property for each side of the Shape control can be customized to have a different Color, Radius, Size or Style.
The Shape's Rotation property can be adjusted to show any custom rotation of the shape.
Represents a line control.
The Line control enables you to draw lines on a form or container at design time or run time.
The LineSize property can be used to get or set the height of the line in pixels.
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.
Lines can be configured to be shown in a Horizontal or Vertical orientation:
"panel", see .
"pane" is the container. "captionbar" is the header. "title" is the title of the panel. "icon" is the icon of the panel, if applicable. "close-button" is the close button of the panel, if applicable. See .
"panel", see .
"pane" is the container. "captionbar" is the header. "title" is the title of the panel. "icon" is the icon of the panel, if applicable. "close-button" is the close button of the panel, if applicable. See .
Item | Description |
---|---|
Item | Description |
---|---|
Item | Description |
---|---|
For a full list of properties, methods and events see the
Item | Description |
---|
Class name
"wisej.web.ScrollableHtmlPanel"
Theme appearance
"widget", see Themes.
Source Code
Class name
wisej.web.Canvas
Source code
Class name
"wisej.web.Shape"
Theme appearance
"shape", see Themes.
Source code
Class name | "wisej.web.Line" |
Theme appearance |
Source code |
"line", see .