Search code examples
layout.net-6.0winui-3

How to fill TextBox inside ItemsRepeater in WinUI 3?

I'm trying to fill all the width space with a list of TextBox inside a collection. In UWP was so simple as adding <UniformGrid Rows="1"/> to ItemsControl, but using WinUI 3 I need to change to ItemsRepeater and UniformGridLayout but there's no Row property in UniformGridLayout. This is my code:

<ItemsRepeater ItemsSource="{x:Bind ViewModel.Specimens}">
    <ItemsRepeater.Layout>
        <UniformGridLayout Orientation="Horizontal" ItemsStretch="Fill"/>
    </ItemsRepeater.Layout>
    <ItemsRepeater.ItemTemplate>
        <DataTemplate x:DataType="viewModels:SpecimenViewModel">
            <TextBox Margin="10" Text="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
        </DataTemplate>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>

This is what is showing: enter image description here

Expected behaviour: enter image description here

Finally, I could check that the TextBox increase their sizes at same time as the text inside increase, but I want to have the same width all the time.

Solution

  • I think you were nearly there I think you just needed to add the MaximumRowsOrColumns to the number of columns, put some space around with MinColumnSpacing="10" ItemsJustification="SpaceAround"

    for example something like:

    <UniformGridLayout MinColumnSpacing="10"
                            ItemsJustification="SpaceAround" MaximumRowsOrColumns="2" Orientation="Horizontal" ItemsStretch="Uniform"/>

    edit: I Changed ItemsStretch Fill to Uniform, it's a better experience when have different height content