Zoom at center of image as origin with layout transform

Question

I want to zoom image in a canvas control keeping center of canvas as origin .Initially I tried with Render transform it worked well,but scroll bars were not appearing after zoom.I googled about it and found that layout transform should be used for that purpose.My problem is I am getting the scroll bar after zoom now but zoom origin is at top left of canvas,how can I set it to center.

 <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto">
        <Canvas x:Name="grdMain" RenderTransformOrigin="0.5,0.5">

            <Image  Source="{Binding BmpImageSource,UpdateSourceTrigger=PropertyChanged}" x:Name="TargetImage" >
            </Image>



           <!-- <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="{Binding ScaleFactor}" ScaleY="{Binding ScaleFactor}" />
                </TransformGroup>
            </Canvas.RenderTransform>-->
            <Canvas.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="{Binding ScaleFactor}" ScaleY="{Binding ScaleFactor}" />
                </TransformGroup>
            </Canvas.LayoutTransform>



        </Canvas>
    </ScrollViewer>

Some suggestions says to set centerX and centerY on layout transform but size of my application is dynamic and I might not fixed center point.

 <ScaleTransform ScaleX="{Binding ScaleFactor}" ScaleY="{Binding ScaleFactor}"  
         CenterX="250" CenterY="250"/>

mm8 mm8 · Accepted Answer · 2017-04-18T10:18:45

Some suggestions says to set centerX and centerY on layout transform but size of my application is dynamic and I might not fixed center point.

Then you need to calculate the values of the CenterX and CenterY properties dynamically. You should use these properties to scale around the control's center when using a LayoutTransform.

You could for example handle the Loaded event of the Canvas to apply the LayoutTransform programmatically:

<Canvas x:Name="grdMain" Loaded="grdMain_Loaded">...

private void grdMain_Loaded(object sender, RoutedEventArgs e)
{
    Canvas canvas = sender as Canvas;
    ScaleTransform st = new ScaleTransform();
    BindingOperations.SetBinding(st, ScaleTransform.ScaleXProperty, new Binding("ScaleFactor"));
    BindingOperations.SetBinding(st, ScaleTransform.ScaleYProperty, new Binding("ScaleFactor"));
    st.CenterX = canvas.ActualWidth / 2;
    st.CenterY = canvas.ActualHeight / 2;
    canvas.LayoutTransform = st;
}

Zoom at center of image as origin with layout transform

1 Answers