如何在xaml表单上获取我的ItemsControl以进行拉伸以适合网格单元格？

Question

我试图让我的ItemsControl展开以适应它所在的网格列。

这就是我想要得到的：

这就是我实际得到的：

我尝试过来自Microsoft.ToolKit.Uwp.Controls的StackPanel，ViewBox，WrapControl，并将Horizo​​ntalAlignment设置为拉伸。

我已尝试将其转换为ListView。

这是我的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

你想要的是WPF UniformGrid的等价物，它将其客户区域平均分配给它们的子项：设置Rows="1"并将它们水平排列：

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

Here is a frequently-recommended UWP implementation of UniformGrid