Question: Control with uniformly stretched children?

[tristanlabelle]

New user of WinUI 3.0 here. I'm trying to layout items from an ItemsSource in a single row such that each item gets allocated a width corresponding to the width of the parent control divided by the number of children. The closest I found is having an <ItemsRepeater> with a <UniformGridLayout>, but I can't find a combination of ItemsJustification and ItemsStretch that will stretch the children rather than padding with blank space. <UniformGrid> from the CommunityToolkit won't work because I can't data-bind an ItemsSource. I thought of subclassing Layout but I can't find documentation on the WinRT goop required for that from C#. Any ideas?

[michael-hawker]

@tristanlabelle can you share the XAML you're using? ItemsStretch="Uniform" should be what you need.

If this isn't what you're trying to do a visual of the layout you're trying to achieve would help.

If you don't need the virtualization, and UniformGrid does what you need, you just need to wrap it in an ItemsControl or ListView and set the ItemPanelTemplate to use the UniformGrid so you use the ItemsSource of that container.

[tristanlabelle]

Thanks for the quick reply @michael-hawker , and pardon me for not being as responsive -- I missed the notification.

Here's a repro (not quite minimal, there are other things going on higher in the tree). Given that the green Border is very wide, I would expect that the ItemsRepeater would be just as wide and that it would stretch its elements, but it does not. Also, ItemsRepeater.Background appears to be ignored.

<Border Grid.Column="1" BorderThickness="1" BorderBrush="Green">
    <ItemsRepeater HorizontalAlignment="Stretch" Background="Blue" ItemsSource="{Binding Measures}">
        <ItemsRepeater.Layout>
            <UniformGridLayout Orientation="Horizontal" ItemsStretch="Uniform" />
        </ItemsRepeater.Layout>
        <ItemsRepeater.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" MinWidth="50" MinHeight="20" BorderBrush="Red" />
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
</Border>

[michael-hawker]

Hmm, I see the blue background with the older WinUI 2.4.2...

For the border size, I imagine since they don't have any size, they're reporting their min size and then UniformGridLayout is trying to make them all the same size... but it is a bit odd that none of the settings change that behavior...

[tristanlabelle]

@michael-hawker Should I file bugs for the background color and uniform stretching both?

[michael-hawker]

@tristanlabelle probably makes sense to have a separate bug for the background if that's not working on the latest. For the stretching, I'd leave this question here for the WinUI team to respond to for now.

[StephenLPeters]

@tristanlabelle I think the behavior you are describing is a standard GridView, no?

@ranjeshj FYI about the repeater layout issues. @chingucoding might have thoughts too.

[marcelwgn]

@tristanlabelle The behavior of the items only being on the left can be changed with the ItemsJustification property. If you set it to SpaceAround or SpaceBetween, you can see how they are taking up all the space with padding between them. But I think @michael-hawker is also right with his explanation why the borders don't take up more space, I think they just render their minimum size and don't want to increase beyond that.

Regarding ItemsRepeater not having a background I'm suprised it even exists since the control doesn't even have a template, maybe @ranjeshj knows more about this?

Also, GridView should also be suitable here as @StephenLPeters pointed out correctly.