xaml - 滚动查看器不在网格上工作

Question

嗨，我正在 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>

第一段代码不起作用，第二段代码有效。
我不明白出了什么问题，我不明白为什么它在第一个不起作用。
谢谢你

Answer 1

这是初学者的常见错误，您不应该为此感到难过。关于滚动查看器要记住的是它必须有高度和宽度。有时您设置高度和宽度。有时您让高度和宽度由容器的大小设置。对？

看这个:

<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>

完美的。现在滚动查看器将像您希望的那样滚动，因为滚动查看器的高度和宽度由其容器(网格)的高度和宽度继承。而且由于网格将自身限制为窗口的大小，因此您的状态很好。

You can spoil the behavior of the grid, of course, by putting it in a stack panel! Don't do that unless you know what you are doing and causing. If you are new to XAML you might enjoy this free course on Microsoft Virtual Academy.

我希望这有帮助。

祝你好运!