在容器中均匀分布未知数量的孩子的纯 XAML 方法 [英] Pure XAML approach to evenly distributing an unknown number of children in a container

问题描述

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

当您知道子项的数量时，使用 Grid 很容易(只需使用 ColumnDefinitions 和 Width="*")，但我不确定如何使用面板 (StackPanel、Pivo​​tHeaderPanel 等)或列表(GridView、ListView 等).

解决方案

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

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

解决方案

According to your description, what you need is a panel like the UniformGrid in WPF. UniformGrid provides a way to arrange content in a grid where all the cells in the grid have the same size. However there is no build-in UniformGrid in UWP. We can implement it by ourselves or use a third party UniformGrid like what in WinRTXamlToolkit.

Here using the UniformGrid in WinRTXamlToolkit for example. To use WinRTXamlToolkit, we can install it from nuget: WinRT XAML Toolkit for Windows 10.

Then add xmlns in the page like:

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

After this, we can use the UniformGrid like:

<toolkit:UniformGrid Rows="1" />

Here I set the Rows property to 1 and the Columns property to the default value 0. A value of zero (0) for the Columns property specifies that the column count is computed based on the number of rows and the number of visible child elements that are in the Grid. So all the children in this UniformGrid will be put in one row and as this is a UniformGrid, all the columns will have the same width.

Following is a sample that uses UniformGrid as the ItemsPanel of a 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>

Code-behind:

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

And it looks like:

这篇关于在容器中均匀分布未知数量的孩子的纯 XAML 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！