如何实现侧边栏按钮切换标签页？基于Bunifu UI的多模式切换需求

Hey Bruno, nice job getting your sidebar UI set up with Bunifu! Let’s break down a few straightforward ways to implement that content switching without popping new windows—these are all approaches I’ve used in production apps, so they’re tried and tested.

Approach 1: Toggle Panel Visibility (Quick & Simple) #

This is the easiest method for smaller apps or less complex content. You’ll create separate panels for each display mode, then show/hide them when buttons are clicked.

Setup Steps: #

1. Drag 4-5 Panel controls onto your form, and place all the content for each display mode inside its own panel.
2. By default, set only your first panel’s Visible property to true—leave the rest as false.
3. Wire up click events for each Bunifu sidebar button:

// Button 1 click handler
private void bunifuSidebarBtn1_Click(object sender, EventArgs e)
{
    // Show the first panel, hide all others
    panelMode1.Visible = true;
    panelMode2.Visible = false;
    panelMode3.Visible = false;
    panelMode4.Visible = false;

    // Optional: Highlight the active button to give feedback
    SetActiveButton(bunifuSidebarBtn1);
}

// Button 2 click handler
private void bunifuSidebarBtn2_Click(object sender, EventArgs e)
{
    panelMode1.Visible = false;
    panelMode2.Visible = true;
    panelMode3.Visible = false;
    panelMode4.Visible = false;

    SetActiveButton(bunifuSidebarBtn2);
}

// Repeat this pattern for your remaining buttons

// Helper method to style active/inactive buttons
private void SetActiveButton(Bunifu.UI.WinForms.BunifuButton activeButton)
{
    // Reset all buttons to default style
    bunifuSidebarBtn1.FillColor = Color.FromArgb(50, 50, 50);
    bunifuSidebarBtn2.FillColor = Color.FromArgb(50, 50, 50);
    bunifuSidebarBtn3.FillColor = Color.FromArgb(50, 50, 50);
    bunifuSidebarBtn4.FillColor = Color.FromArgb(50, 50, 50);

    // Highlight the active button
    activeButton.FillColor = Color.FromArgb(0, 122, 204);
}

Best For: Simple UIs where content doesn’t change frequently, or you need a quick implementation.

Approach 2: Customize Bunifu TabControl #

Bunifu’s BunifuTabControl is built for this kind of content switching—you just hide the default tab header and use your sidebar buttons to trigger tab changes.

Setup Steps: #

1. Add a BunifuTabControl to your form, then add 4-5 TabPage instances (one for each display mode).
2. Hide the default tab header: set bunifuTabControl1.TabHeaderVisible = false;
3. Link your sidebar buttons to switch tabs:

private void bunifuSidebarBtn1_Click(object sender, EventArgs e)
{
    bunifuTabControl1.SelectedIndex = 0; // Switch to first tab
    SetActiveButton(bunifuSidebarBtn1);
}

private void bunifuSidebarBtn2_Click(object sender, EventArgs e)
{
    bunifuTabControl1.SelectedIndex = 1; // Switch to second tab
    SetActiveButton(bunifuSidebarBtn2);
}

// Repeat for other buttons

Best For: Content that’s naturally modular, or if you want to use built-in tab events (like TabPage.Enter) to load data when a mode is selected.

Approach 3: Load UserControls Dynamically (Scalable) #

For larger apps with complex content, using UserControl instances keeps your code organized and decoupled. Each display mode gets its own UserControl, which you load into a main container panel when a button is clicked.

Setup Steps: #

1. Create 4-5 UserControls (right-click your project → Add → User Control) and design each one for a display mode.
2. Add a single Panel (name it mainContentPanel) to your form—this will be the container for your UserControls.
3. Add click handlers to load the appropriate UserControl:

// Optional: Cache UserControl instances to avoid re-creating them every time
private UserControl _mode1UC, _mode2UC, _mode3UC, _mode4UC;

private void Form1_Load(object sender, EventArgs e)
{
    // Initialize UserControls once when the form loads
    _mode1UC = new Mode1UserControl();
    _mode2UC = new Mode2UserControl();
    _mode3UC = new Mode3UserControl();
    _mode4UC = new Mode4UserControl();
}

private void LoadActiveContent(UserControl contentUC)
{
    // Clear any existing content in the main panel
    mainContentPanel.Controls.Clear();

    // Configure the UserControl to fill the panel
    contentUC.Dock = DockStyle.Fill;
    contentUC.Visible = true;

    // Add it to the container
    mainContentPanel.Controls.Add(contentUC);
}

private void bunifuSidebarBtn1_Click(object sender, EventArgs e)
{
    LoadActiveContent(_mode1UC);
    SetActiveButton(bunifuSidebarBtn1);
}

private void bunifuSidebarBtn2_Click(object sender, EventArgs e)
{
    LoadActiveContent(_mode2UC);
    SetActiveButton(bunifuSidebarBtn2);
}

// Repeat for other buttons

Best For: Large-scale apps with complex UI logic, where you want to keep each display mode’s code separated.

Pro Tip: If your content requires data loading (like fetching from a database), put that logic in the UserControl.Load event or TabPage.Enter event—this way it only runs when the mode is selected, keeping your UI responsive.

内容的提问来源于stack exchange，提问作者Bruno J.