想要为tabcontrol制作可滚动的标签

Question

假设我有一个标签控件,我有超过50个标签,没有足够的空间来容纳这么多标签,如何使这些标签可滚动？

Answer 1

Rick的答案实际上打破了tabcontrol内部内容的垂直拉伸.可以通过使用两行网格而不是StackPanel来改进以保持垂直拉伸.

<TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Hidden" >
                        <TabPanel x:Name="HeaderPanel"
                          Panel.ZIndex ="1" 
                          KeyboardNavigation.TabIndex="1"
                          Grid.Column="0"
                          Grid.Row="0"
                          Margin="2,2,2,0"
                          IsItemsHost="true"/>
                    </ScrollViewer>
                    <ContentPresenter x:Name="PART_SelectedContentHost"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Margin="{TemplateBinding Padding}"
                                      ContentSource="SelectedContent" Grid.Row="1"/>
                </Grid>
            </ControlTemplate>
        </TabControl.Template>

Answer 2

重写TabControl ControlTemplate并添加ScrollViewer周围的TabPanel像这个示例:

<Grid>
    <TabControl>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <StackPanel>
                    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                        <TabPanel x:Name="HeaderPanel"
                              Panel.ZIndex ="1" 
                              KeyboardNavigation.TabIndex="1"
                              Grid.Column="0"
                              Grid.Row="0"
                              Margin="2,2,2,0"
                              IsItemsHost="true"/>
                    </ScrollViewer>
                    <ContentPresenter x:Name="PART_SelectedContentHost"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          Margin="{TemplateBinding Padding}"
                                          ContentSource="SelectedContent"/>
                </StackPanel>
            </ControlTemplate>
        </TabControl.Template>
        <TabItem Header="TabItem1">TabItem1 Content</TabItem>
        <TabItem Header="TabItem2">TabItem2 Content</TabItem>
        <TabItem Header="TabItem3">TabItem3 Content</TabItem>
        <TabItem Header="TabItem4">TabItem4 Content</TabItem>
        <TabItem Header="TabItem5">TabItem5 Content</TabItem>
        <TabItem Header="TabItem6">TabItem6 Content</TabItem>
        <TabItem Header="TabItem7">TabItem7 Content</TabItem>
        <TabItem Header="TabItem8">TabItem8 Content</TabItem>
        <TabItem Header="TabItem9">TabItem9 Content</TabItem>
        <TabItem Header="TabItem10">TabItem10 Content</TabItem>
    </TabControl>
</Grid>

这给出了这个结果:

Answer 3

最近我实施了这样的控制.它包含两个按钮(向左和向右滚动),可在必要时切换它们IsEnabled和Visibility状态.此外,它与项目选择完美配合:如果您选择半可见项目,它将滚动以完全显示它.

它看起来如此:

它与默认控件没有太大区别,滚动会自动出现:

<tab:ScrollableTabControl ItemsSource="{Binding Items}" 
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 
    IsAddItemEnabled="False" 
    .../>

我写这个文章ScrollableTabControl类在我的博客在这里.

你可以在这里找到源代码:WpfScrollableTabControl.zip

Answer 4

上述解决方案非常适用于标签控件的"TabStripPlacement"属性设置为"Top"的标签项.但是如果你想要你的标签项目,比如说左侧,那么你需要改变一些东西.

下面是一个如何让scrollviewer与TabStripPlacement一起使用的示例:

<TabControl.Template>
<ControlTemplate TargetType="TabControl">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ScrollViewer 
            HorizontalScrollBarVisibility="Disabled"  
            VerticalScrollBarVisibility="Auto" 
            FlowDirection="RightToLeft">
                <TabPanel 
                    x:Name="HeaderPanel"
                    Panel.ZIndex ="0" 
                    KeyboardNavigation.TabIndex="1"
                    IsItemsHost="true"
                />
        </ScrollViewer>
        <ContentPresenter 
            x:Name="PART_SelectedContentHost"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
            ContentSource="SelectedContent" Grid.Column="1"
        />
    </Grid>
</ControlTemplate>

请注意,在ScrollViewer中,我设置了FlowDirection ="RightToLeft",以便滚动条会捕捉到选项卡项的左侧.如果要将选项卡项放在右侧,则需要删除FlowDirection属性,以使其默认为右侧.

这是结果: