Question

I am trying to place a canvas within a control which I will then use a Layout transform to implement zooming functionality. The problem is that while enlarging the canvas is easy, cropping the required section is proving difficult. I think it boils down to the following example code:

    <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100">
        <Rectangle Width="5" Height="5" Canvas.Bottom="0" Canvas.Left="0" Fill="Green" />
        <Rectangle Width="5" Height="5" Canvas.Bottom="0" Canvas.Right="0" Fill="Green" />
        <Rectangle Width="5" Height="5" Canvas.Top="0" Canvas.Left="0" Fill="Green" />
        <Rectangle Width="5" Height="5" Canvas.Top="0" Canvas.Right="0" Fill="Green" />
        <Rectangle Width="5" Height="5" Canvas.Top="-10" Canvas.Right="0" Fill="Blue" />
        <Rectangle Width="5" Height="5" Canvas.Bottom="110" Canvas.Left="0" Fill="Blue" />
    </Canvas>

Is there a way of blocking the blue rectangles from rendering, as they are outside the bounds of the canvas? As it stands by adding a canvas to my control it effectively turns my entire control into a canvas.

Thanks in advance,
Shane

Answer 1

Use the ClipToBounds property on the Canvas:

<Canvas ClipToBounds="True" 
        HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100">
    <Rectangle Width="5" Height="5" Canvas.Bottom="0" Canvas.Left="0" Fill="Green" />
    <Rectangle Width="5" Height="5" Canvas.Bottom="0" Canvas.Right="0" Fill="Green" />
    <Rectangle Width="5" Height="5" Canvas.Top="0" Canvas.Left="0" Fill="Green" />
    <Rectangle Width="5" Height="5" Canvas.Top="0" Canvas.Right="0" Fill="Green" />
    <Rectangle Width="5" Height="5" Canvas.Top="-10" Canvas.Right="0" Fill="Blue" />
    <Rectangle Width="5" Height="5" Canvas.Bottom="110" Canvas.Left="0" Fill="Blue" />
</Canvas>