WPF Guide: How to Center Selected TabItem in ScrollViewer When Tab Changes

In WPF, the TabControl is a common UI element for organizing content into tabs. When the number of TabItems exceeds the available space, the TabControl automatically wraps its headers in a ScrollViewer (via its default template), allowing horizontal scrolling to access off-screen tabs. However, a common user experience (UX) issue arises: selecting a tab that’s partially or fully off-screen doesn’t automatically scroll the ScrollViewer to center the selected tab. This can confuse users, as they may not immediately see the active tab.

This guide will walk you through a step-by-step solution to automatically center the selected TabItem in the ScrollViewer whenever the tab selection changes. We’ll cover visual tree traversal, scroll offset calculations, and event handling to achieve a polished, user-friendly result.

Table of Contents#

1. Prerequisites#

Before starting, ensure you have:

  • Basic knowledge of WPF (XAML and C#).
  • Visual Studio 2019 or later (with .NET Framework/.NET 5+ installed).
  • A WPF project (create a new "WPF App" project if you don’t have one).

2. Understanding the Default TabControl Behavior#

The TabControl’s default template includes a header area (for TabItems) and a content area. The header area uses a TabPanel (named PART_HeaderPanel) wrapped in a ScrollViewer to handle overflow. When there are more TabItems than fit horizontally, the ScrollViewer enables horizontal scrolling.

However, the ScrollViewer does not automatically adjust its offset when a new tab is selected. For example, if you select a TabItem that’s far to the right, you must manually scroll to see it. Our goal is to fix this by programmatically scrolling the ScrollViewer to center the selected TabItem.

3. Step-by-Step Implementation#

3.1 Create a Sample TabControl#

First, add a TabControl with enough TabItems to trigger overflow (and thus the ScrollViewer). Open your MainWindow.xaml and add the following XAML:

<Window x:Class="TabControlScrollCenterDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="Centered TabItem Demo" Height="450" Width="800">
    <Grid Margin="20">
        <!-- TabControl with 15 TabItems to force scrolling -->
        <TabControl x:Name="MyTabControl" SelectionChanged="MyTabControl_SelectionChanged">
            <TabItem Header="Tab 1">Content 1</TabItem>
            <TabItem Header="Tab 2">Content 2</TabItem>
            <TabItem Header="Tab 3">Content 3</TabItem>
            <TabItem Header="Tab 4">Content 4</TabItem>
            <TabItem Header="Tab 5">Content 5</TabItem>
            <TabItem Header="Tab 6">Content 6</TabItem>
            <TabItem Header="Tab 7">Content 7</TabItem>
            <TabItem Header="Tab 8">Content 8</TabItem>
            <TabItem Header="Tab 9">Content 9</TabItem>
            <TabItem Header="Tab 10">Content 10</TabItem>
            <TabItem Header="Tab 11">Content 11</TabItem>
            <TabItem Header="Tab 12">Content 12</TabItem>
            <TabItem Header="Tab 13">Content 13</TabItem>
            <TabItem Header="Tab 14">Content 14</TabItem>
            <TabItem Header="Tab 15">Content 15</TabItem>
        </TabControl>
    </Grid>
</Window>

Here, MyTabControl has 15 TabItems, which will overflow the window’s width, triggering the ScrollViewer. We also hook up the SelectionChanged event to MyTabControl_SelectionChanged (we’ll implement this next).

3.2 Handle the SelectionChanged Event#

The SelectionChanged event fires when the user selects a new TabItem. We’ll use this event to trigger the scrolling logic. Open MainWindow.xaml.cs and add the event handler:

private void MyTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Only proceed if a tab is selected
    if (MyTabControl.SelectedItem is not TabItem selectedTabItem)
        return;
 
    // Step 1: Get the ScrollViewer from the TabControl's template
    ScrollViewer scrollViewer = GetTabControlScrollViewer(MyTabControl);
    if (scrollViewer == null)
        return;
 
    // Step 2: Get the selected TabItem's position and size
    Rect tabItemRect = GetTabItemRect(selectedTabItem, scrollViewer);
    if (tabItemRect.IsEmpty)
        return;
 
    // Step 3: Calculate the target scroll offset to center the TabItem
    double targetOffset = CalculateCenterOffset(scrollViewer, tabItemRect);
 
    // Step 4: Scroll to the target offset
    scrollViewer.ScrollToHorizontalOffset(targetOffset);
}

This handler orchestrates the entire process: retrieving the ScrollViewer, getting the TabItem’s position, calculating the center offset, and scrolling. Now, let’s implement the helper methods called here.

3.3 Retrieve the ScrollViewer from the TabControl Template#

The ScrollViewer is part of the TabControl’s visual tree, not directly exposed as a property. To access it, we’ll traverse the visual tree using VisualTreeHelper. Add this helper method to MainWindow.xaml.cs:

private ScrollViewer GetTabControlScrollViewer(TabControl tabControl)
{
    // The TabControl's template contains a PART_HeaderPanel (TabPanel) inside a ScrollViewer
    // Traverse the visual tree to find the ScrollViewer
    return FindVisualChild<ScrollViewer>(tabControl);
}
 
// Helper method to find a child control of type T in the visual tree
private T? FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        DependencyObject child = VisualTreeHelper.GetChild(parent, i);
        if (child is T target)
            return target;
 
        T? foundChild = FindVisualChild<T>(child);
        if (foundChild != null)
            return foundChild;
    }
    return null;
}

FindVisualChild<T> recursively searches the visual tree for a child of type T (in this case, ScrollViewer). GetTabControlScrollViewer uses this to extract the ScrollViewer from the TabControl.

3.4 Get the Selected TabItem’s Position and Size#

Next, we need the TabItem’s position relative to the ScrollViewer’s content. This is done using TransformToAncestor to convert the TabItem’s coordinates to the ScrollViewer’s coordinate space. Add this helper method:

private Rect GetTabItemRect(TabItem tabItem, ScrollViewer scrollViewer)
{
    // Ensure the TabItem is loaded and rendered
    if (!tabItem.IsLoaded)
        return Rect.Empty;
 
    // Get the TabItem's position relative to the ScrollViewer
    GeneralTransform transform = tabItem.TransformToAncestor(scrollViewer);
    Point tabItemPosition = transform.Transform(new Point(0, 0));
 
    // Return the Rect (position + size) of the TabItem
    return new Rect(
        tabItemPosition.X, 
        tabItemPosition.Y, 
        tabItem.ActualWidth, 
        tabItem.ActualHeight);
}
  • IsLoaded checks if the TabItem is rendered (critical for accurate position/size).
  • TransformToAncestor(scrollViewer) converts the TabItem’s local coordinates to the ScrollViewer’s coordinates.
  • Rect combines the position (tabItemPosition) and size (ActualWidth/ActualHeight) of the TabItem.

3.5 Calculate the Target Scroll Offset#

To center the TabItem, we need to adjust the ScrollViewer’s HorizontalOffset so that the TabItem’s center aligns with the ScrollViewer’s viewport center. Add this helper method:

private double CalculateCenterOffset(ScrollViewer scrollViewer, Rect tabItemRect)
{
    // The ScrollViewer's viewport width (visible area)
    double viewportWidth = scrollViewer.ViewportWidth;
 
    // The TabItem's center X relative to the ScrollViewer's content
    double tabItemCenterX = tabItemRect.X + (tabItemRect.Width / 2);
 
    // The target offset: center the TabItem's center in the viewport
    double targetOffset = tabItemCenterX - (viewportWidth / 2);
 
    // Clamp the offset to prevent scrolling beyond the content bounds
    return Math.Clamp(targetOffset, 0, scrollViewer.ScrollableWidth);
}
  • viewportWidth: The visible width of the ScrollViewer (what the user sees).
  • tabItemCenterX: The X-coordinate of the TabItem’s center within the ScrollViewer’s content.
  • targetOffset: The offset needed to align tabItemCenterX with the viewport’s center (viewportWidth / 2).
  • Math.Clamp ensures we don’t scroll beyond the ScrollViewer’s content (avoids negative offsets or offsets larger than ScrollableWidth).

3.6 Update the ScrollViewer’s Offset#

Finally, we use ScrollToHorizontalOffset(targetOffset) to scroll the ScrollViewer to the calculated position. This is already included in the SelectionChanged handler.

4. Testing the Solution#

Run the application (F5 in Visual Studio). Try selecting Tab 1, then Tab 15—the ScrollViewer should automatically scroll to center Tab 15. Select Tab 8; it should center in the viewport. Test edge cases (e.g., Tab 2 when scrolled all the way right) to ensure smooth behavior.

5. Troubleshooting Common Issues#

Issue: ScrollViewer is null#

  • Cause: The TabControl’s template may not have a ScrollViewer (unlikely for default templates, but possible with custom templates).
  • Fix: Verify the TabControl’s template includes a ScrollViewer around the header panel. Use Snoop (a WPF visual tree inspector) to check the visual tree.

Issue: TabItem Position/Size is Incorrect#

  • Cause: The TabItem hasn’t finished rendering when SelectionChanged fires.

  • Fix: Delay the logic using Dispatcher.BeginInvoke to wait for the layout pass:

    // Inside MyTabControl_SelectionChanged:
Dispatcher.BeginInvoke(DispatcherPriority.Render, new Action(() =>
{
    // Existing logic here (GetTabControlScrollViewer, etc.)
}));

Issue: Scrolling is Jerky#

  • Fix: Add smooth scrolling by using ScrollViewer.AnimateScrollToHorizontalOffset (requires a helper method for animation). Example:

    private void AnimateScroll(ScrollViewer scrollViewer, double targetOffset)
{
    DoubleAnimation animation = new DoubleAnimation(
        scrollViewer.HorizontalOffset, 
        targetOffset, 
        TimeSpan.FromMilliseconds(200)); // 200ms smooth animation
    scrollViewer.BeginAnimation(ScrollViewer.HorizontalOffsetProperty, animation);
}

    Replace scrollViewer.ScrollToHorizontalOffset(targetOffset) with AnimateScroll(scrollViewer, targetOffset).

6. Conclusion#

By handling the SelectionChanged event, traversing the visual tree to find the ScrollViewer, and calculating the correct scroll offset, we’ve ensured that the selected TabItem centers automatically. This improves UX by making the active tab immediately visible, even with many tabs.

For advanced scenarios, extend the solution with smooth scrolling animations or support for vertical TabControl orientations (adjust calculations to VerticalOffset).

7. References#

2026-01