EPR类企业管理系统

在我们现有系统基础上或全新开发,提供定制服务
为您的企业高效快速实施ERP,WMS,MES,CRM管理系统
全面管控物料仓库、销售业务、采购业务、仓库业务
生产过程、质量检验、组织架构、业务报表


定制
QQ:460-3528

开发
QQ群:3360-90194

源码
微信:136-3650-3721

如何:使用自定义CSS类自定义ASP.NET布局元素

本主题描述XAF ASP.NET应用程序中CSS类的最流行用法。当为特定的“详细视图”执行多个布局元素的自定义时,它们将很有帮助。本主题中的示例显示了MainDemo演示项目对Contact Detail View布局的自定义。

要为目标元素添加新的CSS类,请为布局组或模型编辑器中的项目节点指定IModelViewLayoutElementWeb.CustomCSSClassName属性,以指定该类名称。运行该应用程序,使用页面检查器工具在适当的“详细信息视图”页面上找到新创建的类名称,然后选择要自定义的元素的类。编辑必要的CSS规则,并将其添加到Default.aspx文件中的此新类中。

提示

如果要使用规则来更改布局元素的颜色或可见性,则应使用“条件外观模块”

组头的自定义

本节介绍如何自定义组标题。例如,使用Person的组标题文本颜色和背景颜色自定义来创建ContactPersonInfoGroupStyle CSS类和规则。在此示例中,具有GroupHeader和Label类的项目是自定义的。

  • 更改标题的字体颜色

    .ContactPersonInfoGroupStyle .GroupHeader .Label
    {
        color: White;
    }
    
  • 更改标题的背景色

    .CardGroupBase .ContactPersonInfoGroupStyle .GroupHeader
    {
        background-color: LightSteelBlue;
    }
    

保存更改并刷新“联系人的详细信息视图”页面以查看结果。

CustomCSSClassName_Header

物业编辑定制

可以为“视图”和“编辑详细信息视图”模式自定义属性编辑器(请参阅DetailView.ViewEditMode主题)。这些模式的CSS规则可能有所不同,例如,ContactFirstNameStyle CSS类及其规则的创建是为了针对不同模式自定义属性编辑器的标题和文本。在模型编辑器中,将FirstName布局项目的CustomCSSClassName属性设置为ContactFirstNameStyle CSS类名称。下面的代码段演示了这些自定义规则。

  • 更改标题的文字颜色和字体

    .ContactFirstNameStyle .Caption
    {
        font: bold 14px;
    }
    
  • 更改编辑器的文字颜色

    /* In the View mode */
    .ContactFirstNameStyle .WebEditorCell
    {
        color: SteelBlue;
    }
    /* In the Edit mode */
    .ContactFirstNameStyle .dxeEditAreaSys
    {
        color: CornflowerBlue;
    }
    

下图显示了此定制的结果。

CustomCSSClassName_PropertyEditor

选项卡式组自定义

您可以自定义选项卡式组中活动和非活动选项卡的背景和标题颜色。例如,在模型编辑器中,将“选项卡”选项卡式组的CustomCSSClassName设置为ContactTabsStyle,然后在Default.aspx文件中向该类添加新的CSS规则。

.ContactTabsStyle.LayoutTabbedGroupContainer > .dxtc-stripContainer .dxtc-activeTab,
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab.dxtc-lead,
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab 
{
    background-color: #2c86d3 !important;
}
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-activeTab .dxtc-link
{
    color: white;
}
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-tab, 
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-activeTab
{
    background-color: PowderBlue;
}
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-tabHover, 
.ContactTabsStyle.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-tabHover .dxtc-link
{
    background-color: PowderBlue;
}

选项卡的样式会根据上面的自定义代码进行更改。

CustomCSSClassName_TabbedGroup

动作自定义

