如何滚动网格 Windows phone 8.1

Question

我有一个设置页面，在 4 个不同的堆栈面板中包含多个文本框组件。每个面板都在一个网格组件中：

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackPanel Margin="10,0,0,30" Grid.Row="0">...

    <StackPanel Name="stackSettings" Grid.Row="1">...

    <StackPanel Name="stackCustomSettings" Grid.Row="2">...

    <StackPanel Name="stackSaveSettings" Grid.Row="3">...

</Grid>

如何修改 xaml 以便网格垂直滚动？

Answer 1

以下代码对我有用：

<Page>
    <ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackPanel Margin="10,0,0,30" Grid.Row="0">...

            <StackPanel Name="stackSettings" Grid.Row="1">...

            <StackPanel Name="stackCustomSettings" Grid.Row="2">...

            <StackPanel Name="stackSaveSettings" Grid.Row="3">...
        </Grid>
    </ScrollViewer>
</Page>

你的父元素是什么？堆栈面板 ?

Answer 2

首先，这段代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <!-- Your content -->
</Grid>

等于：

<StackPanel>
    <!-- Your content -->
</StackPanel>

因为每行的高度设置为 Auto，这意味着整个 Grid 将与其内容一样高。如果您希望它可以滚动，只需将它放在 ScrollViewer 内即可。但是，ScrollViewer 不能位于行高设置为 Auto 的 StackPanel 或 Grid 内，因为它不会滚动。

工作示例：

<Page>
    <ScrollViewer>
        <StackPanel>
            <!--Place your controls here-->
        </StackPanel>
    </ScrollViewer>
</Page>

如何滚动网格 Windows phone 8.1

How to scroll grid Windows phone 8.1

xaml

windows-phone-8.1