A custom XAF PropertyEditor example based on the WinForms TimeSpanEdit component

As you know, XAF is very flexible and provides many ways of integrating custom controls for various scenarios; e.g., where something is not covered by the default controls pack: Concepts > UI Construction > Using a Custom Control that is not Integrated by Default

As far as our framework development flow is concerned, it is absolutely natural to perform this sort of customizations, and this extensibility was baked in from the very beginning for XAF users. For instance, there is a built-in WinForms TimeSpanPropertyEditor class for representing and editing System.TimeSpan type properties in the standard delivery:

        public TimeSpan TimeSpanProperty {

            get { return GetPropertyValue<TimeSpan>("TimeSpanProperty"); }

            set { SetPropertyValue<TimeSpan>("TimeSpanProperty", value); }

        }

Technically, our TimeSpanPropertyEditor just wraps a TextEdit descendant from the XtraEditors Library and provides a custom mask for it. One may want to use another visual control for the same task (e.g., the TimeSpanEdit control from the same XtraEdititors library) and that is quite easy to implement in XAF. You can implement a custom PropertyEditor as per  Concepts > UI Construction > View Items > Implement Custom Property Editors

Since the TimeSpanEdit is derived from the DevExpress.XtraEditors.BaseEdit class, you can derive your custom PropertyEditor class from the DXPropertyEditor and follow a simplified approach from the Task-Based Help > How to: Implement a Property Editor Using a DevExpress WinForms Control article.

The resultant implementation is indeed quite straightforward:

using System;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;

namespace YourSolutionName.Module.Win.Editors {
    [PropertyEditor(typeof(TimeSpan), true)]
    public class TimeSpanEditPropertyEditor : DevExpress.ExpressApp.Win.Editors.DXPropertyEditor {
        public TimeSpanEditPropertyEditor(Type objectType, IModelMemberViewItem model)
            : base(objectType, model) {
        }
        protected override object CreateControlCore() {
            return new DevExpress.XtraEditors.TimeSpanEdit();
        }
        protected override DevExpress.XtraEditors.Repository.RepositoryItem CreateRepositoryItem() {
            return new DevExpress.XtraEditors.Repository.RepositoryItemTimeSpanEdit();
        }
        //Optionally customize the RepositoryItemTimeSpanEdit object for both ListView and DetailView.
        protected override void SetupRepositoryItem(DevExpress.XtraEditors.Repository.RepositoryItem item) {
            base.SetupRepositoryItem(item);
            //DoSomethingWithEditorPropertiesIfRequired((DevExpress.XtraEditors.Repository.RepositoryItemTimeSpanEdit)item);
        }
    }
}


Still, you can find a complete project in this Support Center thread. Please don't hesitate to write to us about each end-user use case that requires additional code to adjust this control, and we will investigate it to see how to manage it better.

See Also

How to view and edit only time values without the date part