xaml - 无法让 VariableSizedWrapGrid 换行

Question

我在让 VariableSizedWrapGrid 水平换行时遇到问题。我所能得到的似乎只是我的元素垂直堆叠在一个列中。我不确定我错过了什么。

理想情况下，我希望有 3 列输入字段。字段的数量会根据所选的表而变化，因此它们只需要包装即可。

<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

原来我并不完全理解 ItemsControl 是如何工作的。设法让它像这样工作：

<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>