ScrollViewer WPF 中的 StackPanel

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19788058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 10:00:58  来源:igfitidea点击:

StackPanel in ScrollViewer WPF

c#wpfscrollbar

提问by Doro

I've got a problem with extremly strange behaviour of ScrollViewer's ScrollBar.

我遇到了 ScrollViewer 的 ScrollBar 极其奇怪的行为问题。

Here is my code:

这是我的代码:

<ScrollViewer CanContentScroll="True">
    <StackPanel>
        <StackPanel>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40" Background="Yellow"/>
        </StackPanel>

        <StackPanel>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Green"/>
        </StackPanel>
    </StackPanel>
</ScrollViewer>

The problem is in those StackPanels inside StackPanel. If there's only one main StackPanel without StackPanels inside it, it acts ok.

问题出在 StackPanel 中的那些 StackPanel 中。如果里面只有一个没有 StackPanels 的主 StackPanel,它就可以正常工作。

I've tried using ScrollViewer inside main StackPanel for each of it's childrens. The other problem in that solution is that I don't want to have fixed height of StackPanels.

我已经尝试在主 StackPanel 中为每个孩子使用 ScrollViewer。该解决方案中的另一个问题是我不想固定 StackPanels 的高度。

@EDIT:The problem is that ScrollBar doesn't shift smoothly and it prevents showing all the content. Sorry for lack of informations.

@EDIT:问题是 ScrollBar 不能平滑移动并且它阻止显示所有内容。抱歉缺乏信息。

回答by sthotakura

You are getting that strange behaviour because you set CanContentScrollto True on ScrollViewer. That means, the ScorllViewer is treating each StackPanelas a single content element and scrolling by height of each StackPanelinstead of height of each Buttonwithin the child StackPanels.

您之所以会出现这种奇怪的行为,是因为您CanContentScroll在 上设置为 True ScrollViewer。这意味着,ScorllViewer 将每个StackPanel元素视为单个内容元素,并按每个元素的高度滚动,StackPanel而不是Button在子元素中按每个元素的高度滚动StackPanel

To get rid of that strange behavior, change your code to:

要摆脱这种奇怪的行为,请将您的代码更改为:

<ScrollViewer>
    <StackPanel>
        <StackPanel>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40" Background="Yellow"/>
        </StackPanel>

        <StackPanel>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Green"/>
        </StackPanel>
    </StackPanel>
</ScrollViewer>

回答by Aleksey

You "need" add your StackPanels to ItemsControl collection:

您“需要”将您的 StackPanels 添加到 ItemsControl 集合:

 <ScrollViewer CanContentScroll="True">
      <ItemsControl >
           <StackPanel>
                <StackPanel>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40" Background="Yellow"/>
                </StackPanel>

                <StackPanel>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Green"/>
                </StackPanel>
            </StackPanel>
       </ItemsControl >
   </ScrollViewer>