Rick Strahl explores how to improve user experience when working with WPF TreeViews by centering selected items in the viewport. He offers practical C# code and reusable helper methods.

Overview

In this article, Rick Strahl addresses a frustration for WPF application developers: the standard TreeViewItem.BringIntoView() method in the WPF TreeView control does not center a focused item in the ScrollViewer viewport. Instead, it merely assures visibility, often relegating the item to the top or bottom edge, which can harm the user experience, especially when programmatically re-organizing or filtering the tree.

The Problem with BringIntoView()

  • By default, selecting and bringing a TreeViewItem into view simply places it on the visible edge (top or bottom) of the TreeView.
  • The preferred behavior is to have the item centered, making it more prominent to the user.
  • The issue manifests when manipulating the tree (e.g., clearing filters) and expecting the currently focused item to remain easily visible.

Example Scenario

  • Filtering a documentation topic tree focuses on a deeply nested header.
  • Clearing the filter redisplays the full list, but the selected item appears at the bottom edge, potentially out of focus for users.

The Solution: Manually Center the Selected Item

Strahl presents a reusable helper function to center a TreeViewItem within the TreeView’s ScrollViewer:

public static void CenterTreeViewItemInScrollViewer(TreeView treeView, TreeViewItem item)
{
    if (item == null) return;
    item.IsSelected = true;
    item.BringIntoView();
    treeView.Dispatcher.InvokeAsync(() => {
        var scrollViewer = FindVisualChild<ScrollViewer>(treeView);
        if (scrollViewer == null) return;
        var header = FindVisualChild<ContentPresenter>(item);
        if (header == null) return;
        var transform = header.TransformToAncestor(scrollViewer);
        var position = transform.Transform(new System.Windows.Point(0, 0));
        double headerHeight = header.ActualHeight;
        double viewportHeight = scrollViewer.ViewportHeight * scrollViewer.ScrollableHeight / scrollViewer.ExtentHeight;
        double targetOffset = scrollViewer.VerticalOffset + position.Y - (viewportHeight / 2) + (headerHeight / 2);
        scrollViewer.ScrollToVerticalOffset(targetOffset);
    }, DispatcherPriority.Loaded);
}
  • This method ensures the item is visible and then uses layout calculations to adjust the ScrollViewer’s vertical offset so the item is roughly centered.
  • The code relies on locating the ContentPresenter of the item rather than the entire TreeViewItem for precise centering.

Usage Example

Replace the standard selection logic with:

tvi.IsSelected = true;
tvi.Focus();
WindowUtilities.CenterTreeViewItemInScrollViewer(TreeTopicBrowser, tvi);

Supporting Helper Methods

  • FindVisualChild: Recurses the visual tree to locate a child of a specified type.

      public static T FindVisualChild<T>(DependencyObject currentControl) where T : DependencyObject {...}

  • GetNestedTreeviewItem: Finds a TreeViewItem by its data context within the hierarchy.

      public static TreeViewItem GetNestedTreeviewItem(object item, ItemsControl parent) {...}

Refinements & Suggestions

  • The method can be refined to minimize unnecessary scrolling if the item is already visible.
  • Positioning options can be added (e.g., center, top, bottom) for further flexibility.
  • Practical for building reusable helpers in complex WPF applications.

Summary

Strahl highlights a persistent shortcoming in the WPF TreeView and supplies a robust, reusable fix for centering items in the viewport. The solution can easily be adapted and extended, making it a valuable technique for .NET and WPF developers aiming to improve usability in tree-based UIs.

This post appeared first on Rick Strahl’s Blog. Read the entire article here