在WPF中调整列表视图高度到网格

Question

我有一个网格，在这个网格内部，有一个边框。边框内有一个ListView。我的问题是 ListView 不会根据边框的高度激活垂直滚动。相反，它会增加 ListView 边框的高度，从而导致页面溢出。

边框：

<Border
    Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
    Background="#50505050"
    CornerRadius="8"
    Margin="0,0,10,0"
    Padding="10">
    <ui:ListView
        d:ItemsSource="{Binding BasicListViewItems, Mode=TwoWay}"
        ItemsSource="{Binding BasicListViewItems, Mode=TwoWay}"
        SelectedIndex="1"
        SelectionMode="Single">
        <ui:ListView.ItemTemplate>
            <DataTemplate DataType="{x:Type models:Person}">
                <Grid Margin="8,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Ellipse
                        x:Name="Ellipse"
                        Grid.RowSpan="2"
                        Width="32"
                        Height="32"
                        Margin="6"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Fill="{ui:ThemeResource ControlStrongStrokeColorDefaultBrush}" />
                    <TextBlock
                        Grid.Row="0"
                        Grid.Column="1"
                        Margin="12,6,0,0"
                        FontWeight="Bold"
                        Text="{Binding Name, Mode=OneWay}" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="12,0,0,6"
                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding Company, Mode=OneWay}" />
                </Grid>
            </DataTemplate>
        </ui:ListView.ItemTemplate>
    </ui:ListView>
</Border>

容器网格：

<Grid Grid.Row="1" Margin="0,10,0,20">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="269*" />
        <ColumnDefinition Width="131*" />
    </Grid.ColumnDefinitions>

看起来像这样

我想要什么

它移出了页面

我试图给listView以下属性，但它不起作用：

MaxHeight="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Border}}"

Answer 1

也许最通用且易于维护的方法是：

使您的顶级可见 UI 元素成为

Grid

，它应该按行排列。为其定义

<Grid.RowDefinitions>

。所有行都应该有

Height="Auto"

，除了这一行需要有

Height="*"

。

您的可变高度元素应放置在此

*

行中。这样，它将占据所有剩余的垂直空间。该空间将由整个窗口的大小控制。

您可以有多行带有

Height="*"

，但您最好在其他 UI 元素（例如边框）之间放置

<GridSplitterglt;

。该方法可以很容易地推广到不同嵌套级别的行和列的组合，其中一些还可以具有可变的高度或宽度。

请尝试一下，如果您遇到任何问题，请告诉我们。

谢谢。

—SA