Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Override the <code>TabControl</code> <code>ControlTemplate</code> and add a <code>ScrollViewer</code> around the <code>TabPanel</code> like this sample:</p> <pre><code>&lt;Grid&gt; &lt;TabControl&gt; &lt;TabControl.Template&gt; &lt;ControlTemplate TargetType="TabControl"&gt; &lt;StackPanel&gt; &lt;ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"&gt; &lt;TabPanel x:Name="HeaderPanel" Panel.ZIndex ="1" KeyboardNavigation.TabIndex="1" Grid.Column="0" Grid.Row="0" Margin="2,2,2,0" IsItemsHost="true"/&gt; &lt;/ScrollViewer&gt; &lt;ContentPresenter x:Name="PART_SelectedContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="{TemplateBinding Padding}" ContentSource="SelectedContent"/&gt; &lt;/StackPanel&gt; &lt;/ControlTemplate&gt; &lt;/TabControl.Template&gt; &lt;TabItem Header="TabItem1"&gt;TabItem1 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem2"&gt;TabItem2 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem3"&gt;TabItem3 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem4"&gt;TabItem4 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem5"&gt;TabItem5 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem6"&gt;TabItem6 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem7"&gt;TabItem7 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem8"&gt;TabItem8 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem9"&gt;TabItem9 Content&lt;/TabItem&gt; &lt;TabItem Header="TabItem10"&gt;TabItem10 Content&lt;/TabItem&gt; &lt;/TabControl&gt; &lt;/Grid&gt; </code></pre> <p>which gives this result:</p> <p><img src="https://i.stack.imgur.com/yKYx7.png" alt="TabControlScroll"></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload