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; }

Sorry I can't understand: do you want to use both the `DatePicker` **and** the custom default control, or just the `DatePicker` (instead of the custom default control)? — Il Vic, Sep 09 '16 at 15:51
I'm not exactly sure how the control is implemented. But in the end, what I need is the date field of the `PropertyGrid` to be date without time and `dd.MM.yyyy` as format. Just like the DatePicker control is. If Xceed uses a custom control is secondary as long as it's the right format. — bytecode77, Sep 09 '16 at 15:54

score 2 · Accepted Answer · answered Sep 09 '16 at 16:08

2

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 (i.e. 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.

answered Sep 09 '16 at 16:08

Il Vic

5,576
4
26
37

Thanks for your reply, Vic. I will try this out when I'm back at work on Monday :) – bytecode77 Sep 09 '16 at 16:09
What if we don't have access to the property? is there a way to dynamically assign the editor to a given property instead? – brianestey Mar 28 '17 at 03:17
In this case @brianestey you can consider using [EditorTemplateDefinition](https://xceed.com/wp-content/documentation/xceed-toolkit-plus-for-wpf/Xceed.Wpf.Toolkit~Xceed.Wpf.Toolkit.PropertyGrid.EditorTemplateDefinition.html). You can find some samples [here](http://wpftoolkit.codeplex.com/wikipage?title=PropertyGrid) – Il Vic Mar 28 '17 at 08:45
This results in a bug for me, the date picker falls back to default after a date selection is made. This happens because I set the date twice in the dates property setter, causing property changed to be fired twice. I do not get this without your code or if I do not set the date twice. I have a way round this, but surely it should be able to handle multiple property changed events in quick succession. – D.Hunt Jun 13 '19 at 11:27
It is hard to understand your bug @D.Hunt just with a comment. Maybe you can ask a new question. It depends on your issue. – Il Vic Jun 14 '19 at 16:14

Lakedaimon · Answer 2 · 2017-06-14T12:18:09.660

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"

This doesn't work with DateTime? (ie. nullable DateTime) – brianestey Mar 28 '17 at 03:18 — brianestey, Mar 28 '17 at 03:18

How to use Date Picker in Xceed PropertyGrid?

2 Answers2