流暢設(shè)計表單

立即下載DevExpress WinForms

FluentDesignForm是Windows 10風(fēng)格的表單，具有以下特點：

• 嵌入式Hamburger Menu (AccordionControl)
• Hamburger Menu的自適應(yīng)布局模式
• Acrylic Material效果
• 顯示高亮可視化效果

提示：Fluent Design Forms不能用作。

新增Fluent Design Forms

要使用FluentDesignForm創(chuàng)建新項目，請使用DevExpress Template Gallery的Fluent Design Application項目模板。

將標(biāo)準(zhǔn)表單轉(zhuǎn)化為Fluent Design Forms

 要將現(xiàn)有表單轉(zhuǎn)換為FluentDesignForm，請使用Convert to Fluent Design Form命令，該命令可從以下位置獲得：

• 表單的智能標(biāo)簽菜單
• FormAssistant組件

 要用代碼手動轉(zhuǎn)換表單，請將表單的基類更改為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

表單元素

 當(dāng)使用Template Gallery和Convert to Fluent Design Form命令將Fluent Design Form添加到項目中時，它將創(chuàng)建三個控件：

• 啟用HamburgerMenu視圖類型的AccordionControl ——允許您使用簡單或分層列表形式排列的自定義命令來實現(xiàn)菜單（導(dǎo)航控件）。HamburgerMenu是AccordionControl提供的兩種視圖類型之一（AccordionControl.ViewType屬性設(shè)置為HamburgerMenu），此視圖類型具有：
  • Hamburger按鈕（展開/折疊菜單）。
  • 三種顯示模式（內(nèi)聯(lián)，覆蓋和最小）。 調(diào)整表單大小時，F(xiàn)luent Design Form會自動在這些模式之間切換。
• FluentDesignFormControl ——表單的標(biāo)題，用于顯示表單的標(biāo)題，并允許您在其表面上顯示自定義命令（欄項目鏈接）。
• FluentDesignFormContainer—— 將自定義控件添加到此容器中，來在表單的客戶區(qū)域中顯示它們。

Acrylic 和 Reveal Highlight效果

 FluentDesignForm.EnableAcrylicAccent設(shè)置可為嵌入式Accordion Control (Hamburger Menu)啟用Acrylic Material（半透明紋理）和Reveal Highlight效果。 請注意，Accordion Control僅在串聯(lián)模式下支持此視覺效果。

注意：僅當(dāng)應(yīng)用程序在Windows 10 Version 1803 (OS build 17134) 或更高版本下運行時，才會啟用這兩種效果， 由于Windows API的最新更改，在Windows 10 Build 1903中暫時禁用了這些效果。

自適應(yīng)布局

 使用Adaptive Layout功能（默認(rèn)情況下啟用），當(dāng)您擴展或縮小表單時，F(xiàn)luent Design Form會自動在 Inline、Overlay和Minimal直接之間切換到Hamburger Menu的顯示模式。

 下面將描述Hamburger Menu的顯示模式(AccordionOptionsHamburgerMenu.DisplayMode)以及觸發(fā)顯示模式切換的表單寬度。

• Inline - 折疊時，Hamburger Menu顯示為側(cè)欄；展開時，其與表單內(nèi)容一致。折疊菜單會擴大表單的內(nèi)容區(qū)域，相反，擴展菜單會縮小該區(qū)域。
  • 寬度 ——寬度大于OptionsAdaptiveLayout.InlineModeThreshold （默認(rèn)為650像素）。
• Overlay - 折疊時，Hamburger Menu顯示為側(cè)欄；展開時，顯示為內(nèi)容區(qū)域上方的覆蓋圖。
  • 寬度 ——寬度介于OptionsAdaptiveLayout.OverlayModeThreshold和OptionsAdaptiveLayout.InlineModeThreshold之間（默認(rèn)為450到650像素）。
• Minimal - 折疊時，Hamburger Menu顯示為帶有單個項目的頂部對齊欄 (Hamburger button) ，展開時顯示為內(nèi)容區(qū)域上方的覆蓋圖。
  • 寬度 ——寬度小于OptionsAdaptiveLayout.OverlayModeThreshold（默認(rèn)為450像素）。

注意：Fluent Design Form會用Minimal模式自動將Hamburger Menu的DockStyle設(shè)置為Top，從而將菜單呈現(xiàn)為條形。 在其他dock樣式中，Hamburger Menu呈現(xiàn)為方形Hamburger按鈕。

 在設(shè)計時，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

 當(dāng) AccordionControl.ViewType 屬性設(shè)置為Standard時，不支持自適應(yīng)布局功能。

Hamburger Menu重疊標(biāo)題欄

 默認(rèn)情況下，Accordion Control (Hamburger Menu) 在某些外觀中占據(jù)整個表單高度，與標(biāo)題欄重疊。

 必要時，可以通過覆蓋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>

注意：在以下情況下支持標(biāo)題重疊功能：

• 您的表單使用以下皮膚之一：
  • The Bezier
  • Office 2019 Colorful
  • Office 2016 Black
  • Office 2016 Dark
  • Office 2016 Colorful
• 該應(yīng)用程序在Windows 10 Version 1803 (OS build 17134)或更高版本上運行。

創(chuàng)建流暢的設(shè)計表單與側(cè)導(dǎo)航

 這個例子演示了如何實現(xiàn)側(cè)邊導(dǎo)航，使用WinForms Accordion和導(dǎo)航框控件創(chuàng)建一個流暢設(shè)計表單。

使用下面的代碼創(chuàng)建accordion元素，自定義它們的設(shè)置，并實現(xiàn)框架/頁面之間的導(dǎo)航。

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

下面的動畫說明了結(jié)果：

創(chuàng)建具有標(biāo)題按鈕的流暢設(shè)計表單

 下面的示例展示了如何在代碼中添加和設(shè)置主要的Fluent Design Form元素，以及如何用按鈕填充標(biāo)題控件。

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