无法获取VariableSizedWrapGrid进行包装

如何解决无法获取VariableSizedWrapGrid进行包装

我在让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>

解决方法

结果是我不完全了解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,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>