Advanced Input Controls

Advanced Input Controls

Intersoft ClientUI® includes a vast array of innovative input controls to enhance your business applications with sophisticated editing experience, ranging from numeric up down, masked input, currency editor, datetime editor, multi-range slider bar, busy indicator, to high-performance file upload control and much more.

Live Demo Gallery Watch Video

Masked Input

Display and Edit Mask

UXMaskedInput is an easy-to-use mask input control featuring two different views, a display mask and an edit mask. In editing mode, value will be formatted according to the edit mask setting, while the display mask format will be used in non-editing mode.

Flexible Masked Input Value

UXMaskedInput is capable to save the mask character and the literal value. You can combine both features as necessary depending on your application’s scenarios.

Accepted Format

UXMaskedInput is designed following the standard masking pattern. For example, us e”0” for numeric input, L for alphabet input, and other patterns.

Custom Mask Character

Instead of using an underscore character“_” as the default mask character, you can customize it to something else, for example “.”.

Full Keyboard Support

Depending on the specified pattern, some keystroke on the current caret position will be automatically blocked. For example: if you have a numeric pattern, letter character is blocked, and vice versa. You can use Del or Backspace to delete a character, which will reverse to its original mask character.

Back to top

Currency Editor

Edit and Display Mode

Display mode is the default formatting applied on the control. Edit mode is triggered when the focus shift to the control and it’s not in read-only state. UXCurrencyEditor deliver both feature together for better editing experience.

Numeric Format

UXCurrencyEditor is built to comply to the standard and custom .NET numeric format so you can easily specify the Edit and Display format.

Negative Value

By default, when UXCurrencyEditor holds a negative value, the text color is set to Red as a visual indicator. You can further customize the negative value pattern through template editing.

Built-in Value Spinner

One of the unique features in UXCurrencyEditor is the value spinner buttons. Value spinning works based on the caret position. If it’s positioned on the hundreds, the increment or decrement is one hundred based.

Culture Support

Supporting the widest available culture, UXCurrencyEditor lets you deliver user-friendly currency input without hassles. When a culture is specified, it automatically reflects the currency sign, digit and the decimal separator.

Keyboard Support

Only digit and decimal point separator are valid input for UXCurrencyEditor. User can use the keyboard up down arrow to spin the value and left right to move the caret. Press delete to delete the value. Depending on the setting, literal format will not be deleted and some format, such as 0, is reverted back to its original value. Paste operation is supported through CTRL+V key, which automatically parse numeric value.

Back to top

DateTime Up Down

Built-in Value Spinner

One of the unique features in UXDateTimeUpDown is the value spinner buttons. Value spinning works when IsEditable property is set to true. If you want to set the minimum, maximum, and value increment features, the IsEditable property must be false.

Commanding

UXDateTimeUpDown is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Customizable Appearance

UXDateTimeUpDown supports easy appearance customization through the available properties such as the background, corner radius, border, and more. Control and template editing is also supported for more comprehensive customization.

Back to top

DateTime Editor

Edit and Display Mode

Display mode is the default formatting applied on the control. Edit mode is triggered when the focus shift to the control and it’s not in read-only state. UXDateTimeEditor deliver both feature together for better editing experience.

Numeric Format

UXDateTimeEditor is built to comply to the standard and custom .NET date time format so you can easily specify the Edit and Display format.

Maximum and Minimum Value

These two properties are available to constraint the accepted date time value input. By default, this value is null and any valid date time value is accepted. When specified, UXDateTimeEditor will throw an error on any input outside the specified range. Combine it with IsValidating property to manually trigger the validation process.

Caret Advancing

Automatic caret advancing is a feature that move the caret to the next editable section when the highlighted section doesn’t have any input possibilities. For example, input 9 in the date section will automatically move the caret to the next editable section.

Flexible Value Spin Mode

UXDateTimeEditor features value spinning that works based on caret position. Refine the editing experience with LocalValue and GlobalValue spin mode. LocalValue modifies only the highlighted section locally, while GlobalValue takes account the entire date time value as a whole. Consider a date time value example of 12/31/2010. In LocalValue mode, spinning up on the date section will result to 12/1/2010, while GlobalValue translates the value to 1/1/2011.

Commanding

UXDateTimeEditor is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Various Culture Support

Supporting the widest available culture, UXDateTimeEditor lets you deliver user-friendly currency input without hassles. When a culture is specified, it will affect the date time format and pattern.

Keyboard Support

Only digit and simple alphabet input is accepted in UXDateTimeEditor. User can use the keyboard up down arrow to spin the value of the current caret. Depending on the format, user can also intuitively enter the first alphabet character of the desired month, for an instance, type ‘f’ to set the month to February. Paste operation is supported through the CTRL+V key gesture, which automatically attempt to parse the clipboard data into a valid date time value.

Back to top

DateTime Picker

Popup Behavior

UXDateTimePicker is the industry’s most comprehensive date and time editing control, which combines the powerful features of several controls like UXDateTimeUpDown, UXCalendar, and UXClock. In addition to direct textbox editing, user can also open the popup for richer date and time editing experience. With the popup, you can click on the calendar to select a date and interact with the clock to set the time. More customization on the popup behaviors are supported through the available properties.

Editing Mode

UXDateTimePicker control has three editor modes: Both, Calendar, and Clock. The default value is Both. When Both mode is used, it will display both calendar and clock control in the editor. To show only Calendar or Clock, you simply customize the EditorMode property to the desired mode.

Focus Manager and Keyboard Support

UXDateTimePicker complies with ISO 9241 usability standards in regards of keyboard navigation and focus support. When the editor is displayed, triggered from either the keyboard or mouse, the logical focus will be automatically set to the first editable object, which is the Calendar control in Both mode. This allows you to use navigational arrow keys to select the date.

Customizable DropDown Position and Animation

UXDateTimePicker shares several common properties as UXPopUp for dropdown menu positioning, such as: configuring the preferred position, preferred horizontal direction, and preferred vertical direction. The same thing goes to the animation. You can set the fade-in/out animation, adjust the slide direction, display and hide animation.

Back to top

Clock

Auto Update Mode

Use the AutoUpdate property to automatically synchronize UXClock’s value based on the current time. When enabled, UXClock behaves exactly like any clock for time viewing purpose. Use the TickingMode property to change the tick moving behavior.

Innovative Time Editing

The UXClock is not designed only as a widget; you can use it for time input control through a simple property set. Use the mouse wheel or keyboard arrow key to move the hour or minute hand. Use CTRL + Click or CTRL + SHIFT + Click to directly move the hour or minute hand according to your mouse click. Use the AM/PM slider to change AM/PM value. Learn more about UXClock’s user experience features.

Customizable Editing Behavior

Adding to its rich editing behavior, UXClock enables developer to tweak the editing experience further. Set the EditingMode property to KeepExistingValue to leave the minute and second hands intact when moving the hour hand. ResetValue will reset the minute and second value to 0 when the hour hand is moved. This also applies when the minute hand is moved. The hour hand is reset to 0.

Commanding

UXClock is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development. Learn more about commanding support in ClientUI.

Customizable Appearance

UXClock supports easy appearance customization through the available properties such as the background, corner radius, border, and more. You can also easily customize the tick style and hand style of the UXClock through typed style properties. Control and template editing is also supported for more comprehensive customization.

Back to top

Calendar

Flexible Display Mode

Thanks to its diverse display mode, UXCalendar makes it easy for date viewing and selection business scenarios. You can select month, year, decade, and century. Month view is just like any ordinary calendar. In Year view, instead of seeing dates, user can only see and select the month. Decade mode shows all years within a decade. Century mode displays all years within a century. Use the DisplayDate and InitialDisplayMode properties to control UXCalendar’s view mode. User can also interact with UXCalendar’s element to jump between views easily.

Multiple Calendars

In addition to single calendar display, UXCalendar enables multiple calendar view. Use the CalendarViewCount property to determine how many calendars you wish to display.

Display Range

In certain business scenarios, it is important to control the visible date displayed. UXCalendar facilitates this specific need with the DisplayDateStart and DisplayDateEnd properties. This setting applies not only to Month view, but also to Year and Decade view.

Week Number

By default, week number is displayed on the left side of the calendar. If not desired, this feature can be hidden. Further customization on the week number feature is possible, such as: changing the week numbering rule and determining the first day of week.

Today’s Date Highlight and Visibility

