Question

我正在尝试构建一个窗口有三个数据绑定listview控件的不确定长度。我希望这三个都在一个scrollview中。

简单来说，下面的代码是我希望它的工作方式。当然，示例xaml代码的结果是scrollviewer内容扩展到窗口之外并且不可滚动。

我尝试使用网格控件，但这并没有像希望的那样工作。我不希望每个列表视图都有固定的高度和单独的滚动条，因为可能存在可变数量的数据，这会导致不必要的滚动。

任何人都可以提供在一个滚动条中包含多个可变内容列表视图的方法吗？

<Window x:Class="AmultiListTest"
    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"
    xmlns:local="clr-namespace:SomeNamespace"
    mc:Ignorable="d"
    Title="AmultiListTest"
    Height="300"
    Width="300">
<StackPanel>
    <ScrollViewer>
        <StackPanel Height="250">
            <Label>List number one</Label>
            <ListView>
                <ListViewItem>list 1 Item 1</ListViewItem>
                <ListViewItem>list 1 Item 2</ListViewItem>
                <ListViewItem>list 1 Item 3</ListViewItem>
                <ListViewItem>list 1 Item 4</ListViewItem>
                <ListViewItem>list 1 Item 5</ListViewItem>
                <ListViewItem>list 1 Item 6</ListViewItem>
                <ListViewItem>list 1 Item 7</ListViewItem>
                <ListViewItem>list 1 Item 8</ListViewItem>
                <ListViewItem>list 1 Item 9</ListViewItem>
            </ListView>
            <Label>List number two</Label>
            <ListView>
                <ListViewItem>list 2 Item 1</ListViewItem>
                <ListViewItem>list 2 Item 2</ListViewItem>
                <ListViewItem>list 2 Item 3</ListViewItem>
                <ListViewItem>list 2 Item 4</ListViewItem>
                <ListViewItem>list 2 Item 5</ListViewItem>
                <ListViewItem>list 2 Item 6</ListViewItem>
            </ListView>
            <Label>List number three</Label>
            <ListView>
                <ListViewItem>list 3 Item 1</ListViewItem>
                <ListViewItem>list 3 Item 2</ListViewItem>
                <ListViewItem>list 3 Item 3</ListViewItem>
                <ListViewItem>list 3 Item 4</ListViewItem>
            </ListView>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

Answer 1

首先删除堆栈面板的高度：

<StackPanel Height="250">

到

<StackPanel>

然后绑定滚动的高度

(...)
<ScrollViewer Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}">
  (...)
</ScrollViewer>

来源：How can I get ScrollViewer to work inside a StackPanel?

Answer 2

Scrollviewer身高解决方案已发布。我找到了一种方法，通过添加一个代码来包含标题，以通过标题stackpanel的高度减少scrollviewer高度。这是XAML：

<Window x:Class="AmultiListTest"
    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"
    xmlns:local="clr-namespace:SomeNamespace"
    mc:Ignorable="d"
    Title="AmultiListTest"
    Height="300"
    Width="300"
    Loaded="Window_Loaded">
<StackPanel>
    <StackPanel x:Name="SPheader">
        <Label>this is header one</Label>
        <Label>this is header two</Label>
        <Separator />
    </StackPanel >
    <ScrollViewer x:Name="SViewer"
                  Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Border}, Mode=FindAncestor}}">
        <StackPanel>
            <Label Content="List number one" />
            <ListView>
                <ListViewItem Content="list 1 Item 1" />
                <ListViewItem Content="list 1 Item 2" />
                <ListViewItem Content="list 1 Item 3" />
                <ListViewItem Content="list 1 Item 4" />
                <ListViewItem Content="list 1 Item 5" />
                <ListViewItem Content="list 1 Item 6" />
                <ListViewItem Content="list 1 Item 7" />
                <ListViewItem Content="list 1 Item 8" />
                <ListViewItem Content="list 1 Item 9" />

            </ListView>
            <Label Content="List number two" />
            <ListView>
                <ListViewItem Content="list 2 Item 1" />
                <ListViewItem Content="list 2 Item 2" />
                <ListViewItem Content="list 2 Item 3" />
                <ListViewItem Content="list 2 Item 4" />
                <ListViewItem Content="list 2 Item 5" />
                <ListViewItem Content="list 2 Item 6" />

            </ListView>
            <Label Content="List number three" />
            <ListView>
                <ListViewItem Content="list 3 Item 1" />
                <ListViewItem Content="list 3 Item 2" />
                <ListViewItem Content="list 3 Item 3" />
                <ListViewItem Content="list 3 Item 4" />
            </ListView>
        </StackPanel>
    </ScrollViewer>

</StackPanel>

在后面的Windows加载代码中我有以下行...

Public Class AmultiListTest
Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    SViewer.Height = SViewer.Height - SPheader.ActualHeight
End Sub
End Class

最好不要使用代码，而是在XAML中扣除标头的实际值，但我不知道该怎么做。此代码现在有效。

编辑：一个正确的解决方案 - 没有绑定ScrollViewer的高度或在后面的代码中设置它 - 将如下所示：

<Window ... />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="SPheader" Grid.Row="0">
            ...
        </StackPanel >
        <ScrollViewer x:Name="SViewer" Grid.Row="1">
            ...
        </ScrollViewer>
    </Grid>
</Window>

单个scrollviewer中的WPF多列表视图

2 个答案: