How can I get my ItemsControl on a xaml form to stretch to fit the grid cell?

Question

I'm trying to get my ItemsControl to expand to fit the grid column it is in.

This is what I'm trying to get:

This is what I'm actually getting:

I've tried StackPanel, ViewBox, WrapControl from Microsoft.ToolKit.Uwp.Controls and setting HorizontalAlignment to stretch.

I've tried converting it to a ListView.

Here's my xaml:

<Page
    x:Class="PaymentScreen.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PaymentScreen"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    mc:Ignorable="d">

    <Page.DataContext>
        <local:PaymentVM></local:PaymentVM>
    </Page.DataContext>

    <Grid x:Name="MainGrid">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.10*"></ColumnDefinition>
            <ColumnDefinition Width="0.80*"></ColumnDefinition>
            <ColumnDefinition Width="0.10*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*"></RowDefinition>
            <RowDefinition Height="0.30*"></RowDefinition>
            <RowDefinition Height="0.65*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.66*"></ColumnDefinition>
                <ColumnDefinition Width="0.33*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" BorderBrush="Red" BorderThickness="1"></Border>
            <Border Grid.Column="1" BorderBrush="Red" BorderThickness="1"></Border>



                <ItemsControl Grid.Column="0"  Grid.Row="1" ItemsSource="{x:Bind ViewModel.PaymentEntryLines}" >

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>

                            <StackPanel Orientation="Horizontal"></StackPanel>

                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="local:PaymentLine" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>

                                <TextBox Grid.Row="0"  Text="To Pay:"></TextBox>
                                <TextBox Grid.Row="1" Text="{x:Bind AmountToPay, Mode=TwoWay}"></TextBox>
                                <TextBox Grid.Row="2" Text="Paid:"></TextBox>
                                <TextBox Grid.Row="3" Text="{x:Bind AmountPaid, Mode=TwoWay}"></TextBox>
                            </Grid>

                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>



            <Border Grid.Column="1" Grid.Row="1">
            <StackPanel>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>

                    <TextBox Grid.Row="0"  Text="To Pay:"></TextBox>
                    <TextBox Grid.Row="1" Text="300.10"></TextBox>
                    <TextBox Grid.Row="2" Text="Paid:"></TextBox>
                    <TextBox Grid.Row="3" Text="500.40"></TextBox>
                </Grid>
            </StackPanel>

            </Border>
        </Grid>

    </Grid>
</Page>

Answer 1

What you want is an equivalent of the WPF UniformGrid, which divides its client area evenly among its children: Set Rows="1" and it arrange the children horizontally:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <somens:UniformGrid Rows="1" />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Here is a frequently-recommended UWP implementation of UniformGrid.