Create Tabbed Sidebar with sections WPF

Question

I'm trying to create a tabbed sidebar with sections, like the following in WPF. There are a few approaches that I have considered, but is there a simpler and more elegant way to do it?

Approach 1: ListBox

Using a ListBox and binding SelectedItem to a value, which the content control on the right binds to. To differentiate between the header and the sections, I use a DataTemplate selector.

---

Approach 2: RadioBUtton/Check Boxes / ToggleButtons

Using radiobuttons, I bind the selected item to the content control. However, due to the WPF bug, I will have to link them together using value converters.

---

Answer 1

Here are some more ideas:

1. (Probably the most ideal) Use a treeview and template the parents and children to hide the expand button. This should help you figure out how to hide them.

2. Instead of using 1 listbox, use several listboxes with each representing a different category of options. You can use the same template or different ones if you want. Also, I would keep the header out of the listbox and have it be a Label or whatever that sits above the list view. You could adjust the margin on the list box to get that parent/child indention like the tree view.

Answer 2

Add a little more styling to this and I think it could work pretty well

    <TabControl TabStripPlacement="Left">
        <TabControl.Resources>
            <Style TargetType="TabItem" x:Key="SideBarSectionStyle">
                <Setter Property="IsEnabled" Value="False" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="Foreground" Value="LightGreen" />
            </Style>
        </TabControl.Resources>

        <TabItem Header="Section A" Style="{StaticResource SideBarSectionStyle}" />
        <TabItem Header="Tab Item 1" IsSelected="True" />
        <TabItem Header="Tab Item 2" />
        <TabItem Header="Tab Item 3" />
        <TabItem Header="Tab Item 4" />
        <TabItem Header="Tab Item 5" />
        <TabItem Header="Section B" Style="{StaticResource SideBarSectionStyle}" />
        <TabItem Header="Tab Item 6" />
        <TabItem Header="Tab Item 7" />
        <TabItem Header="Tab Item 8" />
        <TabItem Header="Tab Item 9" />
    </TabControl>