• <menu id="w2i4a"></menu>
  •
    logo DevExpress WinForm中文手冊

    流暢設計表單

    立即下載DevExpress WinForms

    FluentDesignForm是Windows 10風格的表單，具有以下特點：

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

    提示：Fluent Design Forms不能用作MDI容器。

    新增Fluent Design Forms

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

    將標準表單轉化為Fluent Design Forms

    要將現(xiàn)有表單轉換為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添加到項目中時，它將創(chuàng)建三個控件：

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

    Acrylic 和 Reveal Highlight效果

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

    DevExpress WinForms幫助文檔

    注意：僅當應用程序在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的顯示模式。

    DevExpress WinForms幫助文檔

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

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

    注意：Fluent Design Form會用Minimal模式自動將Hamburger Menu的DockStyle設置為Top，從而將菜單呈現(xiàn)為條形。 在其他dock樣式中，Hamburger Menu呈現(xiàn)為方形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) 在某些外觀中占據(jù)整個表單高度，與標題欄重疊。

    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)或更高版本上運行。

    創(chuàng)建流暢的設計表單與側導航

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

    流暢的設計應用程序與側導航

    使用下面的代碼創(chuàng)建accordion元素，自定義它們的設置，并實現(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

    下面的動畫說明了結果：

    結果

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

    下面的示例展示了如何在代碼中添加和設置主要的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
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();