如何让我在 xaml 表单上的 ItemsControl 拉伸以适合网格单元格？答案

【问题标题】：How can I get my ItemsControl on a xaml form to stretch to fit the grid cell?如何让我在 xaml 表单上的 ItemsControl 拉伸以适合网格单元格？
【发布时间】：2017-12-05 16:07:52
【问题描述】：

我正在尝试让我的 ItemsControl 展开以适合它所在的网格列。

这就是我想要得到的：

这是我实际得到的：

我已经尝试过 Microsoft.ToolKit.Uwp.Controls 中的 StackPanel、ViewBox、WrapControl 并将 HorizontalAlignment 设置为拉伸。

我已尝试将其转换为 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>

【问题讨论】：

ItemsControl 的行为就好像它有 HorizontalAlignment="Left";是否有可能在某处设置的隐式样式？如果将 HorizontalAlignment="Stretch" 添加到 ItemsControl 会怎样？这是网格子节点的默认设置（您可以看到两个红边边框就是这种情况），但明确尝试只是为了查看。
@EdPlunkett 我添加了 HorizontalAlignment="Stretch"，但没有任何改变。（如果我将它设置为“右”，它会将其移动到单元格的右侧。）我在 DataTemplate 内的网格上设置了 MinWidth="250"，这使它更接近我想要的，但我需要它是百分比，以便它适用于不同的屏幕尺寸。
你能在 UWP 中使用 UniformGrid 吗？在 WPF 中，您可以通过将 ItemsPanelTemplate 中的 StackPanel 替换为 <UniformGrid Rows="1" /> 来解决此问题——它会将子项放在列中，并拉伸它们以填充自身。但是 IIRC UWP 没有这种控制权。有人seem to think this works但我没试过。
但无论如何：问题不在于 ItemsControl 没有拉伸；将其背景设置为红色，您会看到它。问题是它的 children 没有伸展。
我明白你的意思是它的孩子没有调整大小来填充它。我需要一个控件，我可以将其方向设置为水平，并且其子项将调整大小以适应可用空间。 UniformGrid 在 UWP 中不可用。

标签： xaml windows-10-universal uwp-xaml

【解决方案1】：

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

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

Here is a frequently-recommended UWP implementation of UniformGrid.

【讨论】：

我收到错误：在“RelativeSource”类型中找不到属性“AncestorType”，在“RelativeSource”类型中找不到属性“ElementName”。
支持VisualTreeHelper。它反对：contentPresenter.SetBinding(TotalAvailableActualWidthProperty, new Binding("ActualWidth") { Source = panel });。错误是“绑定不包含采用 1 个参数的构造函数”。我试图解决它： Binding myBinding = new Binding(); myBinding.ElementName = "实际宽度"; myBinding.Source = 面板； contentPresenter.SetBinding(TotalAvailableActualWidthProperty, myBinding);这运行正常，但没有任何变化。
我尝试了更新版本，但没有任何区别。我已将我的迷你项目放在 Dropbox 上，以防万一我在做一些愚蠢的事情。 dropbox.com/s/gqborjhurtqzgg9/PaymentScreen.zip?dl=0
让我们continue this discussion in chat.
非常感谢你告诉我github.com/rickapps/UWP-UniformGrid-Control