Microsoft-ui-xaml: Question: When using UniformGridLayout items cannot expand

[matthew4850]

I have an items control that uses a horizontal uniform grid layout. It fixes the hight of each item as the hight of the first item, this means that if any item after the first has a larger height it does not expand.
XAML:

 <StackPanel Width="375">
            <winui:ItemsRepeater ItemsSource="{Binding someSource}">
                <winui:ItemsRepeater.Layout>
                    <winui:UniformGridLayout Orientation="Horizontal" ItemsStretch="Fill"/>
                </winui:ItemsRepeater.Layout>
                <winui:ItemsRepeater.ItemTemplate>                                                  
                    <DataTemplate>
                        <StackPanel Width="100">
                            <TextBlock x:Name="FieldName" TextWrapping="NoWrap" Text="{Binding Name}" FontSize="13"  FontWeight="SemiBold" />
                            <TextBlock x:Name="Value" TextWrapping="Wrap" Text="{Binding Value}" FontSize="13" Opacity="0.75"/>
                        </StackPanel>
                    </DataTemplate>
                </winui:ItemsRepeater.ItemTemplate>
            </winui:ItemsRepeater>
        </StackPanel>
````
data source:
```json
{
    "someSource": [
        {
            "Name": "First value",
            "Value": "a"
        },
        {
            "Name": "Second value",
            "Value": "a
b
c"
        },
        {
            "Name": "Third value",
            "Value": "a"
        }

    ]
}

Nothing past the first row of text shows. How can I make it so the hight of each item expands to the hight of the largest? Ideally, if items are wrapped onto a new line each item in each row should have the same height but each row should have a different hight if needed.

[ranjeshj]

@matthew4850 That is by design. The issue is that it is a virtualizing layout, so it does not measure all the items to know the largest size. If you know ahead of time what the largest size is going to be you could set ItemWidth/Height properties on the layout or set MinWidth/Height on the items.

[matthew4850]

@ranjeshj I do not know what the height will be ahead of time, do you have any ideas on how to make this work? Are there any non-virtulising layouts that might work?

[michael-hawker]

@matthew4850 you could use the UniformGrid from the toolkit in an ItemsControl:

    <ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource ItemTemplate}" Width="350">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <controls:UniformGrid Columns="3" VerticalAlignment="Top"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

[ranjeshj]

@matthew4850 how many items do you expect to be in this panel ? If you expect only a few items, then virtualization might not be something you need and the one in toolkit would work. However, if you plan on having hundreds of items, then it becomes essential for perf.

[matthew4850]

@ranjeshj probably around 10 maximum and they would all be visible at once

[ranjeshj]

If maximum is 10 items, then using UniformGrid sounds reasonable. The other option if you would like to use ItemsRepeater is to build your own custom layout deriving from NonVirtualizingLayout (very similar to building a custom panel), but that is a little bit more work than just using one that already exists.

@anawishnoff This sounds like a good candidate for a sample.

[matthew4850]

@ranjeshj a sample would be great! I couldn't find any example on how to implement NonVirtualizingLayout or even any implementation of it.

[ranjeshj]

@matthew4850 There are some samples in the repo here. Some docs here for ItemsRepeater in general.

[matthew4850]

@ranjeshj thanks!