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!