[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Collapse]Application UI Manager
    [Expand]Widget View
    [Collapse]WindowsUI View
     [Collapse]Getting Started
       How To: Create a Message Box Flyout With User Control
       How To: Create a Modal Message Box Flyout
       How To: Create a Page Container
       How To: Create a PageGroup Container
       How To: Create a Pop-up Flyout
       How To: Create a SlideGroup Container
       How To: Create a SplitGroup Container
       How To: Create a TabbedGroup Container
       How To: Create a TileContainer
       How To: Pass Specific Data when Navigating Through Containers
       How To: Create Content Containers Hierarchy
      Content Containers
      Navigation Bars
      WindowsUI Buttons
      Search Panel
      Application Hierarchy and Module Navigation
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How To: Create a Pop-up Flyout

This example demonstrates how to create a Windows8-like pop-up via a Flyout.

  1. Create a new WindowsUI View application or open an existing one.
  2. Open a DocumentManager's context menu and run the Designer.
  3. Switch to the 'Elements' section and select 'Content Containers'. Click the 'Add New Container' button and choose 'Flyout' from the drop-down list.

  4. In the Flyout's properties, change its name to popupFlyout. By default, a Flyout is displayed as a message box, so set its IFlyoutDefaultProperties.Style property to FlyoutStyle.Popup.

  5. Now create a Document for the Flyout to display. In Visual Studio's Solution Explorer window, right click your project and select 'Add', then 'Add New Item' and choose a User Control. Change its name to ucPopup and click 'OK'.

    In this example, the pop-up will display a WindowsUIButtonPanel with three buttons. You can drop other components to your user control.

  6. Build the solution and make sure that there are no errors. Now go back to the Document Manager Designer. Open its 'Elements' section, choose 'Documents' and click the 'Populate' button. This will force the Document Manager to search for included user controls and add related Documents. In our case, a Document related to the ucPopup.cs user control appears. Finally, call the BaseView.AddDocument method and pass a new ucPopup instance to this method as a parameter. See the Documents topic for more info.

    Note that after you click the 'Populate' button, a Tile is displayed for the automatically generated Document. You do not need this Tile, and can safely remove it in the Designer's 'Elements' section.

  7. Change the Document's name to popupDocument and assign it to the Flyout.Document property.

  8. Lastly, you only need to show the popup Flyout. In this example the Flyout is displayed when an end-user checks a Tile via a right-click. To do so, handle the WindowsUIView.TileCheckedChanged event and type in the following code.

    Note that unlike in the How To: Create a Modal Message Box Flyout example, the WindowsUIView.ActivateContainer method is used to display a Flyout. Do not use the WindowsUIView.ShowFlyoutDialog method if your Flyout contains a Document within it.

  9. Run the application and check any Tile. To close a popup Flyout, click anywhere outside of it, or press the 'Esc' button. The image below shows the result.

Expanded Code Sample

The following code illustrates how to create a pop-up flyout at runtime.

Is this topic helpful?​​​​​​​