CODEWITHSUNDEEP
c#.netwpf
SpeedBirdNine
SpeedBirdNine

Reputation: 4676

Canvas zoom in and zoom out, is there a better way to implement it?

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.

Upvotes: 3

Views: 6836

Answers (2)

Sarfaraz Nawaz
Sarfaraz Nawaz

Reputation: 361722

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:

Upvotes: 5

Chris Shain
Chris Shain

Reputation: 51369

From the sound of it, it seems like using a scale transform will allow you to perform the zooming that you need without all the re-drawing and whatnot.

From: Is it possible to ScaleTransform everything on a Canvas/Grid except for 1 Control?

<Canvas>
    <Canvas.LayoutTransform>
        <!-- Adjust ScaleX and ScaleY in lock-step to zoom -->
        <ScaleTransform ScaleX="1" ScaleY="1" CenterX=".5" CenterY=".5" />
    </Canvas.LayoutTransform>
    <!-- Some controls here -->
/>
</Canvas>

Upvotes: 4

Related Questions