win-universal-app - 纯 XAML 方法在容器中均匀分布未知数量的子级

Question

假设我有一个 StackPanel (Orientation="Horizo​​ntal") 具有固定宽度和可变/未知数量的子项，我如何告诉 XAML 中的所有子项（不在代码中）将它们的宽度设置为全部相等和填满整个 StackPanel 的宽度？

当您知道孩子的数量时，使用 Grid 很容易（只需使用 Width="*" 的 ColumnDefinitions），但我不确定如何使用面板（StackPanel、Pivo​​tHeaderPanel 等）或列表（GridView、列表视图等）。

Answer 1

根据您的描述，您需要的是一个像WPF中的UniformGrid这样的面板。UniformGrid 提供了一种在网格中排列内容的方法，其中网格中的所有单元格都具有相同的大小。但是 UWP 中没有内置的 UniformGrid。我们可以自己实现它，也可以使用第三方 UniformGrid，如WinRTXamlToolkit中的。

这里以 WinRTXamlToolkit 中的 UniformGrid 为例。要使用 WinRTXamlToolkit，我们可以从 nuget：WinRT XAML Toolkit for Windows 10安装它。

然后xmlns在页面中添加如下：

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

在此之后，我们可以像这样使用 UniformGrid：

<toolkit:UniformGrid Rows="1" />

这里我将Rows属性设置为1和Columns属性设置为默认值0。Columns 属性的值为零 (0) 指定列计数是根据行数和 Grid 中可见子元素的数量计算的。因此，此 UniformGrid 中的所有子项将被放置在一行中，并且由于这是一个 UniformGrid，因此所有列将具有相同的宽度。

以下是使用 UniformGrid 作为 a 的ItemsPanel示例GridView：

XAML：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <GridView x:Name="MyGridView" Height="60">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:UniformGrid Rows="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </GridView.ItemContainerStyle>

            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Red">
                        <TextBlock HorizontalAlignment="Center" FontSize="30" Text="{Binding }" />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <Button Click="Button_Click">Add a item</Button>
    </StackPanel>
</Grid>

代码隐藏：

public sealed partial class MainPage : Page
{
    private ObservableCollection<string> myList = new ObservableCollection<string> { "1", "2", "3", "4", "5" };
    private int i = 6;

    public MainPage()
    {
        this.InitializeComponent();
        MyGridView.ItemsSource = myList;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        myList.Add(i.ToString());
        i += 1;
    }
}

它看起来像：