Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Collapse]Views
    [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
      Windows UI Guidelines
      Content Containers
      Navigation Bars
      WindowsUI Buttons
      Flyouts
      Search Panel
      Designer
      Application Hierarchy and Module Navigation
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
    Documents
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
   [Expand]Examples
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap 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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

How would you rate this topic?​​​​​​​