The Actipro Blog

All the latest UI control development news from Actipro

WinRT XAML Controls 2015.1 Build 164 Released

BlogPostBannerWinRT.2015.1.0164

The final 2015.1 version's maintenance release of our WinRT XAML controls has been released and is now available for download.  This build remains on the 2015.1 version since beginning in the 2016.1 version, our new Universal Windows controls set that targets Windows 10 replaces the older WinRT XAML controls.

This version contains several updates to SyntaxEditor and its add-ons.  See the announcement post for details.

 TaskDownload TaskBuyNow

Filed under: Actipro, New features, WinRT, XAML

Editors for WinRT - DateTimeEditBox

PostBannerWinRTControlsDevNotes

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.

DateTimeEditBoxOpened

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:

NativeDatePicker

TimePicker

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:

DateTimeEditBoxClosed

Not only does our DateTimeEditBox use less overall space and reduce UI clutter, it is super efficient when combined with a keyboard, and uses less overall mouse/touch taps for date selection when compared to the native DatePicker and TimePicker.

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!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

Editors for WinRT - TimeEditBox

PostBannerWinRTControlsDevNotes

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.

TimeEditBoxOpened

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:

TimePicker

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:

TimeEditBoxClosed

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!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

Editors for WinRT - DateEditBox and MonthCalendar

PostBannerWinRTControlsDevNotes

In the last post of this series, we introduced the EnumEditBox control, which is part of the new WinRT/XAML Editors product.  In today's post, we'll take a look at the DateEditBox and MonthCalendar controls, which make it easy to select date values.

Windows Store Variant

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

DateEditBoxOpened

Edit boxes work great with a keyboard.  When the edit box is focused, values can be directly typed in.  Type in "8/7", "8/7/14", "8/7/2014", etc. and press Enter.  Any of those will commit the same date value.  You can also move the caret to one of the date components (month, day, year) 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.

DateEditBoxFocused

In this screen, the caret was on the month part and then the right arrow was pressed.  The day part was auto-selected.  A new day value could then be typed in.

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

If the user doesn't have a keyboard, mouse or touch can be used to display the popup.  The popup contains a DatePicker control, which defaults to wrapping a MonthCalendar control.  The MonthCalendar control displays a single-month at a time.  The arrows in the header can be used to navigate backward and forward with appealing animated transitions. 

Pressing the title in the header will zoom out to the year.  Pressing it again zooms out to the decade, and then century.  Here's the views:

MonthCalendarViews

Compare to Native WinRT DatePicker

Most competitors have either made date pickers that show a large Windows Phone-like spinning date selector, or have gone with the three ComboBox approach like the native WinRT DatePicker control does:

NativeDatePicker

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:

DateEditBoxClosed

Not only does our DateEditBox use less overall space and reduce UI clutter, it is super efficient when combined with a keyboard, and uses less overall mouse/touch taps for date selection when compared to the native DatePicker.

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 DateEditBox control can make it simple for an end user to select a date 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!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

Editors for WinRT - EnumEditBox

PostBannerWinRTControlsDevNotes

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.

EnumEditBoxOpened

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:

EnumListBoxNonFlags

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!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

Editors for WinRT - ColorEditBox

PostBannerWinRTControlsDevNotes

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.

ColorEditBoxWindows

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.

ColorEditBoxPhoneClosed

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:

ColorEditBoxPhoneOpened

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!

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

Editors for WinRT - Edit Boxes Overview

PostBannerWinRTControlsDevNotes

In today's post, I'd like to give an overview of how edit boxes in our new WinRT/XAML Editors product work, and why we created them.

What Are Edit Boxes?

Edit boxes are controls that allow for the editing/selection of common data type values. Unlike many other third party editor controls, the Actipro Editors have been specifically designed to work great for whichever form of input (keyboard, mouse, or touch) is utilized by the end user.

DateEditBoxFocused

They are designed to visually fit right in with the standard Windows Store and Windows Phone controls.  Each editor's main appearance is similar to a standard TextBox, where the value can be typed in via a keyboard for maximum efficiency. Certain keyboard keys and the mouse wheel can often be used to increment/cycle values.  Custom validation and conversion logic between text and real object values can even be injected.

Most editors also contain a default popup picker that is geared for mouse and touch-based input. The popup can easily be invoked by tapping the edit box's drop-down button.

DateEditBoxOpened

Controls List

ColorEditBoxClosed

ColorEditBox - Allows for the input of a Color value.

CornerRadiusEditBoxClosed

CornerRadiusEditBox - Allows for the input of a CornerRadius (top-left, top-right, bottom-right, bottom-left) value.

DateEditBoxClosed

DateEditBox - Allows for the input of a DateTime value's date component.

DateTimeEditBoxClosed

DateTimeEditBox - Allows for the input of a DateTime value.

DoubleEditBoxClosed

DoubleEditBox - Allows for the input of a Double (floating-point number) value.

EnumEditBoxClosed

EnumEditBox - Allows for the input of a Enum (flags and non-flags enumeration) value.

GuidEditBox

GuidEditBox - Allows for the input of a Guid (unique ID) value.

Int32EditBoxClosed

Int32EditBox - Allows for the input of an Int32 (integer) value.

PointEditBoxClosed

PointEditBox - Allows for the input of a Point (X, Y) value.

RectEditBoxClosed

RectEditBox - Allows for the input of a Rect (X, Y, width, height) value.

SizeEditBoxClosed

SizeEditBox - Allows for the input of a Size (width, height) value.

ThicknessEditBoxClosed

ThicknessEditBox - Allows for the input of a Thickness (left, top, right, bottom) value.

TimeEditBoxClosed

TimeEditBox - Allows for the input of a DateTime value's time component.

Options Galore

Edit boxes all support nullable values, meaning that a DateEditBox for example returns a value of Nullable<DateTime>.  An option can be set to require that a non-null value is set.

The editors can be set to provide read-only display of data.  When not read-only and if nulls are allowed, a clear button appears when the control has focus.

The popups for the edit boxes can be fully customized.  Each editor also supports placeholder text and optional header content.

Summary

This is just an introduction to what the edit boxes can do.  In our next series of posts, we'll take a look at each edit box control and its related popup picker in detail.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, New product, WinRT, XAML

WinRT/XAML Controls v2014.2 Released

BlogPostBannerWinRT142

The 2014.2 version of our WinRT/XAML controls have been released and are now available for download.

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

ProductHeadingMisc

This version makes all the WinRT/XAML controls compatible with Windows Phone, meaning that licensed controls will work in both Windows Store and Windows Phone apps!

PhoneSampleBrowser

We've even added a nice phone-based Sample Browser app to show off usage of the controls on the phone.

ProductHeadingGenericEditors

Actipro Editors is a brand new product that we've been working on for quite a while now and provides over 30 user input controls for common .NET data types such as dates, times, numbers, colors, enumerations, sizes, and many more.

ColorEditBoxNoAlpha

Each of the controls features unique designs that have been specifically crafted to support input by keyboard, mouse, and touch. Data entry is quick and efficient regardless of the input method utilized by the end user, which is especially ideal for universal applications.

All of the controls fully support Windows Store and Windows Phone apps, with alternate appearances as appropriate for phone usage.

We will be blogging and walking through all of the controls in the next couple weeks so keep an eye on our blog.

ProductHeadingGenericMicroCharts

We've added a new MicroSegmentChart control for use on dashboards, infographics, or as progress indicators.

SegmentChartType

More details on this control soon too.

ProductHeadingGenericSyntaxEditor

Along with various minor enhancements and updates, we have added a brand new premium Python Language Add-on that supports advanced editing for Python v3.x and v2.x.  This first release includes parsing, syntax error reporting, code outlining, smart indent, delimiter highlighting/completion, and more.

CodeOutlining

Look for another update soon featuring automated IntelliPrompt!  See this previous blog post for more details on the new add-on.

ProductHeadingGenericShared

Several other fun new controls and converters are included with this version too.

  • Added the TransitioningContentPresenter control, which uses animated fade, slide, push, and zoom transitions when new content is set.
  • Added the ContentTransitionPreview control, which demonstrates a content transition by continuously cycling two content items.
  • Added the ParallaxConverter that can be used to create a parallax background scrolling effect.
  • Added the BooleanNotConverter that can invert boolean values.

TaskDownload TaskLiveDemo TaskBuyNow

RadialSlider Control

20141ProductNotesBlogPostBanner

The 2014.1 versions of our WPF, Silverlight, and WinRT/XAML controls were released last week and all contain several handy components in them, such as the RingSlice control we talked about several days ago.

In today's post, I'd like to show off the new RadialSlider control.

What is RadialSlider?

The RadialSlider control allows for quick selection of a degree value, which can easily be converted to some form of scalar value.  The control uses an embedded CircularThumb control, but is otherwise transparent.  It is meant to be used in conjunction with the RingSlice control and have that control render the slider's value UI.

RadialSliderBounds   RadialSliderCorner

Radial sliders function just like normal linear sliders however instead of moving the slider thumb in a straight line, the thumb can move in a circular fashion around the slider's center point.  This sort of UI allows for additional precision when compared to linear sliders, especially with touch interaction.

RadialSliderSegmented   RadialSliderWarningLevel

RadialSlider supports minimum/maximum ranges, infinite wrapping mode, customizable thumb styles, and more. 

RadialSliderRange   RadialSliderCustomStyle

Combine two RadialSlider controls on top of each other to enable range-based selection.

Real World Usage Scenario

RadialSlider and RingSlice controls can be used to create radial input controls such as in this sample (included in our download), which mimics a countdown timer in the Windows Alarms app:

RadialSlider

The sample above is a composite of two RadialSliders (for which you can see the thumbs that set minutes and seconds values), three RingSlices of various purple shades (that indicate the hours, minutes, and seconds values), and three RingSlices of various gray shades (that form the background "tracks").

The end user simply grabs the thumbs, either via touch or mouse, and drags in a circular fashion to alter the values.  The RingSlice controls that render the current values track with the dragged thumb.

Summary

The RadialSlider control is available in our WPF, Silverlight, and WinRT/XAML Shared Libraries and is licensed for use by any of our customers of those control platforms.  Download v2014.1 and check it out!

TaskDownload TaskLiveDemo TaskBuyNow

Filed under: Actipro, WPF, Silverlight, WinRT, XAML

RingSlice Control

20141ProductNotesBlogPostBanner

The 2014.1 versions of our WPF, Silverlight, and WinRT/XAML controls were released last week and all contain several handy components in them.  One that I'd like to talk in more detail about today is the RingSlice control.

What is RingSlice?

The RingSlice control renders a portion (or the entire circle) of a ring shape.  Its start/end angles, radius, thickness, and other stroke properties can be set.

RingSliceFullRing   RingSliceEndCaps

In the screenshots above, we see a RingSlice rendering a full ring and another showing how end caps can be customized.

RingSliceDash1   RingSliceDash2   RingSliceDash3   RingSliceDash4

In the screenshots above, we see how the same RingSlice control can have different stroke settings applied to it to provide dash effects.

Real World Usage Scenarios

Other very interesting composite controls can be created by using the RingSlice control together with other controls.

RingSliceProgress

The screenshot above shows how four RingSlice controls are used to surround a TextBlock and make a segmented progress indicator.  The fill of each RingSlice can be changed as progress occurs, so that the current step is reflected.

RingSliceGraph

Finally, this screenshot shows the radial graph of a numeric value.  Simply animate the end angle of the RingSlice to create a dynamic presentation of the data.

Summary

The RingSlice control is available in our WPF, Silverlight, and WinRT/XAML Shared Libraries and is licensed for use by any of our customers of those control platforms.  Download v2014.1 and check it out!

TaskDownload TaskLiveDemo TaskBuyNow

Filed under: Actipro, WPF, Silverlight, WinRT, XAML