Scrollviewer & Canvas

Question

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>

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

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.

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

Thank you.

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

Answer 1

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>

Answer 2

Maybe one of these two Links might help you:

• Silverlight Canvas on Scrollviewer not triggering
• ScrollBars are not visible after changing positions of controls inside a Canvas