Zoom in Canvas Tap Event winrt c#

Question

I'm trying to zoom in a Canvas when I click on an element. This is my XAML code :

<Canvas Grid.Row="1" x:Name="MapCanvas" Width="{Binding ElementName=This, ath=ActualWidth}"
                RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="{Binding ElementName=Row1, Path=ActualHeight}">
            <Canvas.RenderTransform>
                <CompositeTransform x:Name="CompositeTransform" CenterX="0.5" CenterY="0.5"></CompositeTransform>
            </Canvas.RenderTransform>
            <Rectangle Fill="Red" Width="40" Height="40" Tap="UIElement_OnTap" Canvas.Left="417" Canvas.Top="186"/>
            <Rectangle Fill="Blue" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="333" Canvas.Top="135"/>
            <Rectangle Fill="Yellow" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="333" Canvas.Top="223"/>
            <Rectangle Fill="Green" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="498" Canvas.Top="135"/>
            <Rectangle Fill="White" Width="40" Height="40" Tap="UIElement_OnTap"  Canvas.Left="498" Canvas.Top="223"/>
        </Canvas>

And this is My C# code when the Tap Method is fired :

 var mpos = e.GetPosition(MapCanvas);
        var parentcenter = new Point(((FrameworkElement)MapCanvas.Parent).ActualWidth / 2, ((FrameworkElement)MapCanvas.Parent).ActualHeight / 2);

        var sb1 = new Storyboard {Duration = TimeSpan.FromMilliseconds(800)};

        var scaleX = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = parentcenter.X - mpos.X };
        Storyboard.SetTarget(scaleX, MapCanvas);
        Storyboard.SetTargetProperty(scaleX, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.ScaleX)"));
        sb1.Children.Add(scaleX);

        var scaleY = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = parentcenter.Y - mpos.Y };
        Storyboard.SetTarget(scaleY, MapCanvas);
        Storyboard.SetTargetProperty(scaleY, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.ScaleY)"));
        sb1.Children.Add(scaleY);

        var centerX = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = 5 };
        Storyboard.SetTarget(centerX, MapCanvas);
        Storyboard.SetTargetProperty(centerX, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
        sb1.Children.Add(centerX);

        var centerY = new DoubleAnimation { Duration = TimeSpan.FromMilliseconds(800), To = 5 };
        Storyboard.SetTarget(centerY, MapCanvas);
        Storyboard.SetTargetProperty(centerY, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));
        sb1.Children.Add(centerY);
        sb1.Begin();

It's just a Storyboard which use Scale and Translate Transformation. But the result is not satisfactory. The clicked element is not a the center.

How can I do that? Thank you!

Answer 1

The way I would do it is with

• rW is width of the rectangle
• rH is height of the rectangle
• rL is the Canvas.Left of the rectangle
• rT is the Canvas.Top of the rectangle
• cW is the canvas width
• cH is the canvas height

First, Scale (S) is determined by the smaller of cW/rW and cH/rH to fit on screen, or larger to fill it.

Then you want the center of the rectangle to be in the center of the canvas after scaling+translating the canvas, so assuming the RenderTransformOrigin of the Canvas is set to 0,0 for simplicity, after scaling without translation - the center of the rectangle would be in

• (rL + rW/2)*S,
• (rT + rH/2)*S

while you want it at

• cW/2,
• cH/2

so you need to translate by

• tX = cW/2 - (rL + rW/2)*S
• tY = cH/2 - (rT + rH/2)*S

These (S, tX, tY) are your To values for ScaleX, ScaleY, TranslateX, TranslateY.

Verified in Blend for

• rW:500
• rH:250
• rL:300
• rT:200
• cW:1366

• cH:768

• S:2.732

• tX:cW/2 - (rL + rW/2)*S = 683 - 550*2.732 = -819.6
• tY:cH/2 - (rT + rH/2)*S = 384 - 325*2.732 = -503.9

XAML

<Page
    x:Class="App40.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App40"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.732"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.732"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-819.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="canvas">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-503.9"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid
    >
    <Grid.Clip>
        <RectangleGeometry
        Rect="0,0,1366,768"/>
    </Grid.Clip>

        <Canvas x:Name="canvas" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0,0" Height="768" Width="1366">
            <Canvas.RenderTransform>
                <CompositeTransform/>
            </Canvas.RenderTransform>
            <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="500" Canvas.Left="300" Canvas.Top="200"/>

        </Canvas>
    </Grid>
</Page>