How To: Create a Message Box Flyout With User Control

• Oct 29, 2020
• 4 minutes to read

The How To: Create a Modal Message Box Flyout and How To: Create a Pop-up Flyout examples demonstrate how to add a Flyout that contains either a Document or a FlyoutAction. In this example, the Flyout contains both a Document and an Action. Such Flyouts are designed to display complex message boxes with user controls and custom buttons.

1. Create a new WindowsUI View application or open an existing one.

2. Open the 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. Select the newly created Flyout and change its name to userConrolFlyout via the property grid.

5. 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:

   

6. 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.

7. 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.

   C#

   public Form1() {
       InitializeComponent();
       windowsUIView1.AddDocument(new ucAddCustomer());
       . . .
   }
   

   VB.NET

   Public Sub Form1()
       InitializeComponent()
       windowsUIView1.AddDocument(New ucAddCustomer())
       . . .
   End Sub
   

8. Now pass the created user control to the Flyout. To do so, assign the addCustomerDocument object to the Flyout.Document property.

   

   C#

   userControlFlyout.Document = addCustomerDocument;
   

   VB.NET

   userControlFlyout.Document = addCustomerDocument
   

9. Add a WindowsUI button to your start-up Content Container. See the WindowsUI Buttons topic for more info.

   

10. Next, handle the Content Container’s BaseContentContainer.ButtonClick event. Use the WindowsUIView.ActivateContainer method to display the Flyout.

    C#

    private void tileContainer1_ButtonClick(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e) {
        windowsUIView1.ActivateContainer(userControlFlyout);
    }
    

    VB.NET

    Private Sub tileContainer1_ButtonClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.ButtonEventArgs)
        windowsUIView1.ActivateContainer(userControlFlyout)
    End Sub
    

11. Launch your application and click the WindowsUI Button. The result should be similar to the following:

    

    As you can see, even if the IFlyoutDefaultProperties.Style property value equals FlyoutStyle.MessageBox, the Flyout is displayed as a pop-up. This occurs because no message box buttons were specified. The easiest way to add message box buttons is to use standard button sets via the Flyout.FlyoutButtons property. Set this property to YesNo and see the result.

    

    C#

    userControlFlyout.FlyoutButtons = MessageBoxButtons.YesNo;
    

    VB.NET

    userControlFlyout.FlyoutButtons = MessageBoxButtons.YesNo
    

    Note that you may want something more flexible than standard button sets. In this example, ‘Yes’ and ‘No’ buttons do not perfectly fit the displayed content. In this case, use FlyoutActions.

12. Create a FlyoutAction and specify its UIActionPropertiesCore.Caption. Add a standard ‘Cancel’ button to its FlyoutAction.Commands collection.

    C#

    FlyoutAction addCustomerAction = new FlyoutAction() { Caption = "Add new customer"};
    public Form1() {
        InitializeComponent();
        . . .
        addCustomerAction.Commands.Add(FlyoutCommand.Cancel);
    }
    

    VB.NET

    Dim addCustomerAction As FlyoutAction = New FlyoutAction()
    
    Public Sub New()
        InitializeComponent()
        closeAppAction.Caption = "Add new customer"
        closeAppAction.Commands.Add(FlyoutCommand.Cancel)
        . . .
    End Sub
    

13. Add your own custom button by creating a FlyoutCommand class descendant, and overriding the required properties.

    C#

    class AddCommand : FlyoutCommand {
        public override string Text {
            get {
                return "Add";
            }
        }
        public override DialogResult Result {
            get {
                return DialogResult.OK;
            }
        }
    }
    

    VB.NET

    Friend Class AddCommand
        Inherits FlyoutCommand
    
        Public Overrides Property Text() As String
            Get
                Return "Add"
            End Get
            Set(ByVal value As String)
            End Set
        End Property
        Public Overrides Property Result() As DialogResult
            Get
                Return DialogResult.OK
            End Get
            Set(ByVal value As DialogResult)
            End Set
        End Property
    End Class
    

14. Now you can add your custom button to the FlyoutAction.

    C#

    addCustomerAction.Commands.Add(new AddCommand());
    

    VB.NET

    addCustomerAction.Commands.Add(New AddCommand())
    

    The last step is to assign your action to the Flyout via the Flyout.Action property.

    C#

    userControlFlyout.Action = addCustomerAction;
    

    VB.NET

    userControlFlyout.Action = addCustomerAction
    

15. Launch your application to view the results:

    

16. To get which Flyout Button an end-user has clicked, handle the WindowsUIView.FlyoutHidden event.

    C#

    private void windowsUIView1_FlyoutHidden(object sender, DevExpress.XtraBars.Docking2010.Views.WindowsUI.FlyoutResultEventArgs e) {
        if(e.Result == System.Windows.Forms.DialogResult.Yes) . . .;
        else . . .;
    }
    

    VB.NET

    Private Sub windowsUIView1_FlyoutHidden(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.WindowsUI.FlyoutResultEventArgs)
        If e.Result = System.Windows.Forms.DialogResult.Yes Then
       ...
        else...
    End Sub