滚动查看器无法在网格上工作

您好，我正在 Windows 10 中学习 UWP，我需要滚动网格。 他们有两段代码很相似，我的本意是在grid2中滚动，第一段代码：

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

        <CommandBar VerticalAlignment="Top" Grid.Row="0">
            <CommandBar.Content>
                <TextBlock Name="CurrentDateText" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" FontStretch="ExtraExpanded"/>
            </CommandBar.Content>
            <CommandBar.PrimaryCommands>
                <AppBarButton Name="button1" Icon="Forward" Label="button" Click="NextButton_Click_1"/>
            </CommandBar.PrimaryCommands>
        </CommandBar>

           <Grid Grid.Row="1" Grid.ColumnSpan="3"  Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        </Grid>

                <ScrollViewer x:Name="Scroll" Grid.Row="2" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled">
            <Grid Grid.ColumnSpan="3" Name="Grid2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        </Grid>
        </ScrollViewer>
    </Grid>

在第二段代码中：

 <Grid>

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

        <!-- Header -->
        <Rectangle Grid.Row="0" Grid.ColumnSpan="3"/>
        <TextBlock Grid.Column="1" Name="CurrentDateText"  />


            <Button Name="NextButton" Grid.Column="2" Content="&gt;" 
                    HorizontalAlignment="Right" Margin="20" 
                    Click="NextButton_Click_1"/>

                           <ScrollViewer x:Name="Scroll" VerticalAlignment="Top" Grid.Row="1" VerticalScrollBarVisibility="Hidden">
                <Grid Grid.ColumnSpan="3" Name="Grid2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ScrollViewer>

        </Grid>

第一段代码不起作用，第二段代码起作用。 我不明白出了什么问题，我不明白为什么它首先不起作用。 谢谢

对于初学者来说这是一个常见的错误，您不应该为此感到难过。关于滚动查看器要记住的一点是它必须有高度和宽度。有时您设置高度和宽度。有时您可以根据容器的大小来设置高度和宽度。正确的？

看这个：

<ScrollViewer>
    <Grid Height="1000" />
</ScrollViewer>

在该示例中，滚动查看器的表现就像它根本不存在一样。为什么？因为它没有高度和宽度。在这种情况下，它的大小将与其内容相同。这基本上就是您所看到的。

看这个：

<ScrollViewer Height="100">
    <Grid Height="1000" />
</ScrollViewer>

这可以很好地垂直滚动，但永远不会水平滚动。你能明白为什么吗？因为没有宽度。有时这是完美的场景。但这是另一件让开发人员措手不及的事情。

看这个：

<StackPanel>
    <ScrollViewer>
        <Grid Height="1000" />
    </ScrollViewer>
<StackPanel>

这是另一个吸引很多开发人员的场景。为什么？因为堆栈面板的高度是无限的。由于高度和宽度基本上由容器继承，因此滚动查看器永远没有理由滚动，因为它已经允许增长到无限大小。

看这个：

<Grid>
    <ScrollViewer>
        <Grid Height="1000" />
    </ScrollViewer>
<Grid>

完美的。现在，滚动查看器将按照您想要的方式滚动，因为滚动查看器的高度和宽度是由其容器（网格）的高度和宽度继承的。而且由于网格将自身限制为窗口的大小，因此您的形状非常好。

当然，您可以通过将网格放入堆栈面板来破坏网格的行为！除非您知道自己在做什么并造成什么后果，否则不要这样做。如果您是 XAML 新手，您可能会喜欢这个免费课程 https://channel9.msdn.com/Series/win-store-app-essentials-csharp-refresh/02在微软虚拟学院。

我希望这有帮助。

祝你好运！