Search code examples
silverlightcanvasoverflowstackpanelclipping

Silverlight: Canvas overflows


I have created a Canvas, and within it I placed a StackPanel. The StackPanel is horizontal, and it accepts a list of thumbnailed images. The Canvas has a fixed size. When I put more thumbnails than the Canvas width can hold, the StackPanel is supposed to overflow from the Canvas, so I can move it to center the current thumbnail.

Everything works correctly, only, the StackPanel's overflow is visible! Is there a way to hide it? Or is the entire approach wrong?

Here is a screenshot. The canvas is the red box. The stackpanel is blue semi-transparent.

http://www.netpalantir.it/static/sl_canvas_overflows.jpg

Thanks!


Solution

  • Since the Canvas has fixed size, you can use clipping. Basically you have to do:

    <Canvas Width="400" Height="300">
        <Canvas.Clip>
                <RectangleGeometry Rect="0, 0, 400, 300"/>
        </Canvas.Clip>
        <!-- your StackPanel here -->
    </Canvas> 
    

    Here are few useful posts on the topic:

    Clipping in Silverlight

    Cropping or Clipping in Silverlight