Located on top most of UXCalendar’s header, calendar today is an element that display today’s date information. Use the CalendarTodayVisibility to collapse this element and hide it from user. You can also customize the today’s date highlight on the calendar using IsTodayHighlighted property.

Date Title Format

UXCalendar provides several properties to entirely change the date title. TodayDateFormat property changes the today date’s format. TitleDateFormat property controls the date title format for Month view mode. TitleRangeFormat property is used to format the date range in Decade and Century view mode.

Adjacent Days Visibility

Adjacent Days are previous and next months’ days displayed on the current month’s view. You can show or hide these days using GenerateAdjacentMonthDays property. When visible, you can navigate to previous or next month by selecting on the adjacent days directly using keyboard or mouse stroke.

Keyboard and Mouse Navigation

The impressive keyboard and mouse support in UXCalendar makes it easy for user to interact with its element and features. User can use the arrow keys or spacebar to change the focused date, select/unselect all dates. Combine CTRL and/or SHIFT + arrow or mouse clicks to select a range or multiple date ranges. You can also use mouse only to select a date range. Tap the Home and End key to focus the first or last date from the calendar item.

Selection Mode

UXCalendar provides unbeatable date input experience with various date selection mode. The None option completely disables the selection feature. SingleDate option only allows a single date selection. SingleRange option enables a continuous date range selection. MutlipleRange option is provides multiple date range selections.

MVVM-ready Architecture

You can add events to UXCalendar by populating the Events or EvensSource properties. You can use your own object and bind it to the UXCalendar using MVVM design pattern. The control provides comprehensive properties related to the start and end date, event type, subject, and description.

Culture Support

UXCalendar offers a comprehensive list of culture support. When a culture is selected, all elements, particularly the textual elements like month name and day name are translated accordingly.

Back to top

Domain Up Down

Data Binding

UXDomainUpDown is derived from ItemsControl therefore you can bind a collection of data to UXDomainUpDown. You can either use ItemTemplate or the member path properties for data binding. You can also customize the display mode using item template.

Customize Spin Behavior

Use your keyboard’s up and down arrow key or click on the spinner button to spin the value. By default, as it reaches the first or last item, the up or down button will be automatically disabled. Set the IsCyclic property to true to enable item repeat.

Editing Behavior

In editing mode, user is free to input any information. The value will be processed when the control loses its focus or enter key is pressed. It requires an exact match between the input value and the item in the collection. If the input doesn’t match any items, an invalid action will occur. You can either cancel the editing by pressing ESC or enter a matching value.

Commanding

UXDomainUpDown is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Customizable Appearance

By default, the spinner buttons are right aligned in the control. You can change the alignment to left, or completely hide the buttons. User can still spin the value using keyboard.

Back to top

File Upload

RFC 1867 Compliant

UXFileUpload is a high-performance file upload control conforming to RFC 1867 form-based data submission. Sports a professional and business-oriented styles, UXFileUpload delivers intuitive user interface with predefined toolbars, scrollable file list, progress bar and status bar which adheres to ISO usability standards.

MVVM-ready Architecture

UXFileUpload is built with an innovative architecture that allows you to capture the uploaded files in loosely-coupled approach without requiring event handlers, ideal for MVVM design pattern. This allows you to streamline the user interaction logic in the ViewModel along with other properties, such as document details in a document submission application. A set of comprehensive properties are available, such as UploadedFiles, UploadedFilesUri, and more.

Included ASP.NET Server File Upload Handler

UXFileUpload comes with built-in server side upload handler based on ASP.NET dynamic handler technology. The built-in UXFileUpload server handler is designed with a great level of customizability, allowing you to inherit the UXFileUploadHandler class and override the properties as necessary. You can also customize the upload processing logic if needed, by overriding the provided properties and methods.

Automatic Upload Mode

UXFileUpload lets users upload their files in two easy steps, select the files and hit the start upload button. With the automatic mode, UXFileUpload will start the upload process as soon as the files are selected.

Single and Multiple Files Selection

UXFileUpload offers two types of file selection mode, Single and Multiple. You can customize this feature through the CanSelectMultiple property.

File Type Filtering and Validation

The file-type filtering feature limit the visible file types when the Open File dialog box shows. It is useful to focus user file selections. You can specify various file types in FileTypeFilter property. Combine with file-type validation enforcement feature to apply the file-type filtering rule to the file upload mechanism.

File Constraints

Adding the file-type filtering feature, UXFileUpload also offers numerous file upload constraints. You can specify the maximum number of files, the total file size, and the maximum size of each file allowed in a single upload session.

Built-in Drag-Drop Support

UXFileUpload is built to take advantage of the files drag feature available in Silverlight 4 and WPF, enabling you to add files drop capability to the file upload with a simple property set. When enabled, users can drag one or more files from Windows Explorer and drop them into the UXFileUpload control. A user-friendly visual indicator will be displayed when valid files are detected. Folders and sub folders drop are also supported with proper permission set.

Cancel Upload Progress

With cancelation feature enabled, users can cancel the upload progress in various ways. For example, abort the entire upload session, abort the currently uploaded file, or abort all pending upload files.

Add Files during Upload Progress

Unlike the other file upload controls, UXFileUpload lets user add new files while the current upload is progressing. This includes add files using drag-drop feature. Taking full advantage of commanding architecture, UXFileUpload delivers reliable and consistent file upload experiences.

Overwrite Existing Files

UXFileUpload supports existing files overwrite out-of-the-box. When an uploaded file already existed in the server, UXFileUpload will mark the particular file upload as fail. To prevent this issue, you can overwrite the existing files by setting the OverwriteExistingFiles property.

Commanding

The UXFileUpload control is built around the commanding semantics which allows certain features of the upload to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development. UXFileUpload includes many predefined UploadCommands that you can use in your application.

Customizable File-type Icons

UXFileUpload also facilitates the default icon customization. Default icon is used when the particular file type doesn’t any representing icon. Additionally, you can also hide the file type icon. For better personalization, you can customize each file type’s icon accordingly through the available property.

Override Localized Resources

UXFileUpload is a rich composite control that contains a large number of textual contents to operate properly, such as: the text on the toolbar button, upload status, and more. By streamlining all text in a single resource file, you can customize it according to your target primary language.

Customizable User Interface and Visual States

In addition to its powerful feature and unique file upload architecture, UXFileUpload enables advanced user interface customization without affecting its core functionality. Taking advantage of commanding, multi binding, visual state, and data template, UXFileUpload employs a loosely-coupled user interface design. This enables you to completely revamp the file upload interface to meet your application’s needs, such as an Outlook-style attachment bar interface, or a simple Gmail upload interface.

Send Custom Headers and Custom Post Data

UXFileUpload provides capability for developers to send custom headers and post data in each upload request, a feature particularly useful when you need to upload application-specific data along with the upload request.

Customizable Buffer Size

UXFileUpload implements smart file chunk logic where multiple files can fit into a single upload request thus minimizing the client-server requests. You can upload very large files without worrying the performance and memory consumption in both client and server. It is not necessary to change the maximum upload request length or other configuration in the server-side to accommodate the large files upload using the UXFileUpload control

Increase Upload Workers

UXFileUpload’s unique feature is the ability to run multiple upload workers simultaneously. In traditional upload control, there is only one upload work in a single upload session. By default, UXFileUpload also runs on a single upload worker, but this can be adjusted accordingly. The recommended setting is from 3 to 5.

Back to top

Numeric Up Down

Commanding

UXNumericUpDown is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Customizable Appearance

UXNumericUpDown supports easy appearance customization through the available properties such as the background, corner radius, border, and more. Control and template editing is also supported for more comprehensive customization.

Back to top

Range Slider Bar

Customizable Appearance

You can set UXRangeSliderBar’s orientation to horizontal or vertical. All elements will be adjusted accordingly. In horizontal mode, the increasing value starts from left to right. In vertical mode, the increasing value starts from bottom to top. Use the IsDirectionReversed property to reverse the increasing value direction. By default, tick bar element is hidden. You can show it and adjust placement, for example, bottom right, top left, both, and none.

Handle Buttons

Handle buttons are the two buttons that user slide to set the desired range of value. You can show or hide the handles using HandlesVisibility property.

Commanding

UXRangeSliderBar is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Rich User Experience Features

Since there are two handles, UXRangeSliderBar prevents user from overlapping both handles to ensure the range value consistency. User can use mouse or keyboard to interact with both handles. The most common approach is to directly click and drag each button using mouse. User can also use the decrease and increase buttons, located on left and right most part of the control. Press SHIFT key along with directional key to move both handles, while maintaining its current value range.

Snap to Tick

Snap to tick behavior will automatically fix the handles to the closest tickbar item. It ensures precise value selection. User can combine it with pressing CTRL key to move a handle without the snap to tick feature.

Move to Point

Move to point is a feature that immediately moves the slider to the exact location as users click on the slider track. You can combine this feature with snap to tick for best possible experience according to your application’s scenarios.

Minimum and Maximum Range Span

The minimum and maximum range span limit the valid value span, preventing user from selecting a range beyond the specified constraints.

Range Drag

The value range defined by both handles is indicated with the blue track. You can move both handles at the same time by dragging the blue track. This feature can be activated through the IsDragRangeEnabled property.

Auto Tooltip

Tooltip is a helpful feature to indicate the current handle value. You can customize its visibility, position, format, and its direction.

Data Validation

As an input control, data validation is crucial to ensure the highest data quality. When the value of UXRangeSliderBar is bound to a data entity, you can throw an exception when the data is invalid.

Back to top

Slider Bar

Customizable Appearance

You can set UXSliderBar’s orientation to horizontal or vertical. All elements will be adjusted accordingly. In horizontal mode, the increasing value starts from left to right. In vertical mode, the increasing value starts from bottom to top. Use the IsDirectionReversed property to reverse the increasing value direction. By default, tick bar element is hidden. You can show it and adjust placement, for example, bottom right, top left, both, and none.

Handle Button and Value Range Track

Handle button is the one you interact with, either using keyboard or mouse click. Value range is the blue color track, indicating the value range. Both fundamental UXSliderBar’s elements can be disabled with properties set.

Commanding

UXSliderBar is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Rich User Experience Features

User can use mouse or keyboard to interact with both handles. The most common approach is to directly click and drag each button using mouse. User can also use the decrease and increase buttons, located on left and right most part of the control. Using keyboard stroke to move both handles is also possible.

Snap to Tick

Snap to tick behavior will automatically fix the handles to the closest tickbar item. It ensures precise value selection. User can combine it with pressing CTRL to move a handle without the snap to tick feature.

Move to Point

Move to point is a feature that immediately moves the slider thumb to the exact location as you click on the slider track. You can combine this feature with snap to tick for best possible experience according to your application’s scenarios.

Auto Tooltip

Tooltip is a helpful feature to indicate the current handle value. You can customize its visibility, position, format, and its direction.

Data Validation

As an input control, data validation is crucial to ensure the highest data quality. When the value of UXSliderBar is bound to a data entity, you can throw an exception when the data is invalid.

Back to top

Rating

Rating Selection

UXRating is the industry’s first rating control to introduce two selection modes. Continuous mode is like any other rating controls which fill the stars based on the selected values, while Single mode only fills the selected star.

Rating Precision

Fine-tune your rating result with various precision modes. In Full mode, as soon as the mouse cursor enters a star region, it fills the entire star directly. In half mode, it is possible to half fill the star according to the mouse position. In Precision mode, the star filling works according to your mouse cursor position. If your mouse is 1/8 of the star object, then only 1/8 of the star is filled.

Customizable Orientation

You can set UXRating’s orientation to horizontal or vertical. All elements will be adjusted accordingly. In horizontal mode, the increasing value starts from left to right. In vertical mode, the increasing value starts from bottom to top. Use the IsDirectionReversed property to reverse the increasing value direction.

Tooltip

Tooltip is a helpful feature to indicate the current handle value. You can create your custom toolting by specifying the tooltip service through XAML markup declaration.

Commanding

UXRating is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

Customizable Appearance

UXRating supports easy appearance customization through the available properties such as the background, corner radius, border, and more. Control and template editing is also supported for more comprehensive customization.

Back to top

Button Spinner

Unique Content Control

With two repeat buttons for value increment and decrement, UXButtonSpinner can host any types of content, such as a string, an image, or even a panel. This enables user to spin the value using the two repeat buttons. Additionally arrow up and down keys on the keyboard can be use to spin the value.

Customizable Appearance

UXButtonSpinner supports easy appearance customization through the available properties such as the background, corner radius, border, and more. Control and template editing is also supported for more comprehensive customization.

Back to top

Close window
back back back forwardforwardforward