How To: Create a Message Box Flyout With User Control - Devexpress

Jul 21, 2025
4 minutes to read

This example creates a Flyout that contains a Document and an Action.

Create a new WindowsUI View application or open an existing one.
Open the DocumentManager’s context menu and run the Designer.
Switch to the ‘Elements’ section and select ‘Content Containers’. Click the ‘Add New Container’ button and choose ‘Flyout’ from the drop-down list.
Select the newly created Flyout and change its name to userConrolFlyout via the property grid.
In the Visual Studio Solution Explorer window, right click your project and select ‘Add’, then ‘Add New Item’ and choose a User Control. Change its name to ucAddCustomer and click ‘OK’. Add four text boxes and labels onto your user control as shown below:
Switch back to the Document Manager Designer. Open the ‘Elements’ section, choose ‘Documents’ and click the ‘Populate’ button. A document for your user control will be created automatically. Change its name to addCustomerDocument. Note that a corresponding Tile appears as well. You can remove it in the ‘Elements’ - ‘Tiles’ section.
Call the BaseView.AddDocument method and pass a new ucAddCustomer class instance to this method as a parameter. See the Documents topic for more info.
Now pass the created user control to the Flyout. To do so, assign the addCustomerDocument object to the Flyout.Document property.
Add a WindowsUI button to your start-up Content Container. See the WindowsUI Buttons topic for more info.
Next, handle the Content Container’s BaseContentContainer.ButtonClick event. Use the WindowsUIView.ActivateContainer method to display the Flyout.
Launch your application and click the WindowsUI Button. The result should be similar to the following:
Create a FlyoutAction and specify its UIActionPropertiesCore.Caption. Add a standard ‘Cancel’ button to its FlyoutAction.Commands collection.
Add your own custom button by creating a FlyoutCommand class descendant, and overriding the required properties.
Now you can add your custom button to the FlyoutAction.
Launch your application to view the results:
To get which Flyout Button an end-user has clicked, handle the WindowsUIView.FlyoutHidden event.