彩票走势图

logo DevExpress WinForm中文手册

流畅设计表单

立即下载DevExpress WinForms

FluentDesignForm是Windows 10风格的表单，具有以下特点：

  • 嵌入式Hamburger Menu (AccordionControl)
  • Hamburger Menu的自适应布局模式
  • Acrylic Material效果
  • 显示高亮可视化效果

提示：Fluent Design Forms不能用作。

新增Fluent Design Forms

要使用FluentDesignForm创建新项目，请使用DevExpress Template Gallery的Fluent Design Application项目模板。

将标准表单转化为Fluent Design Forms

要将现有表单转换为FluentDesignForm，请使用Convert to Fluent Design Form命令，该命令可从以下位置获得：

  • 表单的智能标签菜单
  • FormAssistant组件

要用代码手动转换表单，请将表单的基类更改为FluentDesignForm，您还需要将DevExpress.XtraBars库添加到项目中。

C#： 

namespace DXApplication1 {
public partial class Form1 : DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm {
public Form1() {
InitializeComponent();
}
}
}

VB.NET ： 

Partial Public Class Form1
Inherits DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm

Public Sub New()
InitializeComponent()
End Sub
End Class

表单元素

当使用Template Gallery和Convert to Fluent Design Form命令将Fluent Design Form添加到项目中时，它将创建三个控件：

  • 启用HamburgerMenu视图类型的AccordionControl ——允许您使用简单或分层列表形式排列的自定义命令来实现菜单（导航控件）。HamburgerMenu是AccordionControl提供的两种视图类型之一（AccordionControl.ViewType属性设置为HamburgerMenu），此视图类型具有：
    • Hamburger按钮（展开/折叠菜单）。
    • 三种显示模式（内联，覆盖和最小）。 调整表单大小时，Fluent Design Form会自动在这些模式之间切换。
  • FluentDesignFormControl ——表单的标题，用于显示表单的标题，并允许您在其表面上显示自定义命令（栏项目链接）。
  • FluentDesignFormContainer—— 将自定义控件添加到此容器中，来在表单的客户区域中显示它们。
DevExpress WinForms帮助文档

Acrylic 和 Reveal Highlight效果

FluentDesignForm.EnableAcrylicAccent设置可为嵌入式Accordion Control (Hamburger Menu)启用Acrylic Material（半透明纹理）和Reveal Highlight效果。 请注意，Accordion Control仅在串联模式下支持此视觉效果。

DevExpress WinForms帮助文档

注意：仅当应用程序在Windows 10 Version 1803 (OS build 17134) 或更高版本下运行时，才会启用这两种效果， 由于Windows API的最新更改，在Windows 10 Build 1903中暂时禁用了这些效果。

自适应布局

使用Adaptive Layout功能（默认情况下启用），当您扩展或缩小表单时，Fluent Design Form会自动在 Inline、Overlay和Minimal直接之间切换到Hamburger Menu的显示模式。

DevExpress WinForms帮助文档

下面将描述Hamburger Menu的显示模式(AccordionOptionsHamburgerMenu.DisplayMode)以及触发显示模式切换的表单宽度。

  • Inline - 折叠时，Hamburger Menu显示为侧栏；展开时，其与表单内容一致。折叠菜单会扩大表单的内容区域，相反，扩展菜单会缩小该区域。
    • 宽度 ——宽度大于OptionsAdaptiveLayout.InlineModeThreshold （默认为650像素）。
  • Overlay - 折叠时，Hamburger Menu显示为侧栏；展开时，显示为内容区域上方的覆盖图。
    • 宽度 ——宽度介于OptionsAdaptiveLayout.OverlayModeThreshold和OptionsAdaptiveLayout.InlineModeThreshold之间（默认为450到650像素）。
  • Minimal - 折叠时，Hamburger Menu显示为带有单个项目的顶部对齐栏 (Hamburger button) ，展开时显示为内容区域上方的覆盖图。
    • 宽度 ——宽度小于OptionsAdaptiveLayout.OverlayModeThreshold（默认为450像素）。

注意：Fluent Design Form会用Minimal模式自动将Hamburger Menu的DockStyle设置为Top，从而将菜单呈现为条形。 在其他dock样式中，Hamburger Menu呈现为方形Hamburger按钮。

在设计时，OptionsAdaptiveLayout.AdaptiveLayout选项被隐藏，您可以按以下方式在代码中对其进行修改。

