WPF中ListView无法适配Border高度触发滚动，导致页面溢出求助

问题现象 #

在Grid中嵌套Border，Border内包含ListView时，ListView不会根据Border高度触发垂直滚动，反而撑大Border高度，导致页面内容溢出。

相关代码 #

Border 及内部 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 Grid.Row="1" Margin="0,10,0,20">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="269*" />
        <ColumnDefinition Width="131*" />
    </Grid.ColumnDefinitions>
</Grid>

已尝试但无效的代码 #

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

效果说明 #

• 当前效果：ListView撑大Border，页面底部内容溢出可视区域
• 期望效果：ListView在Border高度范围内显示，内容超出时自动出现垂直滚动条
• 溢出问题：页面底部内容被挤出，无法正常查看

解决方案 #

1. 给容器Grid的行设置高度约束 #

当前Grid的RowDefinition使用*会自动扩展高度，导致Border没有明确高度限制。可改为固定高度或最大高度：

<!-- 设置固定高度 -->
<Grid.RowDefinitions>
    <RowDefinition Height="300"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!-- 或设置最大高度 -->
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" MaxHeight="400"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

2. 正确绑定ListView的MaxHeight（考虑Border的Padding） #

直接绑定Border的ActualHeight会包含Padding，导致ListView超出Border范围，需减去上下Padding总和：
首先创建值转换器：

public class SubtractValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double actualHeight && double.TryParse(parameter.ToString(), out double subtractValue))
        {
            return actualHeight - subtractValue;
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在XAML资源中声明转换器：

<Window.Resources>
    <local:SubtractValueConverter x:Key="SubtractValueConverter"/>
</Window.Resources>

给ListView绑定MaxHeight：

<ui:ListView
    ...
    MaxHeight="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Border}, Converter={StaticResource SubtractValueConverter}, ConverterParameter=20}"/>

（ConverterParameter=20对应Border上下Padding总和：10+10）

3. 显式启用ListView的垂直滚动 #

默认ListView内部ScrollViewer已启用，可显式设置确认：

<ui:ListView
    ...
    ScrollViewer.VerticalScrollBarVisibility="Auto"/>

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