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

Question

您好，我正在 windows10 学习 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>

完美。现在滚动查看器将按照您希望的方式滚动，因为滚动查看器的高度和宽度由其容器（网格）的高度和宽度继承。而且因为网格将自身限制为 window 的大小，所以你的身材很好。

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.

希望对您有所帮助。

祝你好运！

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

Scrollviewer not working on a grid

xaml

uwp