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

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