C# ： 

public partial class Form1 : DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm {
public Form1() {
InitializeComponent();
this.OptionsAdaptiveLayout.AdaptiveLayout = false;
}
...
}

VB.NET ： 

Public Sub New()
InitializeComponent()
Me.OptionsAdaptiveLayout.AdaptiveLayout = False
End Sub

当 AccordionControl.ViewType 属性设置为Standard时，不支持自适应布局功能。

Hamburger Menu重叠标题栏

默认情况下，Accordion Control (Hamburger Menu) 在某些外观中占据整个表单高度，与标题栏重叠。

DevExpress WinForms帮助文档

必要时，可以通过覆盖ExtendNavigationControlToFormTitle虚拟属性来禁用此操作。

C# ： 

public partial class Form1 : FluentDesignForm {
//...
protected override bool ExtendNavigationControlToFormTitle {
get { return false; }
}
}

VB.NET ： 

<p>Protected Overrides ReadOnly Property ExtendNavigationControlToFormTitle As Boolean</p>
<p>Protected Overrides ReadOnly Property ExtendNavigationControlToFormTitle As Boolean<br>
  Get<br>
  Return False<br>
  End Get<br>
  End Property<br>
  End Property</p>

点击复制

注意：在以下情况下支持标题重叠功能：

  • 您的表单使用以下皮肤之一：
    • The Bezier
    • Office 2019 Colorful
    • Office 2016 Black
    • Office 2016 Dark
    • Office 2016 Colorful
  • 该应用程序在Windows 10 Version 1803 (OS build 17134)或更高版本上运行。

创建流畅的设计表单与侧导航

这个例子演示了如何实现侧边导航，使用WinForms Accordion和导航框控件创建一个流畅设计表单。

流畅的设计应用程序与侧导航

使用下面的代码创建accordion元素，自定义它们的设置，并实现框架/页面之间的导航。

C#： 

using System;
using DevExpress.XtraBars.Navigation;

namespace DXFluentDesignApp {
public partial class Form1 : DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm {
public Form1() {
InitializeComponent();
InitAccordion(accordionControl1);
}
void InitAccordion(AccordionControl accordion) {
accordion.Elements.Clear();
AccordionControlElement group = new AccordionControlElement(ElementStyle.Group) {
Name = "accordionGroup1",
Text = "Pages",
Expanded = true
};
AccordionControlElement item1 = new AccordionControlElement(ElementStyle.Item) {
Name = "accordionItem1",
Text = "Page 1"
};
AccordionControlElement item2 = new AccordionControlElement(ElementStyle.Item) {
Name = "accordionItem2",
Text = "Page 2"
};

item1.Click += new EventHandler(this.accordionElement_Click);
item2.Click += new EventHandler(this.accordionElement_Click);

group.Elements.AddRange(new AccordionControlElement[] { item1, item2 });
accordion.Elements.Add(group);
}
void accordionElement_Click(object sender, EventArgs e) {
AccordionControlElement item = sender as AccordionControlElement;
navigationFrame1.SelectedPage = item.Text == "Page 1" ? navigationPage1 : navigationPage2;
}
}
}

VB.NET： 

Imports System
Imports DevExpress.XtraBars.Navigation

Namespace DXFluentDesignApp
Partial Public Class Form1
Inherits DevExpress.XtraBars.FluentDesignSystem.FluentDesignForm

Public Sub New()
InitializeComponent()
InitAccordion(accordionControl1)
End Sub
Private Sub InitAccordion(ByVal accordion As AccordionControl)
accordion.Elements.Clear()
Dim group As New AccordionControlElement(ElementStyle.Group) With {.Name = "accordionGroup1", .Text = "Pages", .Expanded = True}
Dim item1 As New AccordionControlElement(ElementStyle.Item) With {.Name = "accordionItem1", .Text = "Page 1"}
Dim item2 As New AccordionControlElement(ElementStyle.Item) With {.Name = "accordionItem2", .Text = "Page 2"}

AddHandler item1.Click, AddressOf accordionElement_Click
AddHandler item2.Click, AddressOf accordionElement_Click

group.Elements.AddRange(New AccordionControlElement() { item1, item2 })
accordion.Elements.Add(group)
End Sub
Private Sub accordionElement_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim item As AccordionControlElement = TryCast(sender, AccordionControlElement)
navigationFrame1.SelectedPage = If(item.Text = "Page 1", navigationPage1, navigationPage2)
End Sub
End Class
End Namespace

