Create Tab-Menu with Buttons

Question

im wondering, how can i create a menu like this (image below) in C# WebForms, as i been looking it seems like a tabs or something but they dont use tabs, i wonder how can i do that with the components provide on VS, the idea is that when a user clicks on a button in changes only the part below the controls, wich component they use ? hope you can help me. Thanks

In the second image a menu is at the top, the menu control panel (apparently it is a panel, still not sure) in this content changes depending on the selected button, works like tab displays the contents of the selected button, I want to replicate this operating mode without using tabs for visual Studio since the interface is very different

Answer 1

What will be best depends a lot on how closely you want to mimick the site you mention.

There really are two parts to decide on:

• The look of the Menu
• The workings of the content below

Here is a solution, that uses a regular TabControl to hold all the content in regular TabPages.

You would layout and script as usual, including the pages' Texts and ImageIndices.

Then you add a FlowLayoutPanel to the form and the code below.

The initMenu method will then create a RadioButton styles as a Button comple with Text and Image for each TabPage. It also makes the Button for the last page align to the right and of course it selects the appropriate page when clicked.

private void Form2_Load(object sender, EventArgs e)
{
    initMenu(tabControl1, flp_menu);
}


void initMenu(TabControl TAB, FlowLayoutPanel FLP)
{
    FLP.BringToFront();
    FLP.Location = TAB.Location;
    FLP.Width = TAB.Width;
    FLP.Height = TAB.ItemSize.Height + 1;
    RadioButton bt;
    foreach (TabPage tp in TAB.TabPages)
    {
        bt = new RadioButton();
        bt.Appearance = Appearance.Button;
        bt.FlatStyle = FlatStyle.Flat;
        bt.FlatAppearance.CheckedBackColor = Color.Gold;
        // if you color-code the pages this may be nice, too:
        // bt.FlatAppearance.CheckedBackColor = tp.BackColor;
        bt.Image = imageList1.Images[tp.ImageIndex];
        bt.ImageAlign = ContentAlignment.MiddleLeft;
        bt.TextAlign = ContentAlignment.MiddleRight;
        bt.Margin = new Padding(4, 2, 0, 0);
        bt.Text = "       " + tp.Text + "   ";
        bt.AutoSize = true;
        bt.Tag = tp;
        FLP.Controls.Add(bt);
        bt.CheckedChanged += (sender, e) =>
           { TAB.SelectedTab = (TabPage)((RadioButton)(sender)).Tag; };

    }
    bt = (RadioButton) FLP.Controls[FLP.Controls.Count - 1];
    int right = FLP.Controls[FLP.Controls.Count - 2].Right;
    bt.Margin = new Padding(FLP.Width - right - bt.Width - 6, 2, 2, 3);

    FLP.Resize += (sender, e) =>
        {
          bt = (RadioButton)FLP.Controls[FLP.Controls.Count - 1];
          right = FLP.Controls[FLP.Controls.Count - 2].Right;
          bt.Margin = new Padding(FLP.Width - right - bt.Width - 6, 2, 2, 3);
        };
}

Here is a screenshot where you can see that the normal tabs are all covered by the menu panel:

Tab Controls are a simple way to hold several pages ready, both to display to the user and also for the developer to layout and code.

If you'd rather not live with the small border around the Tab control, you can use the little trick I have described here and here. It uses the TabControl only for the developer; at runtime the TabControl is hidden and the selected content is moved to another container. To make it work on needs another container obviously, and also one panel per page to hold all the content of the page, since TabPages can only live in a TabControl..