XAML 如何制作看起来像我想要的布局?

nfs0ujit  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(147)

我正在WinUI3上工作,下面的代码显示了该图像。

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <ItemsRepeater ItemsSource="{x:Bind ViewModel.Collection}">
        <ItemsRepeater.ItemTemplate>
            <DataTemplate x:DataType="models:Stock">
                <Border BorderBrush="Red" BorderThickness="1">
                    <StackPanel>
                        <Button Content="{x:Bind Code}" Margin="5"/>
                        <Button Content="{x:Bind Code}" Margin="5"/>
                        <Button Content="{x:Bind Code}" Margin="5"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
        <ItemsRepeater.Layout>
            <UniformGridLayout MaximumRowsOrColumns="2" Orientation="Vertical"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollViewer>

result
但我想要的是,项目的高度随着ScrollViewer大小的变化而变化。
项目的宽度有一个固定值,但我希望高度像垂直对齐的拉伸一样改变。
what i want
我该怎么做呢?

mv1qrgav

mv1qrgav1#

您可以通过在更改ScrollViewer大小时设置UniformGridLayoutMinItemHeight来完成此操作。

<ScrollViewer
    HorizontalScrollBarVisibility="Auto"
    SizeChanged="ScrollViewerControl_SizeChanged">
    <ItemsRepeater ItemsSource="{x:Bind ViewModel.Collection}">
        <ItemsRepeater.ItemTemplate>
            <DataTemplate x:DataType="models:Stock">
                <Border
                    BorderBrush="Red"
                    BorderThickness="1">
                    <StackPanel>
                        <Button
                            Margin="5"
                            Content="{x:Bind Code}" />
                        <Button
                            Margin="5"
                            Content="{x:Bind Code}" />
                        <Button
                            Margin="5"
                            Content="{x:Bind Code}" />
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
        <ItemsRepeater.Layout>
            <UniformGridLayout
                x:Name="ItemsRepeaterUniformGridLayout"
                MaximumRowsOrColumns="2"
                Orientation="Vertical" />
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollViewer>
private void ScrollViewerControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
    int maximumRowsOrColumns = this.ItemsRepeaterUniformGridLayout.MaximumRowsOrColumns;

    if (maximumRowsOrColumns > 0)
    {
        this.ItemsRepeaterUniformGridLayout.MinItemHeight = e.NewSize.Height / maximumRowsOrColumns;
    }
}

相关问题