彈出面板

立即下載DevExpress WinForms

FlyoutPanel是一個(gè)容器，您可以在相對(duì)于鏈接控件的位置上顯示它。面板可以橫跨其父容器拉伸，支持動(dòng)畫(huà)效果，并顯示一個(gè)可選的喙元素。

表單查閱

當(dāng)您將彈出面板從Visual Studio工具箱拖放到表單中時(shí)，該面板將自動(dòng)接收子FlyoutPanelControl容器。不像面板本身是無(wú)邊界的，這個(gè)容器有根據(jù)當(dāng)前應(yīng)用程序皮膚繪制的邊界，如果不需要邊框，請(qǐng)刪除此容器并將自定義控件直接放置在面板上。

如果不刪除這個(gè)內(nèi)部容器，則每次單擊面板時(shí)都會(huì)自動(dòng)選擇它。選擇FlyoutPanel本身，右鍵單擊它并選擇“Select ‘<your_panel_name>’”，然后您可以利用面板的智能標(biāo)記，它提供了對(duì)大多數(shù)相關(guān)面板選項(xiàng)的訪問(wèn)

或者按“ESC”鍵。

面板所有者

新添加的面板會(huì)提醒您指定其FlyoutPanel.OwnerControl屬性。

一個(gè)彈出面板必須始終有一個(gè)父UI元素，因?yàn)槊姘逯幌鄬?duì)于它的父UI元素出現(xiàn)在屏幕上，使用面板的智能標(biāo)簽來(lái)設(shè)置其父面板。

彈出面板必須有表單、用戶控件或常規(guī)面板作為父面板，原始UI元素(按鈕、編輯器、標(biāo)簽等)應(yīng)該只作為喙面板的父元素。

對(duì)齊

一旦設(shè)置了面板父類，使用FlyoutPanel.Options.AnchorType屬性來(lái)設(shè)置面板的相對(duì)位置，具有Top、Right、Bottom和Left錨類型的面板在其父容器上拉伸。

C#：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Top;

VB.NET：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Top

TopLeft和TopRight錨類型將面板與其父面板的上角對(duì)齊。在這些模式下，彈出面板不會(huì)拉伸，此外，您可以通過(guò)設(shè)置水平和垂直偏移量(FlyoutPanelOptions.HorzIndent 和FlyoutPanelOptions.VertIndent屬性)向內(nèi)移動(dòng)面板。

C#：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.TopRight;
flyoutPanel1.Options.HorzIndent = 20;
flyoutPanel1.Options.VertIndent = 10;

VB.NET：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.TopRight
flyoutPanel1.Options.HorzIndent = 20
flyoutPanel1.Options.VertIndent = 10

最后，Manual錨類型允許您將彈出面板對(duì)齊到相對(duì)于所有者控件左上角的任何位置，使用FlyoutPanelOptions.Location屬性來(lái)指定手動(dòng)模式下的面板坐標(biāo)。

C#：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Manual;
flyoutPanel1.Options.Location = new System.Drawing.Point(100, 100);

VB.NET：

flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Manual
flyoutPanel1.Options.Location = New System.Drawing.Point(100, 100)

顯示和隱藏彈出面板

彈出面板最初是隱藏的，要顯示面板請(qǐng)調(diào)用它的FlyoutPanel.ShowPopup方法。

C#：

flyoutPanel1.ShowPopup();

VB.NET：

flyoutPanel1.ShowPopup()

可選的方法參數(shù)允許您跳過(guò)動(dòng)畫(huà)效果并立即顯示面板。

C#：

flyoutPanel1.ShowPopup(true);

VB.NET：

flyoutPanel1.ShowPopup(True)

如果FlyoutPanelOptions.CloseOnOuterClick屬性等于true，最終用戶將能夠通過(guò)單擊面板外部的任何地方來(lái)隱藏面板。否則，您將需要調(diào)用 FlyoutPanel.HidePopup方法來(lái)關(guān)閉面板。

C#：

flyoutPanel1.HidePopup();
// Hide immediately
flyoutPanel1.HidePopup(true);

VB.NET：

flyoutPanel1.HidePopup()
' Hide immediately
flyoutPanel1.HidePopup(True)

Beak面板

調(diào)用FlyoutPanel.ShowBeakForm方法來(lái)顯示Beak面板而不是普通面板，要隱藏這個(gè)面板，使用FlyoutPanel.HideBeakForm 方法。

C#：

flyoutPanel1.OwnerControl = officeNavigationBar1;
flyoutPanel1.ShowBeakForm();

VB.NET：

flyoutPanel1.OwnerControl = officeNavigationBar1
flyoutPanel1.ShowBeakForm()

