Xin chào các bạn, bài viết hôm nay mình sẻ tiếp tục hướng dẫn các bạn cách sử dụng Flyout Dialog trên lập trình c#, Winform DevExpress.

[DEVEXPRESS] How to Using Flyout Dialog C#, Winform

Ở bài này, mình sẽ demo một ứng dụng hiển thị Form Login bằng cách sử dụng Flyout Dialog của Devexpress.

Giao diện login mình thiết kế như hình bên dưới:

Video step by step sử dụng Flyout Dialog C#:

Bạn nào thấy bài viết có ích, ủng hộ cho mình một sub đăng ký kênh nhé các bạn. <3

Đầu tiên, các bạn tạo cho mình một class với tên: VBFlyoutDialog.cs

using DevExpress.XtraBars.Docking2010.Customization;
using DevExpress.XtraBars.Docking2010.Views.WindowsUI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace VBCustomFlyoutDialog
{
    public class VBFlyoutDialog : FlyoutDialog
    {
        public VBFlyoutDialog(Form form, FlyoutAction action, Control userControl): base(form, action)
        {
            this.Properties.HeaderOffset = 0;
            this.Properties.Alignment = System.Drawing.ContentAlignment.MiddleCenter;
            this.Properties.Style = FlyoutStyle.Popup;
            this.FlyoutControl = userControl;
        }

        public static DialogResult ShowFormPopup(Form form, FlyoutAction action, Control userControl)
        {
            var vbFlyout = new VBFlyoutDialog(form, action, userControl);
            return vbFlyout.ShowDialog();
        }
    }
}

Tiếp đến, các bạn sẽ tạo một UserControl Form Login như hình bên dưới:

Ở usercontrol này, các bạn tạo cho mình 3 control gồm các thông tin: User Name, Password, is Remember.

Code uc_LoginForm.cs:

using DevExpress.XtraEditors;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace VBCustomFlyoutDialog
{
    public partial class uc_LoginForm : DevExpress.XtraEditors.XtraUserControl
    {
       
        public uc_LoginForm(Login login)
        {
            InitializeComponent();
            txtUsername.DataBindings.Add("Text", login, "UserName");
            txtPassword.DataBindings.Add("Text", login, "Password");
            chkRemember.DataBindings.Add("Checked", login, "isRemember");

        }
    }
}

Tiếp đến các bạn, tạo một class Login.cs

namespace VBCustomFlyoutDialog
{
    public class Login
    {
        public string UserName { get; set; }
        public string Password { get; set; }
        public bool isRemember { get; set; }
    }
}

Và cuối cùng, mình sẽ thiết kế Form Main để gọi Dialog Form Login, khi đăng nhập các thông tin sẽ trả dữ liệu về cho Form Chính.

Ở đây, chúng ta sẽ sử dụng kỹ thuật DataBinding để lấy dữ liệu thông tin của Form Login Dialog.

Source code Form1.cs:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace VBCustomFlyoutDialog
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnLogin_Click(object sender, EventArgs e)
        {
            var login = new Login();
            var dlg = VBFlyoutDialog.ShowFormPopup(this, null, new uc_LoginForm(login));

            if(dlg == DialogResult.OK)
            {
                lbl_username.Text = login.UserName;
                lblPassword.Text = login.Password;
                lblRemember.Text = login.isRemember.ToString();
            }
        }
    }
}

Thanks for watching!

DOWNLOAD SOURCE