Question

Let's say I have a StackPanel (Orientation="Horizontal") with a fixed width and a variable/unknown amount of children, how do I tell all the children in XAML (not in code) to set their widths' to all be equal and fill up the entire StackPanel's width?

It's easy enough to do with Grid when you know the number of children (just use ColumnDefinitions with Width="*"), but I'm not sure how to do it with panels (StackPanel, PivotHeaderPanel, etc) or lists (GridView, ListView, etc).

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作为ItemsPanel的{{1}}：

XAML：

GridView

代码隐藏：

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

它看起来像：

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

1 个答案: