WPF：如何在调整大小后保持 ListBox SelectedItem 可见？

Question

在我们当前的C# MVVM 项目中，我们使用ListBox 来显示项目。

ListBox下方还有一个可以展开的容器。

一切正常。当容器展开时，ListBox 收缩并出现ScrollBar。

但是，如果在 ListBox 底部选择了一个元素并展开了容器，则该项目会在 ListBox 的末尾消失。

例子：

容器扩容前：

+--------------+
| Item 1       |
+--------------+
| Item 2       |
+--------------+
| Item 3       |
+--------------+
| Item 4       |
+--------------+
| SelectedItem |
+--------------+
| Item 6       |
+--------------+
| Item 7       |
+--------------+

+------------------+
| Container        |
+------------------+

容器扩容后：

+--------------+---+
| Item 1       | S |
+--------------+ c |
| Item 2       | r |
+--------------+ o |
| Item 3       | l |
+--------------+ l |
| Item 4       |   |
+--------------+---+

+------------------+
|                  |
|                  |
| Container        |
|                  |
|                  |
+------------------+

我想要实现的是保持可见 SelectedItem 而无需滚动到它。

像这样：

+--------------+---+
| Item 2       | S |
+--------------+ c |
| Item 3       | r |
+--------------+ o |
| Item 4       | l |
+--------------+ l |
| SelectedItem |   |
+--------------+---+

+------------------+
|                  |
|                  |
| Container        |
|                  |
|                  |
+------------------+

实现这一目标的最佳方法是什么？

我在 SO 或其他任何地方都找不到任何关于它的信息。

我已经看到可以通过编程方式滚动：

• https://social.msdn.microsoft.com/Forums/vstudio/en-US/a9116965-b1e9-411c-b153-b868e0a730cf/how-to-programmatically-scroll-a-scrollviewer?forum=wpf

• https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.scrollviewer.scrolltohorizontaloffset?redirectedfrom=MSDN&view=netframework-4.7.2#System_Windows_Controls_ScrollViewer_ScrollToHorizontalOffset_System_Double_

• https://wpf.2000things.com/2013/08/21/889-scrolling-a-scrollviewer-from-code/

我还看到可以知道ListBoxItem 何时进入视野（here 和 there），但由于我的项目已经加载然后隐藏，我认为这不会起作用。

我不想在需要此功能的每个视图中都复制代码隐藏。我曾考虑在附加到ListBox 的行为中实现这一点，但我非常怀疑这是否是最好的解决方案。

我也考虑过编写一个自定义的ListBox 控件，但我认为这对于这么小的功能来说太过分了。

有人能告诉我实现这种行为的最佳方法吗？ 提前致谢。

Answer 1

Behavior 是将此功能添加到控件的理想方式。下面的代码将在选择更改或调整大小后将 ListBox 的 SelectedItem 滚动到视图中。

public class perListBoxHelper : Behavior<ListBox>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.SelectionChanged += AssociatedObject_SelectionChanged;
        AssociatedObject.SizeChanged += AssociatedObject_SizeChanged;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.SelectionChanged -= AssociatedObject_SelectionChanged;
        AssociatedObject.SizeChanged -= AssociatedObject_SizeChanged;
        base.OnDetaching();
    }

    private static void AssociatedObject_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ScrollSelectionIntoView(sender as ListBox);
    }

    private static void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        ScrollSelectionIntoView(sender as ListBox);
    }

    private static void ScrollSelectionIntoView(ListBox listBox)
    { 
        if (listBox?.SelectedItem == null)
            return;

        Action action = () =>
        {
            listBox.UpdateLayout();
            listBox.ScrollIntoView(listBox.SelectedItem);
        };

        listBox.Dispatcher.BeginInvoke(action, DispatcherPriority.ContextIdle);
    }
}

用法

<ListBox ... >
    <i:Interaction.Behaviors>
        <vhelp:perListBoxHelper />
    </i:Interaction.Behaviors>
</ListBox>

更多关于我最近的blog post行为的讨论。