Creating DropDownControl In C#

 
Introduction

Well, what is DropDownControl?

 

Actually, it is a form having BorderStyle: None, and which can be shown consisting of as many controls as needed for specific operations. Nowdays, all the popular software uses DropDownControl to improve their software quality. Take a look at the Paint application in Windows. Click on the File option. It drops the list of controls, like New,Open,Save,Print etc. Alternatively, open Microsoft Word. See the following image that shows text effects in DropDownControl.

 

In this article, we will create a DropDownControl for a click on a button.

So, how does it work?

Well, it's so simple. Display a DropDownForm when clicking on Button. Once form is shown, invoke the Parent Form events, like Move, GotFocus, Activated, Click etc. When these events are generated, just close the DropDownForm.

 

Procedure 

 

Step 1 : Start Visual Studio and create a new Windows Forms Application in C#. The created form's name could be Form1.

Step 2 : Add another form with the name DropDownForm and set the following properties to it. 

                 

Name	DropDownForm
ControlBox	false
FormBorderStyle	None
ShowIcon	false
ShowInTaskbar	false
StartPosition	Manual

 

Now, Design your form. Add the components to DropDownForm that you wish. I have added Paint application like components. I have designed my form with many Panels and Buttons. You can add custom controls to design a form.

• Creating Custom Controls In C# 

See the above images.

Download the source code.

Now, you have designed your form.

 

Step 3 : Add Form Load event to DropDownForm and set it to activate. 

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    this.Activate();
}

Now, move to the Form1.

 

Step 4: Declare the DropDownForm object (I am using _dropDownForm) and Boolean variable for identifying if the DropDownForm is displayed or disposed.

public Boolean isShown = false;

DropDownForm _dropDownForm;

Step 5 : Drag and drop the Button onto Form1. Add Click events to it.  

      private void button1_Click(object sender, EventArgs e)
      {
          if (isShown == true)
          {
              _dropDownForm.Close();
              isShown = false;
          }
          else if (isShown == false)
          {
              _dropDownForm = new DropDownForm(this);
              _dropDownForm.Location = new Point(this.Location.X + button1.Location.X + 8,  this.Location.Y + button1.Location.Y + 30);
              _dropDownForm.Show();
              isShown = true;
              _dropDownForm.LostFocus += new EventHandler(_dropDownForm_LostFocus);
          }
      }

private void _dropDownForm_LostFocus(object sender, EventArgs e)
      {
          if (isShown)
          {
              _dropDownForm.Close();
              isShown = false;
          }
      }

What's this?

• If isShown is equal to true, then close the DropDownForm.
• If it is false, then initialize the object by calling its class name.
• Set its location under your added button by adding Parent Form locations & button height.
• Then, show the Form & set isShown to true.
• Then, add LostFocus event to the object of DropDownForm.
• If focus is lost, just close the displayed form and set isShown to false. 

Step 6 : Now, add Move, GotFocus, Click, Activated events to the Form1 or Parent Form and add the following code to all these events.

protected override void OnMove(EventArgs e)
{
    base.OnMove(e);
    if (isShown)
    {
        _dropDownForm.Close();
        isShown = false;
    }
}

protected override void OnGotFocus(EventArgs e)
{
    base.OnGotFocus(e);
    if (isShown)
    {
        _dropDownForm.Close();
        isShown = false;
    }
}

protected override void OnClick(EventArgs e)
{
    base.OnClick(e);
    if (isShown)
    {
        _dropDownForm.Close();
        isShown = false;
    }
}


protected override void OnActivated(EventArgs e)
{
    base.OnActivated(e);
    if (isShown)
    {
        _dropDownForm.Close();
        isShown = false;
    }
}

Step 7 : Debug your project and make any changes to your DropDownForm for design. 

 

DropDownControl with Tab 

 

  

 

 

Do you know what exactly is the RibbonBar?

 

Actually, it is a TabControl, we all know. You can see that old Microsoft Office packages, like 2007,2010 etc. provided the RibbonBar with DropDownControl. Here, we already created our own DropDownControl. Now, it's the time to display DropDownControl with Tab. This can be achieved by setting first tab of TabControl (means index 0) to fixed for File option. Perform all the above actions except Step 5. Replace Step 5 to the following:

 

Step 8 : Add TabControl to Form1 and Add MouseDown event to it. 

private void tabControl1_MouseDown(object sender, MouseEventArgs e)
{
    Rectangle rect = tabControl1.GetTabRect(0);

    if (rect.Contains(e.Location))
    {
        Size size = this.Size;

        if (isShown == true)
        {
            _dropDownForm.Dispose();
            isShown = false;

            tabControl1.SelectedIndex = OldSelTabIndex;
        }
        else if (isShown == false)
        {
            _dropDownForm = new TabDropDownForm(this);
            _dropDownForm.Location = new Point(this.Location.X + rect.X + 8, this.Location.Y + rect.Y + 30);
            tabControl1.SelectedIndex = OldSelTabIndex;
            _dropDownForm.Show();
            isShown = true;
            _dropDownForm.LostFocus += new EventHandler(_dropDownForm_LostFocus);
        }
    }
    else
    {
        OldSelTabIndex = tabControl1.SelectedIndex;
    }
}


private void _dropDownForm_LostFocus(object sender, EventArgs e)
{
    if (isShown)
    {
        _dropDownForm.Close();
        isShown = false;
    }
}

Where OldSelTabIndex is the int type to hold the last selected index of tabControl, if the position of the mouse pressed button is within the first tab of tabControl, then it displays the DropDownForm; otherwise set OldSelTabIndex to tabControl SelectedIndex. Once DropDownForm is shown, set the isShown to true & set tabControl SelectedIndex to OldSelTabIndex. Download the source for better understanding.

 

Congratulations! You have created your own simple RibbonBar in C#.

You know, RibbonBar has a custom window. You can also create a customized window. By creating a customized window, you can add controls to the Top layer. Don't know how to create Custom Windows Forms ? Go to :

• Customizing Windows Forms In C#