How to:Customize Action Controls 如何:自定义按钮控件

Posted 2021-03-20 foreachlife

This example demonstrates how to customize the control that visualizes an Action in a UI. A custom Action will be created, allowing users to enter a date and filter the List View accordingly. The implemented Action will accept keyboard input, as well as provide a drop-down calendar. The control representing the Action will be customized to accept keyboard input using a custom mask. The image below shows the resulting Action in a UI.

此示例演示如何自定义在 UI 中可视化操作的控件。将创建自定义操作，允许用户输入日期并相应地筛选列表视图。实现的操作将接受键盘输入，并提供下拉日历。将自定义表示操作的控件，以接受使用自定义掩码输入的控件。下图显示了 UI 中生成的操作。

Note 注意

You can see a demonstration of the following controllers (the CustomizeMenuActionsController for ASP.NET and CustomizeParametrizedActionController for WinForms) in the Actions section of the Feature Center application that is shipped with XAF. The Feature Center demo is installed in %PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkFeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/

您可以在 XAF 附带的功能中心应用程序的"操作"部分看到以下控制器（用于ASP.NET的"自定义菜单操作控制器"和"为 WinForms 自定义参数化操作控制器"）的演示。功能中心演示安装在%PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkFeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/

.

First, define the sample MyDomainObject business class. The class contains two properties. The first is the "CreatedOn" property of the DateTime type, and the second is the "Title" property of the string type.

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;
// ...
[DefaultClassOptions]
public class MyDomainObject : BaseObject {
    public MyDomainObject(Session session) : base(session) { }

    public DateTime CreatedOn {
        get { return GetPropertyValue<DateTime>(nameof(CreatedOn)); }
        set { SetPropertyValue(nameof(CreatedOn), value); }
    }

    public string Title {
        get { return GetPropertyValue<string>(nameof(Title)); }
        set { SetPropertyValue(nameof(Title), value); }
    }
}

 

Next, create a new View Controller and define a ParametrizedAction. Configure the Controller and Action so that they activate for the MyDomainObject class only. Set the Action‘s ParametrizedAction.ValueType to DateTime. In the Action‘s ParametrizedAction.Execute event handler, check whether a date was entered. If a date was entered, filter the MyDomainObject List View to contain only the objects whose "CreatedOn" property‘s value equals the entered date. If a user has executed the Action with an empty edit field, remove the applied filter, so that the List View displays all the objects, without regard to their creation date.

接下来，创建新的视图控制器并定义参数化操作。配置控制器和操作，以便它们仅为 MyDomainObject 类激活。将操作的参数化操作.ValueType 设置为日期时间。在操作的参数化操作.执行事件处理程序中，检查是否输入了日期。如果输入了日期，则筛选 MyDomain 对象列表视图，以仅包含其"CreatedOn"属性的值等于输入日期的对象。如果用户已使用空编辑字段执行操作，请删除应用的筛选器，以便列表视图显示所有对象，而不考虑其创建日期。

using DevExpress.Data.Filtering;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.Persistent.Base;
//...
public class MyFilterController : ViewController {
    public ParametrizedAction dateFilterAction;
    public MyFilterController() {
        TargetViewType = ViewType.ListView;
        TargetObjectType = typeof(MyDomainObject);
        dateFilterAction = new ParametrizedAction(this, "MyDateFilter", PredefinedCategory.Search, typeof(DateTime));
        dateFilterAction.NullValuePrompt = "Enter date";
        dateFilterAction.Execute += dateFilterAction_Execute;
    }
    private void dateFilterAction_Execute(object sender, ParametrizedActionExecuteEventArgs e) {
        CriteriaOperator criterion = null;
        if(e.ParameterCurrentValue != null && e.ParameterCurrentValue.ToString() != string.Empty) {
            criterion = new BinaryOperator("CreatedOn", Convert.ToDateTime(e.ParameterCurrentValue));
        }
        ((ListView)View).CollectionSource.Criteria[dateFilterAction.Id] = criterion;
    }
}

 

To set up a custom edit mask, subscribe to the ActionBase.CustomizeControl event. This event allows you to customize the created items control, and provides access to the corresponding Action Control.

要设置自定义编辑掩码，请订阅 ActionBase.CustomizeControl 事件。此事件允许您自定义创建的项控件，并提供对相应操作控件的访问。

WinForms

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.XtraBars;
using DevExpress.XtraEditors.Repository;
//...
public class CustomizeActionControlControllerWin : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl += CustomizeActionControlControllerWin_CustomizeControl;
    }
    private void CustomizeActionControlControllerWin_CustomizeControl(object sender, 
CustomizeControlEventArgs e) {
        BarEditItem barItem = e.Control as BarEditItem;
        if (barItem != null) {
            RepositoryItemDateEdit repositoryItem = (RepositoryItemDateEdit)barItem.Edit;
            repositoryItem.Mask.UseMaskAsDisplayFormat = true;
            repositoryItem.Mask.EditMask = "yyyy-MMM-dd";
            barItem.Width = 270;
        }
    }
    protected override void OnDeactivated() {
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl -= 
CustomizeActionControlControllerWin_CustomizeControl;
        base.OnDeactivated();
    }
}

 

ASP.NET

This approach uses Server properties. Employ this approach when you need to change a control‘s behavior. If you need to change a control‘s appearance, use CSS styles as the Action Customization article describes.

此方法使用服务器属性。当您需要更改控件的行为时，使用此方法。如果需要更改控件的外观，请使用"操作自定义"一文中介绍的 CSS 样式。

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu;
using DevExpress.Web;
//...
public class CustomizeActionControlControllerWeb : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl += CustomizeActionControlControllerWeb_CustomizeControl;
    }
    private void CustomizeActionControlControllerWeb_CustomizeControl(object sender, 
CustomizeControlEventArgs e) {
        ParametrizedActionMenuActionItem actionItem = e.Control as ParametrizedActionMenuActionItem;
        if (actionItem != null) {
            ASPxDateEdit editor = actionItem.Control.Editor as ASPxDateEdit;
            if (editor != null) {
                editor.UseMaskBehavior = true;
                editor.EditFormat = EditFormat.DateTime;
                editor.EditFormatString = "yyyy-MMM-dd";
                editor.Width = 270;
            }
        }
    }
    protected override void OnDeactivated() {
        Frame.GetController<MyFilterController>().dateFilterAction.CustomizeControl -= 
CustomizeActionControlControllerWeb_CustomizeControl;
        base.OnDeactivated();
    }
}

 

Mobile

To specify a date-time format, use symbols from the Unicode Date Field Symbol Table or the predefined formats the DevExtreme Library supports.

要指定日期时间格式，请使用 Unicode 日期字段符号表中的符号或 DevExtreme 库支持的预定义格式。

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using System.Collections.Generic;
// ...
public class CustomizeActionControlControllerMobile : Controller {
    protected override void OnActivated() {
        base.OnActivated();
        MyFilterController controller = Frame.GetController<MyFilterController>();
        if (controller != null) {
            controller.dateFilterAction.CustomizeControl += 
CustomizeActionControlControllerMobile_CustomizeControl;
        }
    }
    private void CustomizeActionControlControllerMobile_CustomizeControl(object sender,
CustomizeControlEventArgs e) {
        List<object> controls = (List<object>)e.Control;
        Dictionary<string, object> editor = (Dictionary<string, object>)controls[1];
        editor["displayFormat"] = "longdate";
    }
    protected override void OnDeactivated() {
        MyFilterController controller = Frame.GetController<MyFilterController>();
        if (controller != null) {
            controller.dateFilterAction.CustomizeControl -=
CustomizeActionControlControllerMobile_CustomizeControl;
        }
        base.OnDeactivated();
    }
}