文檔金喜正規買球>>DevExpress WinForm中文手冊>>流暢設計表單
流暢設計表單
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—— 將自定義控件添加到此容器中，來在表單的客戶區域中顯示它們。
Acrylic 和 Reveal Highlight效果
FluentDesignForm.EnableAcrylicAccent設置可為嵌入式Accordion Control (Hamburger Menu)啟用Acrylic Material（半透明紋理）和Reveal Highlight效果。 請注意，Accordion Control僅在串聯模式下支持此視覺效果。
注意：僅當應用程序在Windows 10 Version 1803 (OS build 17134) 或更高版本下運行時，才會啟用這兩種效果， 由于Windows API的最新更改，在Windows 10 Build 1903中暫時禁用了這些效果。
自適應布局
使用Adaptive Layout功能（默認情況下啟用），當您擴展或縮小表單時，Fluent Design Form會自動在 Inline、Overlay和Minimal直接之間切換到Hamburger Menu的顯示模式。
下面將描述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) 在某些外觀中占據整個表單高度，與標題欄重疊。
必要時，可以通過覆蓋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
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線