WinUI3中如何实现Item高度随ScrollViewer自适应的布局？

我明白你想要的效果——让每个Stock条目在两列布局下，宽度固定，高度自动填满ScrollViewer的可用空间，而不是跟着内容高度走。咱们来调整代码实现这个目标：

修改后的完整XAML代码 #

<ScrollViewer HorizontalScrollBarVisibility="Auto" 
              VerticalScrollBarVisibility="Disabled"
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch"
              x:Name="MainScrollViewer">
    <ItemsRepeater ItemsSource="{x:Bind ViewModel.Collection}">
        <!-- 让Item容器垂直拉伸 -->
        <ItemsRepeater.ItemContainerStyle>
            <Style TargetType="RepeaterItem">
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="Margin" Value="4"/> <!-- 可选：添加条目间距 -->
            </Style>
        </ItemsRepeater.ItemContainerStyle>
        
        <ItemsRepeater.ItemTemplate>
            <DataTemplate x:DataType="models:Stock">
                <Border BorderBrush="Red" BorderThickness="1"
                        VerticalAlignment="Stretch">
                    <!-- 用Grid代替StackPanel，让内部控件可以垂直拉伸 -->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Button Content="{x:Bind Code}" Margin="5" Grid.Row="0"/>
                        <Button Content="{x:Bind Code}" Margin="5" Grid.Row="1"/>
                        <Button Content="{x:Bind Code}" Margin="5" Grid.Row="2"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
        
        <ItemsRepeater.Layout>
            <UniformGridLayout MaximumRowsOrColumns="2" 
                               Orientation="Vertical"
                               MinItemHeight="{Binding ElementName=MainScrollViewer, Path=ActualHeight}"
                               MaxItemHeight="{Binding ElementName=MainScrollViewer, Path=ActualHeight}"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollViewer>

关键修改点说明 #

• ScrollViewer设置：

  • 禁用垂直滚动VerticalScrollBarVisibility="Disabled"，因为我们要让Item高度填满ScrollViewer，不需要垂直滚动；保留水平滚动用于列数超过2时的横向滚动。
  • 设置HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"，确保ScrollViewer占满父容器的可用空间。

• Item容器样式：

  • 给RepeaterItem设置VerticalAlignment="Stretch"，让Item容器能填满布局分配的高度空间。

• UniformGridLayout调整：

  • 通过绑定MinItemHeight和MaxItemHeight到ScrollViewer的ActualHeight，强制每个Item的高度等于ScrollViewer的实际高度。

• 内部布局替换：

  • 把原来的StackPanel换成Grid，并给每个Button分配等比例的行高（Height="*"），这样内部控件会自动拉伸填满Border的高度，达到你想要的垂直拉伸效果。

如果你的ScrollViewer有内边距，记得在绑定ActualHeight时减去对应的数值，比如可以实现一个简单的数值减法转换器来处理。

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