與標(biāo)準(zhǔn)彈出面板相比，Beak面板有一些細(xì)微的差異。

• Beak面板應(yīng)該接受簡(jiǎn)單的控件(按鈕、編輯器、標(biāo)簽等)作為父控件(FlyoutPanel.OwnerControl屬性)。
• Beak面板忽略FlyoutPanelOptions.AnchorType屬性，并顯示在默認(rèn)位置(在相關(guān)UI元素之上，喙形位于表單底部)。Beak傾向于整體顯示，因此Beak的位置或形式本身可能因自由空間不足而變化。要強(qiáng)制Beak表單顯示在特定位置，請(qǐng)使用FlyoutPanel.ShowBeakForm方法重載，該方法將位置作為參數(shù)。
• 如果啟用了動(dòng)畫(huà)，則始終是淡出動(dòng)畫(huà)，而不管FlyoutPanelOptions.AnimationType設(shè)置如何。

動(dòng)畫(huà)

使用FlyoutPanelOptions.AnimationType屬性來(lái)選擇當(dāng)面板的可見(jiàn)性改變時(shí)是否應(yīng)用Fade或 Slide動(dòng)畫(huà)效果。

C#：

flyoutPanel1.Options.AnimationType = DevExpress.Utils.Win.PopupToolWindowAnimation.Fade;
flyoutPanel1.ShowPopup();

VB.NET：

flyoutPanel1.Options.AnimationType = DevExpress.Utils.Win.PopupToolWindowAnimation.Fade
flyoutPanel1.ShowPopup()

要顯示和隱藏沒(méi)有動(dòng)畫(huà)的彈出面板，調(diào)用 FlyoutPanel.ShowPopup、FlyoutPanel.ShowBeakForm、FlyoutPanel.HidePopup和FlyoutPanel.HideBeakForm方法重載，并將“immediate”參數(shù)設(shè)置為true。

C#：

flyoutPanel1.ShowPopup(true);
flyoutPanel.ShowBeakForm(true);

VB.NET：

flyoutPanel1.ShowPopup(True)
flyoutPanel.ShowBeakForm(True)

對(duì)于Beak面板，F(xiàn)lyoutPanelOptions.AnimationType屬性沒(méi)有效果，因?yàn)樗鼈冎恢С值鰟?dòng)畫(huà)。此外，建議您使用淡出動(dòng)畫(huà)的常規(guī)彈出面板與手動(dòng)對(duì)齊。

按鈕面板

您可以提供一個(gè)帶有按鈕或檢查按鈕的彈出面板。

按鈕被放置在一個(gè)按鈕面板中，如果FlyoutPanelButtonOptions.ShowButtonPanel屬性等于true，這個(gè)按鈕面板就會(huì)變得可見(jiàn)，這個(gè)屬性(以及其他影響按鈕面板的屬性)可以從FlyoutPanel.OptionsButtonPanel部分訪問(wèn)。

C#：

flyoutPanel1.OptionsButtonPanel.ShowButtonPanel = true;
flyoutPanel1.OptionsButtonPanel.ButtonPanelLocation = FlyoutPanelButtonPanelLocation.Bottom;

VB.NET：

flyoutPanel1.OptionsButtonPanel.ShowButtonPanel = True
flyoutPanel1.OptionsButtonPanel.ButtonPanelLocation = FlyoutPanelButtonPanelLocation.Bottom

要添加按鈕，調(diào)用彈出面板智能標(biāo)記并單擊“Edit Buttons”。在出現(xiàn)的集合編輯器對(duì)話框中，單擊“Add”來(lái)創(chuàng)建按鈕，并利用對(duì)話框右側(cè)的屬性網(wǎng)格來(lái)自定義按鈕設(shè)置(標(biāo)題、圖像、按鈕類型等)。

要響應(yīng)最終用戶在FlyoutPanel按鈕上的單擊，請(qǐng)?zhí)幚鞦lyoutPanel.ButtonClick事件，如下面的示例所示。

C#：

private void flyoutPanel1_ButtonClick(object sender, DevExpress.Utils.FlyoutPanelButtonClickEventArgs e) {
string tag = e.Button.Tag.ToString();
switch(tag) {
case "accept":
// . . .
break;
case "decline":
// . . .
(sender as FlyoutPanel).HidePopup();
break;
}
}

VB.NET：

Private Sub flyoutPanel1_ButtonClick(ByVal sender As Object, ByVal e As DevExpress.Utils.FlyoutPanelButtonClickEventArgs)
Dim tag As String = e.Button.Tag.ToString()
Select Case tag
Case "accept"
' . . .
Case "decline"
' . . .
TryCast(sender, FlyoutPanel).HidePopup()
End Select
End Sub