Can't get VariableSizedWrapGrid to wrap

Question

I'm having issues getting the VariableSizedWrapGrid to wrap horizontally. All I can seem to get are my elements stacked vertically in a single column. I'm not sure what I'm missing.

Ideally I would like to have 3 columns of input fields. The number of fields changes depending on the table selected so they need to just, you know, wrap.

<ScrollViewer
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

<VariableSizedWrapGrid 
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Orientation="Horizontal">
    <ItemsControl
        ItemsSource="{x:Bind ViewModel.CurrentRow.Values}">
        <ItemsControl.ItemTemplate>
            <DataTemplate x:DataType="models:RowValue">

                <Grid Width="Auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <TextBlock 
                        Text="{x:Bind key.ColumnValidation.column_label}"
                        Margin="0"
                        Padding="0"
                        Grid.Column="0">
                    </TextBlock>

                    <TextBox
                        Grid.Column="1"
                        Visibility="{x:Bind vm:Converters.IsTextBoxField(key.ColumnValidation.data_type)}"
                        Text="{x:Bind value}">
                    </TextBox>

                    <RichTextBlock
                        Visibility="{x:Bind vm:Converters.IsHyperlinkField(key.ColumnValidation.data_type)}">
                        <Paragraph>
                            <Span>
                                <Hyperlink />
                            </Span>
                        </Paragraph>
                    </RichTextBlock>

                    <DatePicker 
                        Visibility="{x:Bind vm:Converters.IsDateField(key.ColumnValidation.data_type)}">
                    </DatePicker>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</VariableSizedWrapGrid>
</ScrollViewer>

Answer 1

Turns out I didn't fully understand how ItemsControl works. Managed to get it working like so:

<ScrollViewer
    Grid.Column="0"
    Grid.ColumnSpan="2"
    Grid.Row="1"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">

    <ItemsControl
        Height="Auto" 
        Width="Auto" 
        ItemsSource="{x:Bind EditRow.Values}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid 
                    Orientation="Horizontal"
                    MaximumRowsOrColumns="4"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Top"
                    ItemWidth="200"
                    ItemHeight="75">

                </VariableSizedWrapGrid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate x:DataType="models:RowValue">
                <Grid
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Top"
                    Width="190"
                    Margin="5">
                    <TextBox
                        Header="{x:Bind key.ColumnValidation.column_label}"
                        Visibility="{x:Bind vm:Converters.IsTextBoxField(key.ColumnValidation.data_type)}"
                        Text="{x:Bind value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    </TextBox>

                    <TextBox
                        Header="{x:Bind key.ColumnValidation.column_label}"
                        Visibility="{x:Bind vm:Converters.IsHyperlinkField(key.ColumnValidation.data_type)}"
                        Text="{x:Bind value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">

                    </TextBox>

                    <!-- todo: create converter for fusion date format -->

                    <Viewbox VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <DatePicker
                        Header="{x:Bind key.ColumnValidation.column_label}"
                        Visibility="{x:Bind vm:Converters.IsDateField(key.ColumnValidation.data_type)}">
                        </DatePicker>
                    </Viewbox>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>