Mindscape Blog » Blog Archive » Boosting the WPF Property Grid with WPF Elements

Boosting the WPF Property Grid with WPF Elements

Tagged as WPF, WPF Elements, WPF Property Grid

The WPF Property Grid includes several simple editors to provide an improved user experience when editing values of numeric, date, colour etc. types. WPF Elements, Mindscape’s suite of line of business controls for WPF, offers a set of controls with a similar role but with significantly enhanced capabilities. Here’s a run-down of why you might want to move up from the built-in editors to the WPF Elements controls:

NumericUpDown: WPF Elements provides support for currency formatting, integer-only entry and keyboard-based value adjustments (hiding the up-down buttons).
MaskedTextBox: Improved visual feedback and a more intelligent input filtering mechanism.
DateEditor: Supports times as well as dates, and allows users to edit values directly instead of having to drop down the calendar.

You can use the Elements controls in PropertyEditors or TypeEditors just as you can any other control. For example, here’s how to configure a property to use an integer-only numeric up-down editor:

<DataTemplate x:Key="IntegerEditor">
  <ms:SpinDecorator Change="1" BorderThickness="0">
    <ms:IntegerTextBox Value="{Binding Value}" BorderThickness="0" />
  </ms:SpinDecorator>
</DataTemplate>
 
<!-- ... and in the PropertyGrid.Editors section... -->
<ms:PropertyEditor PropertyName="SomeProperty" EditorTemplate="{StaticResource IntegerEditor}" />

One catch to look out for is that several of the WPF Elements editors allow users to adjust values using the cursor-up and cursor-down keys. By default, the WPF Property Grid interprets cursor-up and cursor-down as moving the selection up or down in the grid, which prevents this WPF Elements feature from working. We’ve added a CursorKeyMode property to the grid to allow you to override this behaviour and let the editors have first crack at the cursor keys. If you set CursorKeyMode=”PassToEditor” on the grid, then the value-adjustment behaviour will be restored. Users can still navigate using the cursor keys, but only when the focus is on the property name rather than inside an editor. CursorKeyMode is available in the nightly builds of the WPF Property Grid: you can download the trial edition from http://www.mindscape.co.nz/Products/WpfPropertyGrid/nightlybuilds.aspx or the retail edition from the store.