WPF：Scrollviewer 内的 ListView；布局问题

Question

我确实有一个关于在滚动查看器内使用列表视图进行布局的问题。一旦列表视图位于滚动查看器内，它就会使用其最大尺寸，并且不会自行滚动，因为滚动查看器为其内部的控件提供无限量的空间。 问题是，只有当用户向下滚动时，长列表下方的控件才可见，并且我想让列表视图仅使用必要的空间并使用滚动条本身。图片确实比文字能传达更多信息（图片链接也能传达更多信息，因为我的声誉还不到 10。编辑2：好吧，我只能使用一个链接，所以我将所有图片复制到一个链接上）。 如果列表不长，一切都可以：

图片 1 :

现在，如果列表更长，下面的控件将向下移动到不可见的区域：

图 2：参见图 1 中的链接

我现在想要发生的是：

图 3：参见图 1 中的链接

它本身并不是真正的问题的原因是我们可以将所有内容放入停靠面板中，并将下面的控件停靠到 Dock.Below 和从上到上，并让列表视图用“lastchildfill”填充中心。现在来说说真正的问题。如果窗口变小怎么办？然后，首先列表视图消失，然后其他所有内容也消失，而没有滚动条滚动到底部的控件。

图 4：参见图 1 中的链接

我正在寻找的理想解决方案是在窗口（或根滚动查看器）上有滚动条，这将使我们能够滚动到窗口的每个部分，如下所示只要所有内容都达到最小尺寸，外部滚动条就可见。

图 5：参见图 1 中的链接

有什么想法吗？图片太多？这里有一些 xaml 供大家尝试使其工作（这只是一个快速示例窗口......）

<Window x:Class="WpfTest1.ScrollTestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="ScrollTestWindow" Height="400" Width="700">
    <ScrollViewer >
        <DockPanel LastChildFill="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
            <Grid DockPanel.Dock="Top">
                <TextBlock Text="Example controls above listview" Background="LightGray" FontSize="30"></TextBlock>
            </Grid>
            <Grid DockPanel.Dock="Bottom">
                <TextBlock Text="Example controls below listview" Background="LightGray" FontSize="30"></TextBlock>
            </Grid>
            <ListView FontSize="30">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Width="190" Header="Date" />
                        <GridViewColumn Width="200" Header="Day Of Week"  DisplayMemberBinding="{Binding DayOfWeek}" />
                        <GridViewColumn Width="120" Header="Year" DisplayMemberBinding="{Binding Year}" />
                    </GridView>
                </ListView.View>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
                <sys:DateTime>1/1/1</sys:DateTime>
            </ListView>
        </DockPanel>

    </ScrollViewer>

Answer 1

好的。所以我也遇到了同样的问题，但现在已经解决了！

我的项目看起来和你的有点不同，但我认为它应该适合你。我提出的解决方案也有一些限制。例如，仅当您仅添加一个ListView时，它才会起作用！在您的示例中，您只有一个，因此这不会成为问题。但对于任何可能想要更多ListViews 的人来说，您必须添加更多功能来决定视图的大小以及放置它们的位置。

您还必须为 ListView 设置 MinHeight。

我的解决方案是创建您自己的面板类来扩展 StackPanel，覆盖MeasureOverride 和 ArrangeOverride 函数。并将ListView添加到创建的面板

CustomPanel：

public class ScrollablePanel : StackPanel
{
    protected override Size MeasureOverride(Size constraint)
    {
        Size tmpSize = base.MeasureOverride(constraint);
        tmpSize.Height = (double)(this.Children[0] as UIElement).GetValue(MinHeightProperty);
        return tmpSize;
    }

    protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
    {
        Size tmpSize = new Size(0, 0);

        //Width stays the same
        tmpSize.Width = finalSize.Width;
        
        //Height is changed
        tmpSize.Height = finalSize.Height;

        //This works only for one child!
        this.Children[0].SetCurrentValue(HeightProperty, tmpSize.Height);
        this.Children[0].Arrange(new Rect(new Point(0, 0), tmpSize));
        
        return tmpSize;
    }
}

XAML

<Window x:Class="WpfTest1.ScrollTestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:WpfTest1"
Title="ScrollTestWindow" Height="400" Width="700">
    <ScrollViewer >
        <DockPanel LastChildFill="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
            <Grid DockPanel.Dock="Top">
                <TextBlock Text="Example controls above listview" Background="LightGray" FontSize="30"></TextBlock>
            </Grid>
            <Grid DockPanel.Dock="Bottom">
                <TextBlock Text="Example controls below listview" Background="LightGray" FontSize="30"></TextBlock>
            </Grid>
            <local:ScrollablePanel>
                <ListView FontSize="30" MinHeight="80">
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Width="190" Header="Date" />
                            <GridViewColumn Width="200" Header="Day Of Week"  DisplayMemberBinding="{Binding DayOfWeek}" />
                            <GridViewColumn Width="120" Header="Year" DisplayMemberBinding="{Binding Year}" />
                        </GridView>
                    </ListView.View>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                    <sys:DateTime>1/1/1</sys:DateTime>
                </ListView>
            </local:ScrollablePanel>
        </DockPanel>

    </ScrollViewer>
</Window>

这个问题很久以前就被问过，但我希望这个答案至少会帮助某人！

我还要感谢 @sisyphe 为解决此问题提供的所有帮助:)

Answer 2

不确定这是否真的是您理想的解决方案，但我个人的做法完全不同：

我使用一个简单的网格，其中 n 行用于列表视图上方的内容，m 行用于下面的内容，一行用于高度=的列表视图*。因此上面和下面的所有内容都是可见的，当没有足够的空间时，列表视图中会出现滚动条。

我有一个这样的工作示例，但是使用 DataGrid。它应该与 ListView 非常相似。