滚动查看器不在网格上工作 [英] Scrollviewer not working on a grid

问题描述

我正在 Windows 10 中学习 UWP，我需要滚动浏览网格.他们有两段代码非常相似，我的意图是在grid2中滚动，第一段代码:

Hi I am learning UWP in windows 10, I need to scroll through a grid. They have two pieces of code are very similar, my intent is to scroll in grid2, the first piece of code:

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

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

the first piece of code does not work, the second works. I can not understand what is wrong, I do not understand why it does not work in the first. thank you

推荐答案

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

This is a common mistake for beginners and you should not feel bad about it. The thing to remember about the scroll viewer is that it MUST have a height and width. Sometimes you set the height and width. Sometimes you let the height and width be set by the size of the container. Right?

看看这个:

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

在那个示例中，滚动查看器会表现得好像它甚至不存在一样.为什么?因为它没有高度和宽度.在这种情况下，它的大小将与其内容相同.这基本上就是你所看到的.

In that sample, the scroll viewer would act like it is not even there. Why? Because it does not have a height and width. It would just be the same size as its content in that case. That's basically what you are seeing.

看看这个:

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

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

This would scroll just fine vertically but it would never scroll horizontally. Can you see why? It's because there is not width. Sometimes this is the perfect scenario. But it's another thing that can catch a developer off guard.

看看这个:

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

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

This is another scenario that catches a lot of developers. Why? Because the height of a stack panel is infinite. Since the height and the width are basically inherited by the container, the scroll viewer never has a reason to scroll as it is already allows to grow to infinite size.

看看这个:

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

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

Perfect. Now the scroll viewer will scroll just like you want it to because the height and the width of the scroll viewer are inherited by the height and the width of its container, the grid. And because a grid constraints itself to the size of the window, you are in great shape.

当然，您可以通过将其放在堆栈面板中来破坏网格的行为！除非您知道自己在做什么和导致什么，否则不要这样做.如果您不熟悉 XAML，您可能会喜欢 Microsoft 上的此免费课程虚拟学院.

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.

我希望这会有所帮助.

祝你好运！

这篇关于滚动查看器不在网格上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！