Question

I have created a custom class derived from Canvas, which contain elements which will be derived from Visual. The canvas also contains a grid which i have created by creating lines.

Now for zooming, i remove everything from the canvas, resize the canvas (which is placed inside ScrollViewer), and redraw everything that is on it. Is there a better way to implement zoom, something that is provided, which allows me to scroll and zoom, and somehow create a viewport, that i can move and resize (for scrolling and zooming)? Because my concern is that soon there will be complex shapes, curves and points placed on the canvas, and maybe by the thousands, and things will get pretty slow if i use the approach that i am using currently.

Please tell if there is a better way.

Answer 1

If you don’t want to affect the layout, then I would suggest you to use RenderTransform instead of LayoutTransform. So something like this:

<Canvas>
    <Canvas.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
    </Canvas.RenderTransform>
    <!--- other controls -->
</Canvas>

You may also would like to use RenderTransformOrigin dependency property of UIElement, and you can do zoom-in and out, from code behind changing the value of ScaleX and ScaleY.

By the way, you also would like to read these before doing what you want to do:

• RenderTransform vs. LayoutTransform (Petzold’s blog)
• LayoutTransform vs. RenderTransform in WPF
• LayoutTransform vs. RenderTransform