WPF Zooming Problem

Question

In WPF, I have a sort of Curve Editor, which consists of a scrollviewer (for panning) on top of a canvas, where I display keys, and curve segments (linear, constant and splines). I'm using MVVM. Also, I might have hundreds of keys, with segments between each other. Also, the panning/zooming must be really smooth and responsive.

In the model (and ViewModel), a key has XY positions; segments have a PointCollection. In the View, the keys are Rectangle, curves segments are Polyline. All those UI elements are binded to the Canvas' Top and Left dependency properties.

The problem I have is when implementing the zoom. I first worked with a viewbox that is inserted between the scrollviewer and the canvas

<ScrollViewer>
    <Viewbox>
        <Canvas/>
    </Viewbox>
</ScrollViewer>

Panning worked fine, but the zoom was not the right zoom that I want. It made a "graphical" zoom, which makes everything bigger, rectangles and the polylines.

What I want is, that when zooming in, the keys (rectangles) go farther between each other, without getting bigger, and the segment (Polyline) stretches between the two keys, without the StrokeThickness looking any bigger.

The solution I was going for is to have all the coordinates translated in the VM when changing the zoom.

Ex: The key, in the model, has a position of (2,3). When the zoom's value is 2.0, the key's ViewModel will show positions of (4,6). For the segments, I will translate all the Points in the Model's PointCollection, and put them inside the PointCollection of the ViewModel.

The problem with that solution is that it might get slow on performance when zooming in/out quicly when I'll have hundreds of keys. Since changing the zoom factor will change -all- the ViewModels coordinates, and thus every UIElements will get moved.

I thought about the RenderTransform on the UIElements to apply the zoom translation, but it won't work with the Polylines. I could use a ScaleTransform for the polylines, but that will stretch them visually.

It's quite complex to describe, so feel free to ask for more details.

Any ideas on how I could achieve that?

Answer 1

I've done something very simliar to what you are wanting. Unfortuantely I don't think you are going to get what you want by using a ViewBox or even a ScaleTransform.

You probably want to look into creating your own Panel that implements IScrollInfo so that you can handle the Arrange yourself.

Hope this helps.