UWP 如何在 XAML 中使网格可滚动

Question

我需要使 XAML（在 UWP 应用程序中）中的表单具有响应性并且可滚动。我有这样的代码

 <Grid x:Name="MainGrid">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="24"/>
                    <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
                    <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
                    <Setter Target="FirstGrid.Margin" Value="0 0 12 0"/>
                    <Setter Target="SecondGrid.Margin" Value="12 0 0 0"/>
                    <Setter Target="SecondGrid.(Grid.Column)" Value="1"/>
                    <Setter Target="SecondGrid.(Grid.Row)" Value="0"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainGrid.Margin" Value="12"/>
                    <Setter Target="FirstGrid.Margin" Value="0 0 0 0"/>
                    <Setter Target="SecondGrid.Margin" Value="0 0 0 0"/>
                    <Setter Target="MainGrid.RowDefinitions[0].Height" Value="auto"/>
                    <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
                    <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
                    <Setter Target="SecondGrid.(Grid.Column)" Value="0"/>
                    <Setter Target="SecondGrid.(Grid.Row)" Value="1"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>


    <Grid x:Name="FirstGrid" Grid.Column="0" Grid.Row="0">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="*" MaxWidth="500"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblName" />
            <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtName" />
        </Grid>

    </Grid>
    <Grid x:Name="SecondGrid" Grid.Column="1" Grid.Row="0" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="*" MaxWidth="500"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" x:Uid="lblAge" />
            <my:SfTextBoxExt Grid.Column="1" Grid.Row="0" x:Uid="txtAge" />
        </Grid>

    </Grid>

</Grid>

这是响应式的，但不可滚动。当我在->ScrollViewer上方添加 a 时MainGrid，它将是可滚动的，但响应能力不起作用 ( <VisualState x:Name="WideState">)

你有什么IDE让我可以Grid滚动吗？谢谢。

Answer 1

您需要拥有作为根VisualStateGroups容器的成员。

结构如下：

<Grid Name=root>
    VisualStateGroups here....
    <ScrollViewer>
        <Grid Name=MainGrid>
            ...First and Second grid...
        </Grid>
    </ScrollViewer>
</Grid>