如何在左右拆分 WPF TabControl 的选项卡？

编程问答 2022-05-30

问题描述

我想要一个 TabControl，其中一半的选项卡在左侧，另一半在右侧，内容演示者在中间。见下图。

enter image description here

我尝试编辑 TabControl ControlTemplate 并将 TabPanel 替换为带有两个 DockPanel 的 StackPanel，如下所示：

<TabControl ItemsSource="{Binding Sequences}" Selectedindex="0">
    <TabControl.Style>
        <Style targettype="TabControl">
            <Setter Property="OverridesDefaultStyle"
                    Value="True" />
            <Setter Property="SnapsToDevicePixels"
                    Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate targettype="TabControl">
                        <DockPanel>
                            <StackPanel DockPanel.Dock="Left" IsItemsHost="True" Width="100"/>
                            <StackPanel DockPanel.Dock="Right" IsItemsHost="True" Width="100"/>
                            <ContentPresenter ContentSource="SelectedContent" Margin="100,5,5" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Style>
    <!-- ... -->
</TabControl>

但是我每边有 6 个标签，左侧有非工作标签（当我点击它们时，没有标题，内容展示器上也没有显示任何内容）。

如何在我的两个 StackPanel 中拆分 TabControl 的 ItemsSource？

解决方法

不完全确定为什么这有效，但确实如此。我是在尝试为您解决此问题时偶然发现的。

enter image description here

<TabControl>
    <TabControl.Style>
        <Style TargetType="TabControl" x:Name="myName">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Name="stk" Grid.Column="0" IsItemsHost="True" Width="100"/>
                            <ItemsControl Grid.Column="2"  ItemsSource="{Binding ElementName=stk,Path=Children}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                            <ContentPresenter Grid.Column="1" ContentSource="SelectedContent"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Style>
    <TabItem Header="One">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black">1</TextBlock>
    </TabItem>
    <TabItem Header="two">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black">2</TextBlock>
    </TabItem>
    <TabItem Header="three">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black">3</TextBlock>
    </TabItem>
    <TabItem Header="four">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black">4</TextBlock>
    </TabItem>
</TabControl>

如果有人能告诉我框​​架如何决定将哪个项目放置在我非常好奇的地方！

tabcontroltabcontrolwpfwpfwpfxamlxamlxaml