您可以使用模型编辑器中的CustomCssClassName属性来自定义Action外观,也可以通过Controller设置所需的CSS类名称。动作通常不与特定的View关联,因此,当您将CSS类名设置为Action的CustomCssClassName属性时,将在出现该视图的所有View中对该Action进行调整。

  • 使用CustomCssClassName属性

    例如,更改“新建”操作的背景颜色。在模型编辑器中,找到应用程序| 动作设计| 动作| “新建操作”节点上,将其CustomCSSClassName属性设置为NewActionStyle CSS类名称,并在Default.aspx文件中添加以下CSS规则:

    .menuAreaDiv .menuButtons .dxm-item.NewActionStyle, 
    .menuLinks .dxm-item.NewActionStyle, 
    .menuButtons .dxm-item.NewActionStyle a.dx 
    { 
        background-color: SkyBlue; 
    }
    

    下图演示了自定义的“操作”。

    CustomCSSClassName_NewActionStyle

  • 使用ViewController

    要将CSS规则应用于特定View上的Action,请为DetailView创建一个新的Controller,该Controller是ViewController <ViewType>的后代。

    请注意,此方法强制执行菜单渲染,这可能会减少布局图。因此,如果要自定义多个视图,请使用此方法。如果要在大多数视图中自定义动作,请使用模型编辑器的全局设置并使用Controller对其进行管理。

    例如,下面的Controller使用CSS规则自定义文本颜色和标题,如上一段所示,针对仅显示在Contact Detail视图中的New Action 。该控制器使用ActionBase.CustomizeControl事件。

    public class CustomizeContactDetailViewAction : ViewController<DetailView> {
        private SingleChoiceActionItemAsOperationActionMenuItem actionItem = null;
        protected override void OnActivated() {
            base.OnActivated();
            NewObjectViewController controller = Frame.GetController<NewObjectViewController>();
            if (controller != null) {
                controller.NewObjectAction.CustomizeControl  = NewObjectAction_CustomizeControl;
                controller.NewObjectAction.ItemsChanged  =   NewObjectAction_ItemsChanged;
            }
        }
        protected override void OnDeactivated() {
            base.OnDeactivated();
            NewObjectViewController controller = Frame.GetController<NewObjectViewController>();
            if (controller != null) {
                controller.NewObjectAction.CustomizeControl -= NewObjectAction_CustomizeControl;
                controller.NewObjectAction.ItemsChanged -=   NewObjectAction_ItemsChanged;
            }
        }
        protected override void OnViewChanged() {
            base.OnViewChanged();
            if (actionItem != null) {
                if (View != null && View.Id == "Contact_DetailView") {
                    SetNewCaption(actionItem.MenuItem);
                }
                else {
                    RemoveCustomCssClass(actionItem.MenuItem);
                }
            }
        }
        private void NewObjectAction_CustomizeControl(object sender, 
    DevExpress.ExpressApp.Actions.CustomizeControlEventArgs e) {
            actionItem = (SingleChoiceActionItemAsOperationActionMenuItem)e.Control;
            if (View.Id == "Contact_DetailView") {
                SetNewCaption(actionItem.MenuItem);
            }
        }
        void NewObjectAction_ItemsChanged(object sender, 
    DevExpress.ExpressApp.Actions.ItemsChangedEventArgs e) {
            if (actionItem != null && View.Id == "Contact_DetailView") {
                SetNewCaption(actionItem.MenuItem);
            }
        }
        bool menuChanged = false;
        private void SetNewCaption(XafMenuItem menuItem) {
            menuItem.Text = "New Custom Contact";
            menuItem.ItemStyle.CssClass  = " NewActionStyle";
            menuItem.ForceMenuRendering();
            menuChanged = true;
        }
        //Remove the CSS class which was added by model
        private void RemoveCustomCssClass(XafMenuItem menuItem) {
            if (menuChanged) {
                menuItem.ItemStyle.CssClass = 
    menuItem.ItemStyle.CssClass.Replace("NewActionStyle", string.Empty);
                menuItem.ForceMenuRendering();
                menuChanged = false;
            }
        }
    }
    

    下图演示了此Controller如何管理Action的自定义:

    CustomCSSClassName_NewActionText

转载保留此链接,注明出处