Question

我想知道，我怎样才能在C＃WebForms中创建这样的菜单（下图），因为我一直在看它似乎是一个标签或者其他东西，但是他们不使用标签，我想知道我怎么能用组件提供在VS上，我们的想法是，当用户点击按钮时，只更改控件下方的部分，他们使用哪个组件？希望您能够帮助我。感谢

在第二张图片中，菜单位于顶部，菜单控制面板（显然是一个面板，仍然不确定），此内容根据所选按钮的不同而变化，工具如选项卡显示所选按钮的内容，我想复制这种操作模式，而不使用Visual Studio的选项卡，因为界面非常不同

enter image description here

Answer 1

什么是最好的取决于你想要模仿你提到的网站的接近程度。

确实有两个部分需要决定：

菜单的外观
以下内容的工作原理

以下是一种解决方案，它使用常规TabControl来保存常规TabPages中的所有内容。

您可以照常布局和编写脚本，包括页面＆＃39;文本和ImageIndices。

然后在表单和下面的代码中添加FlowLayoutPanel。

initMenu方法将为每个TabPage创建一个RadioButton样式作为按钮补充文本和图像。它还使最后一页的按钮向右对齐，当然它在单击时选择适当的页面。

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);
        };
}

以下是一个屏幕截图，您可以看到菜单面板覆盖了正常选项卡：

radioMenu4Tab

选项卡控件是一种准备好保存多个页面的简单方法，既可以向用户显示，也可以为开发人员显示布局和代码。

如果你不想使用Tab控件周围的小边框，你可以使用我所描述的小技巧here和here。它仅对开发人员使用TabControl;在运行时，TabControl被隐藏，所选内容被移动到另一个容器。要使其工作显然需要另一个容器，并且每页还有一个面板来保存页面的所有内容，因为TabPages只能存在于TabControl中..

使用按钮创建选项卡菜单

1 个答案: