Skip to main content
BuyLog In
WinForms Controls
Search in…
Docs > Controls and Libraries > Messages, Notifications, and Dialogs > Flyout Panel
All docs
V24.1
WinForms Controls
.NET/.NET Core Support
Prerequisites
What's Installed
Build an Application
Controls and Libraries
Forms and User Controls
Messages, Notifications, and Dialogs
XtraMessageBox
Input Box
XtraDialog
Flyout Dialog
File and Folder Browsers
Flyout Panel
Alert Windows
Toast Notification Manager
HTML and CSS Templates in Messages and Dialogs
Editors and Simple Controls
Ribbon, Bars and Menu
Application UI Manager
Docking Library
Data Grid
Vertical Grid
Property Grid
Pivot Grid
Tree List
Gantt Control
Chart Control
Diagrams
Gauges
Map Control
Scheduler
Spreadsheet
Rich Text Editor
Spell Checker
Form Layout Managers
Navigation Controls
Printing-Exporting
PDF Viewer
Reporting
Office File API
Snap
TreeMap Control
Sunburst Control
Sankey Diagram Control
Heatmap Control
Common Features
Security Considerations
UI Templates
Desktop & Web App UI Framework (Powered by EF Core)
Get More Help
API Reference
Download CHM

Flyout Panel

  • 5 minutes to read

FlyoutPanel is a container that you can show in a position relative to a linked control. The panel can stretch across its parent container, supports animation effects and displays an optional beak element.

**Regular Flyout Panel**

Regular Flyout Panel

**Beak Flyout Panel**

Beak Flyout Panel

On-Form Access

When you drop a Flyout Panel from the Visual Studio Toolbox onto a form, the panel automatically receives a child FlyoutPanelControl container. Unlike the panel itself, which is borderless, this container has borders painted according to the current application skin. If you need no borders, remove this container and place custom controls directly onto a panel.

FlyoutPanel - InnerContainer

If you do not remove this inner container, you will automatically select it every time you click a panel. To select the FlyoutPanel itself, right-click it and choose “Select ‘<your_panel_name>’”. Then, you can utilize the panel’s smart tag, which provides access to most relevant panel options.

FlyoutPanel - OnForm Access

Alternatively, you can press the ESC key.

Panel Owner

A newly added panel reminds you to specify its FlyoutPanel.OwnerControl property.

FlyoutPanel - Parent Reminder

A Flyout Panel must have a parent UI element at all times, since a panel only appears on screen relative to its parent. Use the panel’s smart tag to set its parent.

FlyoutPanel - Set a Parent

A Flyout Panel must have a form, a user control, or a regular panel as a parent. Primitive UI elements (buttons, editors, labels, etc.) should be parents of beak panels only.

Alignment

Once you have set a panel parent, use the FlyoutPanel.Options.AnchorType property to set a relative position for the panel. A panel with Top, Right, Bottom, and Left anchor types stretches across its parent container.

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

FlyoutPanel - Stretch

The TopLeft and TopRight anchor types align a panel to the top corners of its parent. In these modes, Flyout Panels do not stretch. Additionally, you can shift the panel inwards by setting horizontal and vertical offsets (the FlyoutPanelOptions.HorzIndent and FlyoutPanelOptions.VertIndent properties).

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

FlyoutPanel - TopRight Anchor

Finally, the Manual anchor type allows you to align a Flyout Panel to any position relative to the owner control’s top left corner. Utilize the FlyoutPanelOptions.Location property to specify panel coordinates in this manual mode.

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

FlyoutPanel - Manual Anchor

Show and Hide Flyout Panels

Flyout Panels are initially hidden. To display a panel, call its FlyoutPanel.ShowPopup method.

flyoutPanel1.ShowPopup();

The optional method parameter allows you to skip animation effects and display the panel immediately.

flyoutPanel1.ShowPopup(true);

If the FlyoutPanelOptions.CloseOnOuterClick property equals true, end users will be able to hide a panel by clicking anywhere outside it. Otherwise, you will need to call the FlyoutPanel.HidePopup method to close the panel.

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

Beak Panels

Call the FlyoutPanel.ShowBeakForm method to display a beak panel instead of a regular panel. To hide this panel, utilize the FlyoutPanel.HideBeakForm method.

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

OfficeNavBar - Beak Panel

Beak panels have a few minor differences when compared to standard Flyout Panels.

  • Beak panels should accept simple controls (buttons, editors, labels, etc.) as parents (the FlyoutPanel.OwnerControl property).
  • Beak panels ignore the FlyoutPanelOptions.AnchorType property and are displayed in a default position (above the related UI element, the beak is at the form’s bottom). The beak form tends to be displayed in its entirety, so the position of the beak and/or the form itself may vary due to insufficient free space. To force the beak form to be displayed at a specific location, use the FlyoutPanel.ShowBeakForm method overloads that take location as a parameter.
  • If animation is enabled, it is always the Fade animation, regardless of the FlyoutPanelOptions.AnimationType setting.

Animation

Use the FlyoutPanelOptions.AnimationType property to select whether Fade or Slide animation effects should be applied when a panel’s visibility changes.

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

FlyoutPanel - Slide and Fade

To show and hide flyout panels with no animation, call the FlyoutPanel.ShowPopup, FlyoutPanel.ShowBeakForm, FlyoutPanel.HidePopup, and FlyoutPanel.HideBeakForm method overloads with the “immediate” parameter set to true.

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

For beak panels, the FlyoutPanelOptions.AnimationType property has no effect as they support Fade animation only. Also, it is recommended that you utilize Fade animation for regular Flyout Panels with manual alignment.

Button Panel

You can supply a Flyout Panel with push and/or check buttons.

FlyoutPanel - Buttons

Buttons are placed inside a button panel that becomes visible if the FlyoutPanelButtonOptions.ShowButtonPanel property equals true. This property (as well as the others that affect the button panel) is accessed from the FlyoutPanel.OptionsButtonPanel section.

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

To add buttons, invoke the Flyout Panel smart tag and click “Edit Buttons”. In the collection editor dialog that appears, click “Add” to create buttons and utilize the property grid to the dialog’s right to customize button settings (caption, image, button type, etc.).

FlyoutPanel - Button Panel

To respond to end-user clicks on Flyout Panel buttons, handle the FlyoutPanel.ButtonClick event as shown in the following sample.

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;
    }
}