This is continuation of my post yesterday about new color selection controls in DotNetBar for WPF.

ColorItemSelector Control

ColorItemSelector is a control that provides list of Office style colors available for selection. It is used by ColorInput control on its drop-down, but you can use it as standalone control too. Here is screenshot of ColorItemSelector control:

ColorItemSelector

ColorItemSelector control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • MoreColorsButtonVisibility – Indicates visibility of “More Colors…” button that opens the color selection dialog.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorComb control

ColorComb control is another color selection tool that displays colors in a comb pattern. Here is screenshot of the ColorComb control:

ColorComb

ColorComb control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorBlender control

ColorBlender is color selection tool that displays color palette and allows selection using mouse. Here is screenshot of the ColorBlender control:

ColorBlender

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.

ColorPickerButton control

ColorPickerButton control is design to be used on Ribbon and combined with ColorItemSelector. ColorPickerButton is contained in Ribbon assembly.

ColorPickerButton WPF Control

This is XAML code that you can use to setup ColorPickerButton:

<dc:ColorPickerButton>
<de:ColorItemSelector SelectedColor="{Binding Path=SelectedColor, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dc:ColorPickerButton}}}" />
</dc:ColorPickerButton>

ColorPickerButton control key properties and events:

  • SelectedColor – Indicates the selected color, may be null if there is no color selected.
  • SelectedColorChanged event, occurs when selected color has changed.
Tagged with:
 

Latest DotNetBar for WPF 5.2 that is coming out really soon includes 5 new color related controls:

  1. ColorInput control which is text-box style control that allows you to type the color in RGB format, for example #FE20DE. It also includes drop-down color picker and a color chooser dialog.
  2. ColorItemSelector, is a color selector with Office style colors that you can use as standalone control, or combine with ColorPickerButton control.
  3. ColorComb control, a comb style color selector.
  4. ColorBlender, a palette style color selector.
  5. ColorPickerButton, a button that can be used on Ribbon and that you combine with ColorItemSelector to select pre-defined color.

ColorInput Control

ColorInput control allows you to enter the color using RGB format or to choose color from drop-down color picker. You can also use built-in color selection dialog to choose the color.

Here is how ColorInput control looks like:

ColorInput1

With drop-down showing Office style colors:

ColorInput2

ColorInput control key properties and events:

  • Value – indicates the selected color value. It may be null if there is no color selected.
  • EditColorAlphaComponent – Indicates whether control shows alpha transparency component in edit portion of control. Default value is false.
  • ShowDropDown – Indicates whether drop-down button on the right-hand side of control is shown.
  • ShowCheckBox – Indicates whether check-box is shown which allows end-user to make control read-only.
  • WatermarkText – Indicates the watermark text to be displayed in control when there is no value.
  • WatermarkAlignment – Indicates the watermark text alignment within the control.
  • WatermarkBehavior – Indicates whether watermark text is hidden when control gets input focus or when it has valid value.
  • WatermarkBrush – Indicates the brush used to render watermark text.
  • WatermarkEnabled – Indicates whether watermark is enabled.
  • MoreColorsButtonVisibility – Indicates whether drop-down color picker displays the “More Colors…” button.
  • ValueChanged bubbling event – Occurs when Value property changes.

Ribbon Styling

ColorInput control provides built-in style to blend into the Ribbon. Simply assign following Style to the ColorInput control:

<de:ColorInput Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=de:ColorInput, ResourceId=Ribbon}}"

Localization of system strings

One of the most common tasks when working with input controls is the localization or customization of system strings used by the control. All system strings that color input controls are using are defined as string resources and you can customize them as such easily by providing your own string resource. The string resource key ID’s are all available as static members of StringKeys class. Here is how to define custom string resources:

1.  Define namespace so you can use string type:

 <Window x:Class="Editors.Window1"
 xmlns:s="clr-namespace:System;assembly=mscorlib"

2.  Define custom string resources as such:

 <Window.Resources>
 <s:String x:Key="{ComponentResourceKey {x:Type de:StringKeys}, {x:Static de:StringKeys.MoreColorsButton}}">More Colors Custom</s:String>
 </Window.Resources>

That’s it. Note that you can define these resources in XAML by creating resource dictionary and then merging this to the application resources so customizations are application wide. You can also define them per control as well.

Customizing Colors On Drop-Down

To customize colors displayed on drop-down part of the ColorInput control, you need to define new style for ColorItemSelector control that is used by ColorInput control. Click here to download the XAML file which has sample style that you can re-use and modify to suite your needs.

Tomorrow, rest of the controls…

Tagged with:
 

I know you want to make your application better and easier to use. But short of complete redesign what do you do? Even if you are starting now what do you do?

Making software that is easy to use is as much art as it is science in my opinion, so every single tip that I can find that I can use immediately is immensely useful.

Here are two things you can apply to your apps now to make them better, and they come from Brandon Walkin’s Managing UI Complexity post. I encourage you to read his whole post since it is very insightful.

1. Alignment and Visual Hierarchy

Aligning elements in a user interface to a simple, consistent grid, will go great lengths in reducing the appearance of complexity. The use of strict alignment and a thoughtfully laid out grid can turn an interface from chaotic and overwhelming to harmonious and appealing.

This is best illustrated by following screenshot that compares Microsoft Expression Blend and Adobe Lightroom:

LightroomVsExpressionBlend

Notice how vertical lines show UI complexity caused by alignment. This is something you can act upon now. Take a screenshot of your dialogs, fire up Paint or Photoshop and draw alignment lines as shown in image above. If you end up with spaghettis, you know you can improve alignment and make your UI better.

2. Visual Noise and Contrast

The amount of visual noise in an interface has a great deal of impact on the perceived complexity of the interface. And contrast plays an important role with respect to visual noise. Using lower contrast UI elements reduces visual noise which will often reduce the effective complexity of the interface, as you’ll see in the next couple of examples.

Here is screenshots that illustrates this point:

AdressBookComparrison

Important to notice is that noise created by borders for each text box control added considerable perceived complexity to the form. If you can simply by removing them and showing them on as needed basis will improve the perceived complexity.

Same applies to contrast. Here is image that also shows contrast difference between Lightroom and Expressions Blend, less contrast, less perceived complexity. Pay attention to difference in text contrast between these two:

Contrast

These are two tips you can use today to improve your UI. Go, do it! Hat-tip to Brandon.

Tagged with:
 

Color Comb Cooking In The Kitchen

Here is work-in-progress screen-shot from some additions being worked on for our DotNetBar for WPF:

Color Comb in DotNetBar for WPF

WPF Color Blend

Yeah, I know, you can guess what it is 🙂

Tagged with:
 

How To Debug WPF Binding

One of the probably most common things you do in WPF is specify Bindings. But how do you debug them?

In WPF 3.5 there is new diagnostics that you can turn on that will output detailed binding messages to the Output window. Immensely helpful when you are trying to debug why your binding does not work.

To set it up first add diagnostics to your namespace:

<Window x:Class=”Tester.Window2″

xmlns:diag=”clr-namespace:System.Diagnostics;assembly=WindowsBase”

Then enable it on per-binding instance as such:

ItemsSource=”{Binding Path=PaneItems, diag:PresentationTraceSources.TraceLevel=High}”

Now when you run your app watch Output window for clues on why binding is failing.

Hope this helps save your sanity while debugging bindings as much as it does mine 🙂

Tagged with:
 

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

© 2009 Denis Basaric: DevComponents Blog