下面的动画说明了结果：

结果

创建具有标题按钮的流畅设计表单

下面的示例展示了如何在代码中添加和设置主要的Fluent Design Form元素，以及如何用按钮填充标题控件。

C#： 

using DevExpress.XtraBars;
using DevExpress.XtraBars.FluentDesignSystem;
using System.Windows.Forms;

namespace DXApplication16 {
public partial class Form1 : FluentDesignForm {
public Form1() {
InitializeComponent();
// Create header control that contains buttons
FluentDesignFormControl fdfControl = new FluentDesignFormControl();
// Create buttons
BarSubItem bsiMain = new BarSubItem() { Caption = "Main" };
BarButtonItem biNew = new BarButtonItem() { Caption = "New" };
BarButtonItem biOpen = new BarButtonItem() { Caption = "Open" };
BarButtonItem biClose = new BarButtonItem() { Caption = "Close" };
SkinDropDownButtonItem skinItem = new SkinDropDownButtonItem();
SkinPaletteDropDownButtonItem paletteItem =
new SkinPaletteDropDownButtonItem();
// Call BeginInit-EndInit methods to make sure
// the header control is set up correctly
fdfControl.BeginInit();
this.FluentDesignFormControl = fdfControl; // Bind header control with form
this.Controls.Add(fdfControl); // Add header control to form
bsiMain.AddItems(new BarItem[] { biNew, biOpen, biClose }); // Fill sub-item
// BarItems require a BarManager to operate
// Every FluentDesignFormControl has an internal BarManager
// Add bar items to the Items collection to assign them to this manager
fdfControl.Items.AddRange(new BarItem[] {
skinItem, paletteItem, bsiMain, biNew, biOpen, biClose
});
// Items that the header control should display
fdfControl.TitleItemLinks.AddRange(new BarItem[] {
bsiMain, skinItem, paletteItem
});
fdfControl.EndInit();

// FluentDesignFormContainer fills the entire client area
// of a form and hosts all form controls
FluentDesignFormContainer fdfContainer = new FluentDesignFormContainer();
this.ControlContainer = fdfContainer;
this.Controls.Add(fdfContainer);
fdfContainer.Dock = DockStyle.Fill;
fdfContainer.Controls.AddRange(new Control[] {
// Client area controls
});
}
}
}

VB.NET： 

Imports DevExpress.XtraBars
Imports DevExpress.XtraBars.FluentDesignSystem
Imports System.Windows.Forms

Namespace DXApplication16
Partial Public Class Form1
Inherits FluentDesignForm

Public Sub New()
InitializeComponent()
' Create header control that contains buttons
Dim fdfControl As New FluentDesignFormControl()
' Create buttons
Dim bsiMain As New BarSubItem() With {.Caption = "Main"}
Dim biNew As New BarButtonItem() With {.Caption = "New"}
Dim biOpen As New BarButtonItem() With {.Caption = "Open"}
Dim biClose As New BarButtonItem() With {.Caption = "Close"}
Dim skinItem As New SkinDropDownButtonItem()
Dim paletteItem As New SkinPaletteDropDownButtonItem()
' Call BeginInit-EndInit methods to make sure
' the header control is set up correctly
fdfControl.BeginInit()
Me.FluentDesignFormControl = fdfControl ' Bind header control with form
Me.Controls.Add(fdfControl) ' Add header control to form
bsiMain.AddItems(New BarItem() { biNew, biOpen, biClose }) 'fill sub-item
' BarItems require a BarManager to operate
' Every FluentDesignFormControl has an internal BarManager
' Add bar items to the Items collection to assign them to this manager
fdfControl.Items.AddRange(New BarItem() { skinItem, paletteItem, bsiMain, biNew, biOpen, biClose })
' Items that the header control should display
fdfControl.TitleItemLinks.AddRange(New BarItem() { bsiMain, skinItem, paletteItem })
fdfControl.EndInit()

' FluentDesignFormContainer fills the entire client area
' of a form and hosts all form controls
Dim fdfContainer As New FluentDesignFormContainer()
Me.ControlContainer = fdfContainer
Me.Controls.Add(fdfContainer)
fdfContainer.Dock = DockStyle.Fill
fdfContainer.Controls.AddRange(New Control() { })
' Client area controls
End Sub
End Class
End Namespace
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP