流暢設(shè)計表單
FluentDesignForm是Windows 10風格的表單,具有以下特點:
- 嵌入式Hamburger Menu (AccordionControl)
- Hamburger Menu的自適應布局模式
- Acrylic Material效果
- 顯示高亮可視化效果
提示:Fluent Design Forms不能用作。
新增Fluent Design Forms
要使用FluentDesignForm創(chuàng)建新項目,請使用DevExpress Template Gallery的Fluent Design Application項目模板。
將標準表單轉(zhuǎn)化為Fluent Design Forms
要將現(xiàn)有表單轉(zhuǎn)換為FluentDesignForm,請使用Convert to Fluent Design Form命令,該命令可從以下位置獲得:
- 表單的智能標簽菜單
- 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
表單元素
當使用Template Gallery和Convert to Fluent Design Form命令將Fluent Design Form添加到項目中時,它將創(chuàng)建三個控件:
- 
		啟用HamburgerMenu視圖類型的AccordionControl ——允許您使用簡單或分層列表形式排列的自定義命令來實現(xiàn)菜單(導航控件)。HamburgerMenu是AccordionControl提供的兩種視圖類型之一(AccordionControl.ViewType屬性設(shè)置為HamburgerMenu),此視圖類型具有:
		- Hamburger按鈕(展開/折疊菜單)。
- 三種顯示模式(內(nèi)聯(lián),覆蓋和最小)。 調(diào)整表單大小時,F(xiàn)luent Design Form會自動在這些模式之間切換。
 
- FluentDesignFormControl ——表單的標題,用于顯示表單的標題,并允許您在其表面上顯示自定義命令(欄項目鏈接)。
- FluentDesignFormContainer—— 將自定義控件添加到此容器中,來在表單的客戶區(qū)域中顯示它們。
 
 
Acrylic 和 Reveal Highlight效果
FluentDesignForm.EnableAcrylicAccent設(shè)置可為嵌入式Accordion Control (Hamburger Menu)啟用Acrylic Material(半透明紋理)和Reveal Highlight效果。 請注意,Accordion Control僅在串聯(lián)模式下支持此視覺效果。
 
 
注意:僅當應用程序在Windows 10 Version 1803 (OS build 17134) 或更高版本下運行時,才會啟用這兩種效果, 由于Windows API的最新更改,在Windows 10 Build 1903中暫時禁用了這些效果。
自適應布局
使用Adaptive Layout功能(默認情況下啟用),當您擴展或縮小表單時,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 (默認為650像素)。
 
- 
		Overlay -  折疊時,Hamburger Menu顯示為側(cè)欄;展開時,顯示為內(nèi)容區(qū)域上方的覆蓋圖。
		- 寬度 ——寬度介于OptionsAdaptiveLayout.OverlayModeThreshold和OptionsAdaptiveLayout.InlineModeThreshold之間(默認為450到650像素)。
 
- 
		Minimal - 折疊時,Hamburger Menu顯示為帶有單個項目的頂部對齊欄 (Hamburger button) ,展開時顯示為內(nèi)容區(qū)域上方的覆蓋圖。
		- 寬度 ——寬度小于OptionsAdaptiveLayout.OverlayModeThreshold(默認為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
當 AccordionControl.ViewType 屬性設(shè)置為Standard時,不支持自適應布局功能。
Hamburger Menu重疊標題欄
默認情況下,Accordion Control (Hamburger Menu) 在某些外觀中占據(jù)整個表單高度,與標題欄重疊。
 
 
必要時,可以通過覆蓋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)或更高版本上運行。
創(chuàng)建流暢的設(shè)計表單與側(cè)導航
這個例子演示了如何實現(xiàn)側(cè)邊導航,使用WinForms Accordion和導航框控件創(chuàng)建一個流暢設(shè)計表單。
 
 
使用下面的代碼創(chuàng)建accordion元素,自定義它們的設(shè)置,并實現(xiàn)框架/頁面之間的導航。
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)建具有標題按鈕的流暢設(shè)計表單
下面的示例展示了如何在代碼中添加和設(shè)置主要的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交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網(wǎng)安備
            50010702500608號
渝公網(wǎng)安備
            50010702500608號
             
            
 客服熱線
客服熱線