Keyboard Navigation support in WPF PropertyGrid

18 Nov 20187 minutes to read

In this section, we will see the available keyboard shortcuts and how to override the default navigation in the WPF PropertyGrid control.

Keyboard Navigation between property items

The following table explains how navigation is performed between properties,

S.No	Key	Description
1	Up	Selection will be moved from the current property to the previous property.
2	Down	Selection will be moved from the current property to the next property.
3	Home	Selection will be moved from the current property to the first property of the WPF PropertyGrid.
4	End	Selection will be moved from the current property to the last property of the WPF PropertyGrid.
5	Left	Selection will be moved from the current property to the previous property. When the property EnableGrouping is 'true' and the Header of the Category group is selected and the group is expanded, then the Category group will be collapsed, and the collapsed category group header remains selected.
6	Right	Selection will be moved from the current property to the next property. When the property EnableGrouping is true and the Header of the Category group is selected and the group is not expanded, then the Category group will be expanded, and the expanded category group header remains selected.
7	Tab	Selecting the first item when no item is chosen and moving out of the WPF PropertyGrid on subsequent Tab key presses when the focus is already within.
8	Shift + Tab	Selecting the last item when no selection exists, while subsequent Shift + Tab presses moves the focus out of the WPF PropertyGrid when the focus is within.
9	Esc	If the property’s value field is focused, then the focus will be moved to the property’s name field.

Handling focus of the editors

By default, the PropertyGrid will handle the keyboard navigation, so pressing the Up and Down keys will move the focus to the next or previous editor from the current editor. For all built-in editors, moving focus to the next editor will be handled by the PropertyGrid. For custom editors, property navigation (focus) will not happen if the custom editor handles the up or down key. To override keyboard navigation for custom editors, override the ShouldPropertyGridTryToHandleKeyDown method from BaseTypeEditor.

For example, if you use the ComboBox as a custom editor, the up and down keys will be handled by it, so property navigation will not happen. You can override ShouldPropertyGridTryToHandleKeyDown and return true to allow the WPF PropertyGrid control to handle the key down events. When it returns false, the editor will handle the key down event.

C#

//Custom combobox editor
public class ComboBoxEditor : BaseTypeEditor {
    ComboBox enumCombo;
    public override void Attach(PropertyViewItem property, PropertyItem info) {
        var binding = base.CreatePropertyInfoBinding(info, enumCombo);
        BindingOperations.SetBinding(enumCombo, ComboBox.SelectedItemProperty, binding);
    }

    public override object Create(PropertyInfo PropertyInfo) {
        return this.CreateEditor(PropertyInfo.PropertyType);
    }

    public override object Create(PropertyDescriptor PropertyDescriptor) {
        return this.CreateEditor(PropertyDescriptor.PropertyType);
    }

    public override void Detach(PropertyViewItem property) {
        if (enumCombo != null) {
            BindingOperations.ClearAllBindings(enumCombo);
            BindingOperations.ClearBinding(enumCombo, ComboBox.SelectedItemProperty);
        }
        enumCombo.ItemsSource = null;
        enumCombo.Items.Clear();
        enumCombo = null;
    }

    public override bool ShouldPropertyGridTryToHandleKeyDown(Key key) {
        if (key == Key.Up || key == Key.Down) {
            return false;
        }

        return true;
    }

    /// <summary>
    /// Creates and initializes a new instance of the ComboBox editor.
    /// </summary>
    /// <param name="propertyType">The property type</param>
    /// <returns>The EnumComboEditor</returns>
    private ComboBox CreateEditor(Type propertyType)
    {
        enumCombo = new ComboBox() {
            ItemsSource = EnumHelper.GetValues(propertyType),
            BorderThickness = new Thickness(0)
        };
        return enumCombo;
    }
}

C#

//Person.cs
[Editor("Gender", typeof(ComboBoxEditor))]
public class Person {
    public Person() {
        FirstName = "Carl";
        LastName = "Johnson";
        Age = 30;
        Mobile = 91983467382;
        Email = "[email protected]";
        ID = "0005A";
        DOB = new DateTime(1987, 10, 16);
        Gender = Gender.Male;
    }
    public Gender Gender { get; set; }
    public string Email { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string ID { get; set; }
    public DateTime DOB { get; set; }
    public long Mobile { get; set; }
    public int Age { get; set; }
}

public enum Gender {
    Male,
    Female
}

XAML

<syncfusion:PropertyGrid DefaultPropertyPath="Age"
                         SelectedPropertyItem="{Binding SelectedPropertyItem, Mode=TwoWay}">
    <syncfusion:PropertyGrid.SelectedObject>
        <local:Person />
    </syncfusion:PropertyGrid.SelectedObject>
</syncfusion:PropertyGrid>

View Sample in GitHub.