ScrollViewer WPF 中的 StackPanel答案

【问题标题】：StackPanel in ScrollViewer WPFScrollViewer WPF 中的 StackPanel
【发布时间】：2013-11-05 11:35:10
【问题描述】：

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

这是我的代码：

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

问题出在 StackPanel 中的那些 StackPanel 中。如果里面只有一个没有 StackPanels 的主 StackPanel，它就可以了。

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

@编辑： 问题是 ScrollBar 不能平滑移动，它会阻止显示所有内容。抱歉信息不足。

【问题讨论】：

什么在这里不起作用？你说的它可以正常工作是什么意思？如果我正确理解您的问题，请删除 CanContentScroll=True 并尝试。
老兄，你需要解释你的问题到底是什么，而不是仅仅说“我有问题”。无论哪种方式，我猜你的问题与 StackPanel 不会调整其内容的事实有关......只需使用 Grid 代替...... StackPanel 对于 几乎没用大多数场合。
我不想使用 Grid，因为需要对边距进行操作。
如前所述，尚不完全清楚问题出在哪里，如果与平滑滚动条滚动有关，这可能就是您所追求的：stackoverflow.com/questions/19013841/… 但它可能完全不相关。
@Doro 你试过删除CanContentScroll=True 吗？

标签： c# wpf scrollbar

【解决方案1】：

您遇到这种奇怪的行为是因为您在 ScrollViewer 上将 CanContentScroll 设置为 True。这意味着，ScorllViewer 将每个 StackPanel 视为单个内容元素，并按每个 StackPanel 的高度而不是子 StackPanels 中每个 Button 的高度滚动。

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

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

【讨论】：

【解决方案2】：

您“需要”将 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>

【讨论】：