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

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>