CODEWITHSUNDEEP
c#xamlcanvaswindows-8microsoft-metro
MBZ
MBZ

Reputation: 27592

Zoom and Move for Canvas

What's the best way for implementing Zoom (possibly with Pinch) and Move (possibly with for Slide) for a Canvas?

I'm drawing some very simple stuff (e.g Lines, Ellipses and more) on a Canvas and now I want to allow the user the Zoom-in, Zoom-out and move the view-port freely around.

Upvotes: 0

Views: 1554

Answers (2)

Sayed Mohammad Amin Emrani
Sayed Mohammad Amin Emrani

Reputation: 401

the best way is creating a matrix for your canvas and scale and move the matrix like this :

Canvas can = new Canvas();
Matrix matrix = new Matrix();
matrix.Translate(50, 0);
matrix.Scale(1.5,1.5);
can.RenderTransform = new MatrixTransform(matrix);

Hope helps you

Upvotes: 1

Paul
Paul

Reputation: 225

here you go. in the XAML code, wrap it with scroll viewer. like this

 <ScrollViewer x:Name="scrl" ZoomMode="Enabled" HorizontalScrollMode="Enabled"     VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" SizeChanged="OnSizeChanged" MinZoomFactor="1">
        <Canvas Background="AliceBlue" RenderTransformOrigin="0.5,0.5" x:Name="Main">
            <Image Source="Assets/Floorplan.gif" Canvas.Left="358" Canvas.Top="84"></Image>
        </Canvas>
    </ScrollViewer>

then in my c#code you will put this.

 private void OnSizeChanged(Object sender, SizeChangedEventArgs args) {

        Main.Width = scrl.ViewportWidth;
        Main.Height = scrl.ViewportHeight;
}

this will make your canvas zoom to pinch and pan enabled.

the image there is just a sample to see if the zoom function is working. It works fine.

Upvotes: 1

Related Questions