How to use Date Picker in Xceed PropertyGrid?

Question

We are using Extended WPF Toolkit in order to implement PropertyGrid .

The default date picking control does not seem to be the WPF DatePicker , but instead a custom control, if I'm not mistaken.

Usually, we are using DatePicker controls in order to select dates. Is it possible to use them, too, for the PropertyGrid control? We need this in order to provide a consistent date format of dd.MM.yyyy and since this property is a date, time should also not be displayed.

Can this be done using Xceed Property Grid?

[Category("General")]
[DisplayName("Date")]
[PropertyOrder(2)]
public DateTime? Date { get; set; }

Answer 1

What you ask for is not so difficult to achive: Xceed PropertyGrid is high customizable and a property editor can be customized by using the ITypeEditor interface and the Editor attribute.

First of all we need to define a custom editor control:

public class DateTimePickerEditor : DateTimePicker, ITypeEditor
{
    public DateTimePickerEditor()
    {
        Format = DateTimeFormat.Custom;
        FormatString = "dd.MM.yyyy";

        TimePickerVisibility = System.Windows.Visibility.Collapsed;
        ShowButtonSpinner = false;
        AutoCloseCalendar = true;
    }

    public FrameworkElement ResolveEditor(PropertyItem propertyItem)
    {
        Binding binding = new Binding("Value");
        binding.Source = propertyItem;
        binding.Mode = propertyItem.IsReadOnly ? BindingMode.OneWay : BindingMode.TwoWay;

        BindingOperations.SetBinding(this, ValueProperty, binding);
        return this;
    }
}

All the stuff in the constructor are made for obtaining a specific behavior (ie no time controls, a specific date format and so on).

Now we need to set the DateTimePickerEditor as the default editor for the object property (that in our sample is called "Date"):

[Category("General")]
[DisplayName("Date")]
[PropertyOrder(2)]
[Editor(typeof(DateTimePickerEditor), typeof(DateTimePicker))]
public Nullable<DateTime> Date

I hope it helps.

Answer 2

You could also use an XAML only solution using editor templates shown at "Custom Editors with DataTemplates":

https://wpftoolkit.codeplex.com/wikipage?title=PropertyGrid&referringTitle=Home

Using this approach you aren't cluttering your model-classes with attributes of external libraries.

Your formatted input of DateTime-types can be achieved via:

<xctk:PropertyGrid>
    <xctk:PropertyGrid.EditorDefinitions>    
        <xctk:EditorTemplateDefinition>
            <xctk:EditorTemplateDefinition.TargetProperties>
                <xctk:TargetPropertyType Type="{x:Type sys:DateTime}" />
            </xctk:EditorTemplateDefinition.TargetProperties>
            <xctk:EditorTemplateDefinition.EditingTemplate>
                <DataTemplate>
                    <xctk:DateTimePicker Value="{Binding Value}" Format="ShortDate" />
                </DataTemplate>
            </xctk:EditorTemplateDefinition.EditingTemplate>
       </xctk:EditorTemplateDefinition>
   </xctk:PropertyGrid.EditorDefitions>
</xctk:PropertyGrid>

With namespace sys defined xmlns:sys="clr-namespace:System;assembly=mscorlib"