WinUI 3中ListView垂直拉伸适配窗口Resize问题求助

核心问题分析 #

你的布局存在几个关键问题导致需求无法实现：

• 所有控件嵌套在StackPanel中，而StackPanel仅会根据子元素自身高度排列，无法让子元素拉伸填充剩余空间
• ListView被放在Grid的第一行（固定300高度），而非你需要的第二行
• 底部的ProgressBar和InfoBar直接叠在同一Grid行，会互相遮挡
• ListView设置了固定Width，无法自适应Grid列宽

具体修改步骤 #

1. 调整Grid行定义：

   • 第一行设为Auto，适配顶部固定控件的高度
   • 第二行设为*，让ListView可以拉伸填充剩余垂直空间
   • 第三行设为Auto，根据底部控件的实际高度自适应，确保固定在窗口底部

2. 拆分控件布局：

   • 将顶部的CommandBar、ComboBox、DatePicker等固定高度控件放在Grid的第一行
   • 将ListView单独放在Grid的第二行，移除固定Width，让它继承Grid列的宽度

3. 修复底部控件重叠：

   • 在Grid第三行嵌套一个垂直StackPanel，分别放置ProgressBar和InfoBar，避免互相遮挡

4. 优化ListView属性：

   • 移除多余的VerticalAlignment="Stretch"（Grid子元素默认就是Stretch）
   • 保留MinHeight确保窗口缩小时ListView有最小显示高度

修改后的完整XAML代码 #

<Grid Margin="6">
    <Grid.RowDefinitions>
        <!-- 顶部固定控件行，自适应高度 -->
        <RowDefinition Height="Auto"/>
        <!-- ListView填充行，占满剩余空间 -->
        <RowDefinition Height="*"/>
        <!-- 底部状态栏，自适应高度 -->
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="500"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- 顶部固定控件 -->
    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical">
        <CommandBar Background="Transparent" 
                    HorizontalAlignment="Left"
                    IsOpen="False" 
                    DefaultLabelPosition="Right">
            <AppBarButton Icon="AttachCamera" Label="Find Import Sources" x:Name="findSourcesButton"/>
            <AppBarButton Icon="Import" x:Name="importButton" Label="Import Selected Items"/>
        </CommandBar>

        <ComboBox Header="Sources:" x:Name="sourcesComboBox"/>
        <DatePicker Header="Import Date:      Select the required date to start the import from." Margin="0,20,0,10" />
        <TextBlock Text="Files:" Margin="0,20,0,10" />
    </StackPanel>

    <!-- 拉伸填充的ListView -->
    <ListView x:Name="fileListView"  
              Grid.Row="1" Grid.Column="0"
              MinHeight="300"
              SelectionMode="None"
              BorderBrush="#FF858585"   
              BorderThickness="1"
              ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.20*"/>
                        <ColumnDefinition Width="0.75*"/>
                    </Grid.ColumnDefinitions>
                    <!-- 注释内容保留原样 -->
                    <!--<CheckBox Grid.Column="0" IsChecked="{Binding ImportableItem.IsSelected, Mode=TwoWay}" />
                    --><!-- Click="CheckBox_Click"/><!--
                    <Image Grid.Column="1" Source="{Binding Thumbnail}" Width="120" Height="120" Stretch="Uniform"/>
                    <TextBlock Grid.Column="2" Text="{Binding ImportableItem.Name}" VerticalAlignment="Center" Margin="10,0"/>-->
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    
    <!-- 底部固定的进度条和信息栏 -->
    <StackPanel Grid.Row="2" Grid.ColumnSpan="3" Orientation="Vertical">
        <ProgressBar x:Name="progressBar" SmallChange="0.01" LargeChange="0.1" Maximum="1" MinHeight="20"/>
        <InfoBar
                IsOpen="True"
                IsIconVisible="True"
                IsClosable="True"
                Title="Title"
                Message="Message display here." />
    </StackPanel>
</Grid>

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