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>

完美。现在滚动查看器将按照您想要的方式滚动，因为滚动查看器的高度和宽度由其容器的高度和宽度（网格）继承。而且因为网格限制了窗口的大小，所以你的状态很好。

当然，您可以通过将其放入堆栈面板来破坏网格的行为！除非你知道自己在做什么和造成什么，否则不要这样做。如果您是XAML的新手，您可能会在Microsoft Virtual Academy上享受this free course。

我希望这会有所帮助。

祝你好运！

Scrollviewer没有在网格上工作

1 个答案: