In recent posts, we've shown off some of our new edit box controls for WinRT (Windows Store and Windows Phone apps).  We saw our DateEditBox, which is used for date input.  And then we saw our TimeEditBox, which is used for time input.  We also have a DateTimeEditBox, which can edit a date and time in the same control.  That's what we'll show in today's post.

Windows Store Variant

The DateTimeEditBox control is used to input a DateTime value, and uses a DateTimePicker control in its popup.

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "9/9/14 10am", "09/09/2014 10:00", "2014-09-09 10AM", etc. and press Enter.  Any of those will commit the same date/time value.  You can also move the caret to one of the date/time components (month, day, year, hour, minute, second, AM/PM) and use keyboard arrow keys, PgUp/PgDn, or the mouse wheel to increment values.  Best of all, pressing the left/right arrow keys will instantly jump between the various "parts" (components) of the edit box value and select the part's text.

The date/time value can be displayed in any desired standard or custom format.  By default it will use the current culture's default date/time format.

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  The popup contains a HorizontalListBox at the top that switches between DatePicker and TimePicker controls.  These two pickers allow for easy mouse/touch selection of dates and times.

Compare to Native WinRT DatePicker and TimePicker

Most competitors have either made date and time pickers that show a large Windows Phone-like spinning selectors, or have gone with the multiple ComboBox approach like these native WinRT DatePicker and TimePicker controls do:

Neither of those control types are ideal for WinRT apps that can potentially be run on large desktops with keyboards.  Compare the usability of the above to our single control:

Windows Phone Variant

Just like our other edit boxes, this edit box will render itself like a button when used on Windows Phone.  Tapping the button shows a full screen picker (same as above) where the date value can be selected.

Summary

This post shows how an DateTimeEditBox control can accept date and time input in a single control within a Windows Store or Windows Phone app.  Download our WinRT/XAML Controls to check it out, along with our other beautiful and functional editor controls!

The 2014.4 versions of our WPF, Silverlight, and WinRT/XAML controls have been released and are now available for download.

Major new features are described below.  See the announcement posts for the large detailed list of enhancements and updates, including many items not listed below:

• WPF Controls announcement
• Silverlight Controls announcement
• WinRT/XAML Controls announcement

Note that the 2014.2 version of the WinRT/XAML controls came out last month, introducing our Editors controls, but a new maintenance release is available today adding other new features.

We've added six new built-in chart palette options, including Retro and Sand:

Docking/MDI received numerous updates, including a new option for rafting windows to not hide when in scenario where their owner DockSite is hidden, such as if it's nested in tabs itself.  Many updates to focus handling were made, especially in relation to interop controls like WinForms/ActiveX.

Updated the Country and Currency classes with the latest ISO data.

WinRT/XAML Only

As announced in recent blog posts, our WinRT/XAML controls now have some really unique and universal (Windows Store / Windows Phone) controls for accepting input of common data types.

See our Edit Boxes Overview for a summary of the controls and some links to additional posts describing their functionality.

A new segment chart has been added that allows for visual display of an integer value within a total..

This sort of chart is great for use on dashboards, and also as an indicator of steps or progress achieved.

Another new control is the arrow indicator displayed on the left side of the stock chart below.  It's called a trend indicator and alters its UI to reflect whether a numeric value is greater than, the same as, or less than an origin value.

Six new built-in chart palettes have been added as well, including IceCream and Melon.

We've created a new custom property editor sample that shows how to easily add a custom property editor for a certain Type. 

Double-clicking a property name has been improved such that if the property doesn't support standard values, it will attempt to focus the related editor instead and select all text.

Quote auto-completion support has been added to the DelimiterAutoCompleter class, with double quote completion enabled by default.  As the user types a start quote, the related end quote will be auto-entered after the caret.  The C#, VB, Python, JavaScript, and JSON languages in our premium add-ons have been updated to support quote auto-completion.  It can easily be added to any custom languages as well.

We've added some nice new features like a ScrollIntoView method that can ensure that a text position is visible within the view, improved caret/selection movement around and delete/backspace of multi-byte characters, and improved backspace to move to the previous tab stop when auto-convert tabs to spaces is active and the caret is before the first non-whitespace character on the line.

.NET Languages Add-on

We've had a lot of requests for showing how to support ASP-style server tags, where the C# within the tags has automated IntelliPrompt.

We're happy to deliver a new full source sample (seen above) that shows how to harness our .NET Languages Add-on within server tags.

Python Language Add-on

Today's releases contain the first version of our Python Language Add-on, a new premium add-on that supports both v2.x and v3.x syntax.

We'll blog about the language in more detail soon, but you can download and start using it today.

A new triangle shape can be used in UI such as breadcrumbs, tabs, etc. 

This shape can auto-size to its container and supports strokes and fills.

WPF Only

We've added a ZoomLevelToTextFormattingModeConverter class, which can switch from Display to Ideal text formatting mode when the zoom level is increased, thereby keeping text clear in any scenario.

