Pure XAML approach to evenly distributing an unkno

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

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: