WPF – Acodemics

Property grids are great for quickly giving users an interface for interacting with objects in WPF but customising them is not obvious. Luckily it is possible by extending the UIEditor class to launch custom GUI controls.

In this example I wanted to customise the default DateTime handler of PropertyGrid to include hours, minutes and seconds as unfortunately it only shows the date by default. The following class shows how to extend UIEditor in order to launch a pop-up DateTimePicker when the user selects the item.

using System;
using System.ComponentModel;
using System.Drawing.Design;
using System.Windows.Forms;
using System.Windows.Forms.Design;

namespace Util
{
    public class DateTimePickerEditor : UITypeEditor
    {

        IWindowsFormsEditorService editorService;
        DateTimePicker picker = new DateTimePicker();

        public DateTimePickerEditor()
        {
            picker.Format = DateTimePickerFormat.Custom;
            picker.CustomFormat = "dd/MM/yyyy HH:mm:ss";
        }

        public override UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context)
        {
            return UITypeEditorEditStyle.DropDown;
        }

        public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)
        {
            if (provider != null)
            {
                this.editorService = provider.GetService(typeof(IWindowsFormsEditorService)) as IWindowsFormsEditorService;
            }

            if (this.editorService != null)
            {
                picker.Value = value;
                this.editorService.DropDownControl(picker);
                value = picker.Value;
            }

            return value;
        }
    }
}

using System;

using System.ComponentModel;

using System.Drawing.Design;

using System.Windows.Forms;

using System.Windows.Forms.Design;

namespace Util

{

public class DateTimePickerEditor : UITypeEditor

{

IWindowsFormsEditorService editorService;

DateTimePicker picker = new DateTimePicker();

public DateTimePickerEditor()

{

picker.Format = DateTimePickerFormat.Custom;

picker.CustomFormat = "dd/MM/yyyy HH:mm:ss";

}

public override UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context)

{

return UITypeEditorEditStyle.DropDown;

}

public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)

{

if (provider != null)

{

this.editorService = provider.GetService(typeof(IWindowsFormsEditorService)) as IWindowsFormsEditorService;

}

if (this.editorService != null)

{

picker.Value = value;

this.editorService.DropDownControl(picker);

value = picker.Value;

}

return value;

}

Then in order to add that to your property grid, add the following to the DateTime item in the class used by the PropertyGrid –

[DisplayName("Start Time"), EditorAttribute(typeof(DateTimePickerEditor), typeof(UITypeEditor))]
public DateTime StartTime
{
    get { return startTime; }
    set { startTime = value; }
}

[DisplayName("Start Time"), EditorAttribute(typeof(DateTimePickerEditor), typeof(UITypeEditor))]

public DateTime StartTime

{

get { return startTime; }

set { startTime = value; }

}

The key part here is the EditorAttribute.

Update

Here’s a great article explaining custom UITypeEditors in more detail – http://bobpowell.net/TypeEditors.aspx

Categories

Meta

TagWPF

C# DateTimePicker in PropertyGrid

Recent Comments