纯 XAML 方法在容器中均匀分布未知数量的 children

Question

假设我有一个具有固定宽度和 variable/unknown 数量 children 的 StackPanel（方向="Horizontal"），如何我要告诉 XAML 中的所有 children（不是在代码中）将它们的宽度设置为全部相等并填满整个 StackPanel 的宽度吗？

如果您知道 children 的数量（只需使用 Width="*" 的 ColumnDefinitions），那么使用 Grid 就足够了，但我不是确定如何使用面板（StackPanel、PivotHeaderPanel 等）或列表（GridView、ListView 等）。

Answer 1

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

那样使用第三方的UniformGrid

这里以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 作为 GridView 的 ItemsPanel:

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

看起来像：

纯 XAML 方法在容器中均匀分布未知数量的 children

Pure XAML approach to evenly distributing an unknown number of children in a container

win-universal-app

uwp-xaml