In the recent posts, we have seen color, enumeration, and date edit boxes, which are all part of the new WinRT/XAML Editors product.  In today's post, we'll take a look at the TimeEditBox controls, which make it easy to select a time value.

Windows Store Variant

The TimeEditBox control is used to input a DateTime value, and uses a TimePicker control in its popup.

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "10am", "10:00", "10:00 AM", etc. and press Enter.  Any of those will commit the same time value.  You can also move the caret to one of the time components (hour, minute, second, AM/PM) and use keyboard arrow keys, PgUp/PgDn, or the mouse wheel to increment values.  Best of all, pressing the left/right arrow keys will instantly jump between the various "parts" (components) of the edit box value and select the part's text.

The time value can be displayed in any desired standard or custom format.  By default it will use the current culture's default time format.

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  The popup contains a TimePicker control, which uses an analog clock-like user interface.  It is comprised of two radial sliders.  The inner slider alters the hour (spin clockwise one cycle to get to PM hours) and the outer slider alters the minute. 

Compare to Native WinRT TimePicker

As shown in the previous post related to date editing, most competitors have either made date/time pickers that show a large Windows Phone-like spinning selector, or have gone with the multiple ComboBox approach like the native WinRT TimePicker control does:

Neither of those control types are ideal for WinRT apps that can potentially be run on large desktops with keyboards.  Compare the design to ours:

Not only does our TimeEditBox use less overall space and reduce UI clutter, it is also super efficient when combined with a keyboard.

Windows Phone Variant

Just like our other edit boxes, this edit box will render itself like a button when used on Windows Phone.  Tapping the button shows a full screen picker (same as above) where the date value can be selected.

Summary

This post shows how an TimeEditBox control can make it simple for an end user to select a time value within a Windows Store or Windows Phone app.  Download our WinRT/XAML Controls to check it out, along with our other beautiful and functional editor controls!

In the last post of this series, we introduced the ColorEditBox control, which is part of the new WinRT/XAML Editors product.  In today's post, we'll take a look at the EnumEditBox control, which makes it easy to select enumeration values.

Windows Store Variant

The EnumEditBox control is used to input an Enum value, and uses an EnumPicker control in its popup.

The screenshot above shows off how the popup renders a flags-based enumeration, where multiple selections can be made.  For non-flags enumerations, the popup looks more like a standard single-selection list:

It's very easy to get going with the control.  Simply set the enumeration type and bind a value and it takes care of the rest for you.

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "Three" and press Enter.  The value will get committed.  You can also use keyboard arrow keys, PgUp/PgDn, or the mouse wheel to increment values.

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  The picker on the popup uses large items, making for easy mouse/touch selection.

Anther great feature of the control is the ability to use DisplayAttribute attributes on the enumeration values to specify alternate display text for each enum value.  Custom value sorting algorithms can be set as well.

Windows Phone Variant

Just like our other edit boxes, this edit box will render itself like a button when used on Windows Phone.  Tapping the button shows a full screen picker (same as above) where the enum values can be selected.

Summary

This post shows how an EnumEditBox control can make it simple for an end user to select an enumeration value within a Windows Store or Windows Phone app.  Download our WinRT/XAML Controls to check it out, along with our other beautiful and functional editor controls!

In the last post, we gave an overview of the new edit box controls that were just released in our WinRT/XAML Editors product, including a list of some options that are available in all edit boxes.  In today's post, we're going to take a look at a universal edit box control that is used to select a color value.

Windows Store Variant

The ColorEditBox control is used to input a Color value, and uses a ColorPicker control in its popup.

The alpha component of the color can optionally be included.  When the alpha component is not enabled, an opaque color is required and only RGB edit boxes appear on the popup, instead of ARGB.

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "Red", "#f00", or "#ff0000" and press Enter.  Any of those will commit a red color value.  You can also move the caret to one of the ARGB components and use keyboard arrow keys, PgUp/PgDn, or the mouse wheel to increment values.

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  Just drag the sliders to select a different color.  Or edit the ARGB component values directly to set exact values.

Windows Phone Variant

All of our WinRT/XAML controls are universal and support both Windows Store and Windows Phone apps.  In the case of edit boxes, they often have a different UI that has been tailored specifically for Windows Phone.

Above we see how a ColorEditBox renders on a phone.  Since phones don't have hardware keyboards, the control has been crafted to look like a native ComboBox, although we also support an optional clear button.  Then rest of the control behaves like a button.  When the button is tapped, this full screen dialog is displayed:

Everything on the picker popup displayed here is big and touch friendly… a perfect design for color selection on Windows Phone.

Summary

This post shows how a ColorEditBox control can make it simple for an end user to select a color within a Windows Store or Windows Phone app.  Download our WinRT/XAML Controls to check it out, along with our other beautiful and functional editor controls!