创建带有 WPF 部分的选项卡式侧边栏

Posted 2023-02-22

【中文标题】创建带有 WPF 部分的选项卡式侧边栏

【英文标题】：Create Tabbed Sidebar with sections WPF

【发布时间】：2011-08-26 06:24:27

【问题描述】：

我正在尝试创建一个带有部分的选项卡式侧边栏，如下面的 WPF。我考虑过几种方法，但有没有更简单、更优雅的方法呢？

方法一：列表框

使用 ListBox 并将 SelectedItem 绑定到一个值，右侧的内容控件将绑定到该值。为了区分标题和部分，我使用了 DataTemplate 选择器。

---

方法 2：RadioBUtton/复选框/切换按钮

使用单选按钮，我将所选项目绑定到内容控件。但是，由于 WPF 错误，我将不得不使用值转换器将它们链接在一起。

---

【问题讨论】：

如果你的侧边栏是分层的，为什么不在 Approach1 中使用 TreeView 而不是 ListBox？

您可以禁用树视图的展开/折叠吗？

【参考方案1】：

为此添加更多样式，我认为它可以很好地工作

    <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>

【讨论】：

我怎么没想到

【参考方案2】：

这里还有一些想法：

（可能是最理想的）使用树视图和模板父子隐藏展开按钮。 This 应该可以帮助您弄清楚如何隐藏它们。

不要使用 1 个列表框，而是使用多个列表框，每个列表框代表不同类别的选项。如果需要，您可以使用相同的模板或不同的模板。此外，我会将标题保留在列表框之外，并将其设置为标签或位于列表视图上方的任何内容。您可以调整列表框上的边距以获得像树视图一样的父/子缩进。