Scrolling canvas malfunctions when applying zoom (Incorrect export from svg to xaml in Inkscape)

Question

INTRODUCTION:

I am trying to learn WPF on my own, by reading official documentation and using Internet to find help.

I come from C++ and raw WinAPI background, but I do have some experience with C# and .NET, including WinForms.

I have .svg file that should be displayed in a main window. Application should offer zooming capability and should be able to scroll the image in case it is too big to fit inside main window.

Since WPF can not render .svg, I have used Inkscape to convert the file into .xaml so I can render it successfully.

MY EFFORTS TO SOLVE THE TASK:

I have managed to solve scrolling part, thanks to certain questions here, on SO. Zooming works too, but the overall result is not satisfying. That is the reason why I ask here for help. At the moment of writing this post, I am searching online for a solution ( still no progress though... ).

PROBLEM:

When zooming in, or out, image is not positioned properly, so scroll bars can not show it fully.

Since English is not my native, and I am novice in WPF, I have very hard time explaining the problem. Still, I have taken snapshots that will demonstrate what I was talking about.

Let me first start with the image of the main window, when it is first loaded to the screen:

Problems that occur after zooming in, and zooming out are shown bellow, respectively:

You can clearly see that I can not scroll up in the first image (when zooming in) in order to see top of the tiger's head.

On second image we can see that tiger is horribly misplaced, and bottom horizontal scroll bar is not seen, so I can not see the bottom of the tiger's head.

RELEVANT INFORMATIONS:

I have taken this image and converted it into XAML using Inkscape. XAML was too big to post here (I tried) so I am showing the bare minimum of the XAML I have so far:

<Window x:Class="Testing.MainWindow"
        Name="myMainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" KeyUp="myMainWindow_KeyUp">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <!-- Canvas, and its drawing, were created with Inkscape -->
        <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg2" Width="494.44705" Height="510.55356">
            <Canvas.RenderTransform>
                <TranslateTransform X="183.99798" Y="144.4264"/>
            </Canvas.RenderTransform>
            <!-- many drawing commands, omitted for brevity -->
        </Canvas>
    </ScrollViewer>
</Window>

Everything from Canvas element, including its Height and Width, and TranslateTransform was created by Inkscape. That is why I am not allowed to change that content. As you can see, I have placed canvas inside scrollviewer.

Scrolling worked fine, but after I apply zooming it malfunctions.

I have decided to zoom in when user presses +, and zoom out when user presses -, for start. The handling of the KeyUp event is shown below.

private void myMainWindow_KeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Add)
    {
        Matrix m = svg2.LayoutTransform.Value;

        m.M11 += 0.5;
        m.M22 += 0.5;

        svg2.LayoutTransform = new MatrixTransform(m);
    }

    if (e.Key == Key.Subtract)
    {
        Matrix m = svg2.LayoutTransform.Value;

        m.M11 -= 0.5;
        m.M22 -= 0.5;

        svg2.LayoutTransform = new MatrixTransform(m);
     }
 }

The entire XAML and code behind can be found here.

QUESTION:

What am I doing wrong? How can I tweak the submitted code so zooming works properly?

Answer 1

So. Canvas is a lightweight container, designed to arrange elements in specified positions. Canvas can display elements outside of its boundaries, but if you set ClipToBounds="True" on Canvas, then, unsurprisingly, it will clip anything that is out of its boundaries.

If you take a look at your xaml:

 <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg2" Width="494.44705" Height="510.55356">
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="183.99798" Y="144.4264"/>
                    </TransformGroup>
                </Canvas.RenderTransform>

You'll see, that your Canvas is actually moved by TranslateTransform. In the image below you can see actual rectangle position, stroked in red. If you will set ClipToBounds="True" then everything outside of this rectangle is gonna be clipped. (I recommend you to check program called Snoop, it's very useful)

When I have discovered that your canvas has transform, I've desided to re-generate the image, that you have. There are 2 common ways to do it: by hands (printing as XPS document and extracting relevant xaml) or by Inkscape. I've tried the first approach, but failed. So, I've used last version of Inkscape. What I've payed attention to are following boxes:

Then I've saved svg as xaml with "Compatible with Silverlight" option checked. The result was following:

 <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg2" Width="900" Height="900">
        <Canvas.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </Canvas.RenderTransform>
        <Canvas Name="g4">
         <!-- data below -->

And everything worked without glitches. Here is the xaml I've got http://pastebin.com/tRin96Hi So it was all about lines not fitting in canvas rectangle.

UPDATE Step-by-step on how I have set x & y to 0 in Inkscape.

1. Downloaded latest version of Inkscape (0.91)
2. Installed it
3. Downloaded an svg image
4. Opened it with "Open with... -> Inkscape"
5. Ctrl + A to select all figures
6. Step 5 enables x & y boxes. Print 0 in box and press Enter (or switch to other box) to apply changes. Apply 0 for both x and y boxes.
7. (Optional) File - Document properties - Page - Height & Width, if needed to crop
8. Saved svg as xaml with "Compatible with Silverlight" option checked.

Answer 2

Perhaps using a ScaleTransform instead of a MatrixTransform may help.

MSDN - ScaleTransform