How can I make a layout that looks like what I want?

Question

I am working on WinUI3 and the code below shows the image.

<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

But what I want is that the height of the item changes as the size of the ScrollViewer changes.

The width of the item has a fixed value, but I want the height to be changed like Stretch of VerticalAlignment.

what i want

How can I make it?

Answer 1

You can do it by setting the UniformGridLayout's MinItemHeight when the ScrollViewer size is changed.

<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;
    }
}