WinUI 3中动态设置ScrollViewer高度的实现问题

问题根源 #

你的布局逻辑框架没问题，但ScrollViewer未正确填充屏幕剩余空间，核心原因有两个：

1. 外层Grid未被限制高度，会自动拉伸以容纳所有内部元素，而非适配屏幕高度
2. ScrollViewer内的StackPanel是自适应高度容器，会让ListView无限扩展，无法触发滚动

修正后的完整XAML代码 #

<!-- 确保外层Grid绑定到根容器的实际高度，比如Window的根Grid -->
<Grid Margin="30,30,30,30" Height="{Binding ElementName=MainWindowRoot, Path=ActualHeight}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
            
    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <TextBlock Name="projectNumber" Text="Project Number" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="taskName" Text="Task" Width="750" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="dueDate" Text="Due Date" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
        <TextBlock Name="assignedBy"  Text="Assigned By" Width="100" Margin="10,10,10,10" TextAlignment="Center"/>
    </StackPanel>
    <!-- 用Border替代Line，自动适配Grid宽度 -->
    <Border Grid.Row="1" Height="1" Background="DimGray"/>
    <ScrollViewer Name="scrollViewer" Grid.Row="2" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
        <!-- 替换StackPanel为Grid，让ListView填充ScrollViewer可用空间 -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ListView Name="tasksPanel" Grid.Row="0" VerticalAlignment="Stretch"/>
            <ListView Name="completeTasksPanel" Grid.Row="1" VerticalAlignment="Stretch"/>
        </Grid>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal" Margin="0,10,0,10" Grid.Row="3">
        <TextBox/>
        <TextBox/>
        <TextBox/>
    </StackPanel>
</Grid>

关键修改说明 #

• 绑定外层Grid高度：将Grid的Height绑定到Window根容器的ActualHeight，强制Grid使用屏幕可用高度，而非内部元素总高度
• 替换ScrollViewer内的StackPanel：StackPanel会无限拉伸容纳ListView内容，改用Grid的*行高让两个ListView平分ScrollViewer的可用空间，超出时触发滚动
• 配置ScrollViewer滚动属性：显式设置VerticalScrollMode="Auto"和VerticalScrollBarVisibility="Auto"，确保内容溢出时显示滚动条
• 优化分割线：用Border替代Line，无需手动设置X2宽度，自动适配Grid横向空间

可选优化 #

如果需要适配不同屏幕尺寸，建议移除TextBlock的固定宽度，改用网格列分配比例：

<StackPanel Orientation="Horizontal" Grid.Row="0" HorizontalAlignment="Stretch">
    <Grid HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="7.5*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Name="projectNumber" Text="Project Number" Margin="10" TextAlignment="Center"/>
        <TextBlock Grid.Column="1" Name="taskName" Text="Task" Margin="10" TextAlignment="Center"/>
        <TextBlock Grid.Column="2" Name="dueDate" Text="Due Date" Margin="10" TextAlignment="Center"/>
        <TextBlock Grid.Column="3" Name="assignedBy" Text="Assigned By" Margin="10" TextAlignment="Center"/>
    </Grid>
</StackPanel>

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