滚动查看器帆布 [英] Scrollviewer & Canvas

问题描述

我正在尝试在画布中加载图像，这样，如果图像的大小溢出画布，滚动条应该被激活(MS Paint 样式)

I am trying to load an image within a canvas such that, if the size of image overflows the canvas, the scroll bars should get activated (MS Paint style)

<Window>
   <ScrollViewer>
        <Canvas  ScrollViewer.HorizontalScrollBarVisibility="Visible" 
                 ScrollViewer.VerticalScrollBarVisibility="Visible">
            <Image Source="SampleImage.jpg" />
        </Canvas>
   </ScrollViewer>
 </Window>

• 现在当 Canvas 被拉伸到 Window 的大小时，滚动条不会出现，因为 Canvas 实际上没有溢出窗口.
• 其次，由于 Image 比 Canvas 大得多，它会在 Canvas 的边界处被裁剪，所以 ScrollViewer 不认为它的内容:Canvas 实际上是溢出的.
• Now as Canvas is stretched to Window's size, scroll-bars won't appear as Canvas is not actually overflowing out of the Window.
• Secondly, as the Image is much bigger than the Canvas, it is getting clipped at the bounds of Canvas, so ScrollViewer doesn't think that its content: Canvas is actually overflowing.

StackPanel 也经常发生这种情况，即使绑定数据有几十行，但滚动条仍然没有被激活.有时滚动查看器对我来说似乎很神秘.

It happens a lot of time with StackPanels too, that even though the bound data has tens of rows, but still the scrollbars don't get activated. Sometimes scrollviewers appear as mystery to me.

那么，使用ScrollViewer控件时应该记住的基本逻辑是什么.

So, what should be the basic logic kept in mind when using ScrollViewer control.

谢谢.

刚刚编辑了问题标题，以便任何对画布有问题的人都可以在搜索中轻松找到此问题.

Just edited the question title, so that whosoever has problem with canvas can get this question easily in search.

推荐答案

来自 MSDN:Canvas 是唯一没有固有布局特征的面板元素.Canvas 的默认 Height 和 Width 属性为零，除非它是自动调整其子元素大小的元素的子元素.Canvas 的子元素永远不会调整大小，它们只是定位在指定的坐标处.这为不需要或不需要固有大小限制或对齐的情况提供了灵活性.对于您希望子内容自动调整大小和对齐的情况，通常最好使用 Grid 元素.

From MSDN: Canvas is the only panel element that has no inherent layout characteristics. A Canvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements. Child elements of a Canvas are never resized, they are just positioned at their designated coordinates. This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted. For cases in which you want child content to be automatically resized and aligned, it is usually best to use a Grid element.

但是，您可以明确设置画布高度和宽度:

Hovever, you can set Canvas Height and Width explicitely:

<ScrollViewer Height="100" Width="200">
    <Canvas Height="400" Width="400">
            //Content here
    </Canvas>
</ScrollViewer>

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