想爲tabcontrol製作可滾動的選項卡

Question

說我有一個選項卡控件，並且我有超過50個選項卡，其中沒有足夠的空間容納如此多的選項卡，如何使這些選項卡可滾動？

Answer 1

重寫TabControlControlTemplate並添加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 2

把它放在裏面。

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"> 
    <TabControl ...> 
     ... 
    </TabControl> 

</ScrollViewer> 

Answer 3

裏克的回答居然打破了縱向拉伸的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 4

最近我實現了這樣的控制。它包含兩個按鈕（左右滾動），在需要時將其狀態切換爲IsEnabled和Visibility。它也適用於項目選擇：如果您選擇一個半可見項目，它將滾動顯示它完全。

它看起來如此：

這與其說是從默認的控制不同，滾動自動出現：

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

我寫這個文章ScrollableTabControl類in my blog here。

的源代碼，你可以在這裏找到：WpfScrollableTabControl.zip

Answer 5

上述解決方案非常適合與標籤控件的「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 =「從右至左」這樣滾動酒吧會捕捉到標籤項目的左側。如果您要將選項卡項目放在右側，則需要刪除FlowDirection屬性，以使其默認爲右側。

這裏是結果：

Answer 6

對於thoose誰想要知道如何使ScrollViewer中滾動到所選標籤項目。

將此事件SelectionChanged =「TabControl_SelectionChanged」添加到您的TabControl。

然後爲模板中的ScrollViewer添加一個名稱，如TabControlScroller。您應該然後，在代碼是這樣的

<TabControl SelectionChanged="TabControl_SelectionChanged"> 
     <TabControl.Template> 
      <ControlTemplate TargetType="TabControl"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
        <ScrollViewer x:Name="TabControlScroller" HorizontalScrollBarVisibility="Hidden" 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> 
    <!-- Your Tabitems--> 
</TabControl> 

結束後面，你只需要添加這個方法：

private void TabControl_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) 
{ 
    TabControl tabControl = (TabControl)sender; 
    ScrollViewer scroller = (ScrollViewer)tabControl.Template.FindName("TabControlScroller", tabControl); 
    if (scroller != null) 
    { 
     double index = (double)(tabControl.SelectedIndex); 
     double offset = index * (scroller.ScrollableWidth/(double)(tabControl.Items.Count)); 
     scroller.ScrollToHorizontalOffset(offset); 
    } 
}