xaml - 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上方 MainGrid -> 它将是可滚动的，但响应性不起作用( <VisualState x:Name="WideState"> )

你有什么想法我该怎么做 Grid可滚动？谢谢。

Answer 1

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

结构将如下所示:

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