Srollviewer doesn't work in TabControl.ItemsPanel - wpf

Question

I have a grid with a tab control inside. My goal is to have a list of tabs on the left of screen, which can be scrolled (There is around 10 tabs in typical scenario). I cannot however make it scroll.
What I tried (from other answers here) and didn't work:
Put Height/MaxHeight on my Panels, Grid
Wrapping the whole thing in another panel
Putting my Panel inside ScrollViewer - can't do that since I cannot put something that isn't panel on top of visual tree in ItemsPanelTemplate
Putting the ScrollViewer inside
The base code for the UserControl is here:
<UserControl.Resources>
<converters:StringToByteArrayConverter x:Key="StringToByteArrayConverter" />
<DataTemplate x:Key="GroupTemplate">
<DockPanel Background="{StaticResource LightGreyBrush}">
<Image
Width="210"
Height="240"
DataContext="{Binding DataContext.MyPageModel.MyGraphics.Groups[0], RelativeSource={RelativeSource AncestorType=TabControl, Mode=FindAncestor}}"
DockPanel.Dock="Top"
Source="{Binding Graphic, Converter={StaticResource StringToByteArrayConverter}}" />
<Label
HorizontalAlignment="Center"
Content="{Binding Name}"
DockPanel.Dock="Bottom" />
</DockPanel>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="300" MaxHeight="510" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<TabControl
ItemTemplate="{StaticResource GroupTemplate}"
ItemsSource="{Binding MyPageModel.MyList.Groups}"
TabStripPlacement="Left">
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel
CanVerticallyScroll="True"
Orientation="Vertical"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.IsDeferredScrollingEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
</Grid>
<Grid Grid.Row="1" />
</Grid>
How can I make the tab list scrollable here?
Edit: this is visualization of what I want (roughly, paint skills not good):

Answer 1

Define a custom ControlTemplate where you put a ScrollViewer around the TabPanel.
You will also have to change the Height of the first RowDefinition in your Grid from Auto to *:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="300" MaxHeight="510" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<TabControl
ItemTemplate="{StaticResource GroupTemplate}"
ItemsSource="{Binding MyPageModel.MyList.Groups}"
TabStripPlacement="Left">
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<ControlTemplate.Resources>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
</ControlTemplate.Resources>
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="*"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer>
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</ScrollViewer>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TabControl.Template>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel
CanVerticallyScroll="True"
Orientation="Vertical"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.IsDeferredScrollingEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
</Grid>
<Grid Grid.Row="1" />
</Grid>