WPF中如何实现ListBox滚动时Expander头部吸顶固定效果

实现核心思路 #

WPF没有原生提供CSS中position: sticky的等效属性，不需要重写整个控件模板，通过分层布局+滚动偏移监听即可实现效果。首先要修正原有代码的结构问题：不要把ListBox包裹在额外的外层ScrollViewer中，ListBox本身内置了支持虚拟化的ScrollViewer，外层套滚动容器会破坏虚拟化、导致滚动偏移计算失效。
整体逻辑如下：

• 最外层使用Grid布局，分两行放置内容：第一行高度自适应，用来放固定在顶部的吸顶Expander头部；第二行高度占满剩余空间，放业务用的ListBox
• 监听ListBox内置ScrollViewer的滚动事件，实时计算当前选中项相对于ListBox可视区域的坐标
• 当选中项的顶部滚出ListBox可视区域上边界时，将吸顶层的Expander内容同步为当前选中项的Header和Content，显示在容器顶部；当选中项滚回可视区域内时，隐藏吸顶层
• 选中项切换时自动展开对应Expander，吸顶层的展开/折叠操作和列表内对应Expander的状态双向同步

具体实现代码 #

首先是XAML布局部分：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 吸顶固定的Expander头部 -->
    <Expander x:Name="StickyHeader" 
              Visibility="Collapsed"
              Expanded="StickyHeader_Expanded"
              Collapsed="StickyHeader_Collapsed"
              Margin="0" Padding="0"/>

    <ListBox x:Name="MainListBox"
             Grid.Row="1"
             SelectionMode="Single"
             ScrollViewer.CanContentScroll="True"
             SelectionChanged="MainListBox_SelectionChanged"
             Loaded="MainListBox_Loaded">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <EventSetter Event="Selected" Handler="ListBoxItem_Selected"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Expander Header="{Binding Header}" 
                          Content="{Binding Content}"
                          IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}, Mode=OneWay}">
                </Expander>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

后端C#逻辑代码：

private ScrollViewer _listScrollViewer;
private List<ItemModel> _testData = new List<ItemModel>()
{
    new ItemModel(){Header = "head1", Content = "content1"},
    new ItemModel(){Header = "head2", Content = "content2"},
    new ItemModel(){Header = "head3", Content = "content3"},
    new ItemModel(){Header = "head4", Content = "content4"},
    new ItemModel(){Header = "head5", Content = "content5\n多行内容撑高度\n测试滚动\n测试吸顶"},
    new ItemModel(){Header = "head6", Content = "content6"},
};

// 列表项数据模型
public class ItemModel
{
    public string Header { get; set; }
    public string Content { get; set; }
}

private void MainListBox_Loaded(object sender, RoutedEventArgs e)
{
    MainListBox.ItemsSource = _testData;
    // 查找ListBox内部内置的ScrollViewer
    _listScrollViewer = FindVisualChild<ScrollViewer>(MainListBox);
    if (_listScrollViewer != null)
    {
        _listScrollViewer.ScrollChanged += ListScrollViewer_ScrollChanged;
    }
}

private void ListScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    UpdateStickyHeaderState();
}

private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    UpdateStickyHeaderState();
}

private void UpdateStickyHeaderState()
{
    if (MainListBox.SelectedItem is not ItemModel selectedItem)
    {
        StickyHeader.Visibility = Visibility.Collapsed;
        return;
    }

    // 查找选中项对应的ListBoxItem容器
    var selectedContainer = MainListBox.ItemContainerGenerator.ContainerFromItem(selectedItem) as ListBoxItem;
    if (selectedContainer == null)
    {
        StickyHeader.Visibility = Visibility.Visible;
        StickyHeader.Header = selectedItem.Header;
        StickyHeader.Content = selectedItem.Content;
        return;
    }

    // 计算选中项相对于ListBox可视区域的坐标
    var itemPos = selectedContainer.TransformToAncestor(MainListBox).Transform(new Point(0, 0));
    
    // 选中项顶部滚出可视区域上边界时，显示吸顶头部
    if (itemPos.Y < 0)
    {
        StickyHeader.Visibility = Visibility.Visible;
        StickyHeader.Header = selectedItem.Header;
        StickyHeader.Content = selectedItem.Content;
        StickyHeader.IsExpanded = true;
    }
    else
    {
        // 选中项在可视区域内，隐藏吸顶头部
        StickyHeader.Visibility = Visibility.Collapsed;
    }
}

// 同步吸顶头部与列表内Expander的展开状态
private void StickyHeader_Expanded(object sender, RoutedEventArgs e)
{
    if (MainListBox.SelectedItem is ItemModel selected)
    {
        var container = MainListBox.ItemContainerGenerator.ContainerFromItem(selected) as ListBoxItem;
        if (container != null)
        {
            var expander = FindVisualChild<Expander>(container);
            if (expander != null) expander.IsExpanded = true;
        }
    }
}

private void StickyHeader_Collapsed(object sender, RoutedEventArgs e)
{
    if (MainListBox.SelectedItem is ItemModel selected)
    {
        var container = MainListBox.ItemContainerGenerator.ContainerFromItem(selected) as ListBoxItem;
        if (container != null)
        {
            var expander = FindVisualChild<Expander>(container);
            if (expander != null) expander.IsExpanded = false;
        }
    }
}

private void ListBoxItem_Selected(object sender, RoutedEventArgs e)
{
    // 选中项默认自动展开
    if (sender is ListBoxItem item)
    {
        var expander = FindVisualChild<Expander>(item);
        if (expander != null) expander.IsExpanded = true;
    }
}

// 可视化树元素查找辅助方法
public static T FindVisualChild<T>(DependencyObject obj) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
    {
        DependencyObject child = VisualTreeHelper.GetChild(obj, i);
        if (child != null && child is T)
            return (T)child;
        T childOfChild = FindVisualChild<T>(child);
        if (childOfChild != null)
            return childOfChild;
    }
    return null;
}

注意事项 #

• 不要在外层额外套ScrollViewer，会破坏ListBox自带的滚动虚拟化，还会导致滚动位置计算错误
• 如果开启了虚拟化滚动，快速滚动时ItemContainerGenerator可能临时拿不到项容器，这种情况默认显示吸顶头部即可，不会产生视觉跳变
• 吸顶头部的样式要和ItemTemplate里的Expander头部样式保持完全一致，避免出现视觉差
• 不需要调用ScrollIntoView方法，不会锁定滚动位置，用户可以自由滚动，仅当选中项头部滚出可视区域顶部时才会显示吸顶栏

该效果和CSS的sticky定位逻辑完全一致：元素在可视区域内时正常跟随文档流，超出阈值时固定在容器顶部。

内容的提问来源于stack exchange，提问作者sabareesan_ravi