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.

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.

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.

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.

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.

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.

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.