使用布局变换以图像中心为原点缩放答案

【问题标题】：Zoom at center of image as origin with layout transform使用布局变换以图像中心为原点缩放
【发布时间】：2017-09-12 18:19:40
【问题描述】：

我想在画布控件中缩放图像，保持画布中心为原点。最初我尝试使用渲染变换效果很好，但缩放后没有出现滚动条。我搜索了一下，发现应该使用布局变换为此目的。我的问题是我现在在缩放后得到滚动条，但缩放原点位于画布的左上角，如何将其设置为中心。

 <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>

一些建议说在布局变换上设置 centerX 和 centerY，但我的应用程序的大小是动态的，我可能不固定中心点。

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

【问题讨论】：

标签： c# wpf rendertransform

【解决方案1】：

一些建议说要在布局变换上设置 centerX 和 centerY，但我的应用程序的大小是动态的，我可能不固定中心点。

然后您需要动态计算CenterX 和CenterY 属性的值。使用LayoutTransform 时，您应该使用这些属性围绕控件的中心进行缩放。

例如，您可以处理Canvas 的Loaded 事件，以编程方式应用LayoutTransform：

<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;
}

【讨论】：