Silverlight:在ScaleTransform之后居中

Question

我从这篇文章中学到了如何在ScrollViewer中缩放元素后显示滚动查看器的滚动条：http://www.eightyeightpercentnerd.dreamhosters.com/?p=92

现在，我正在尝试让缩放的对象(在本例中是画布)在ScrollViewer中正确居中。我将在这里让图片讲述我的故事(请在Screencast.com清除我的文件之前帮助我)。；

我的XAML：

<ScrollViewer x:Name="ScrollViewer" VerticalAlignment="Top"
    VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
    Width="300" Height="300" Margin="0" Padding="0" Background="White">

    <Canvas x:Name="DesignSurface" Background="Red">

        <Canvas x:Name="Surface" Background="Blue" Height="100" Width="100">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="SurfaceScaleTransform" />
                </TransformGroup>
            </Canvas.RenderTransform>
            <!-- ... -->
        </Canvas>

    </Canvas>

</ScrollViewer>

在初始加载时，我的蓝色画布居中并处于100%：

​

减少50%后，蓝色画布仍居中：

​

增加400%并滚动以显示蓝色画布的左上角后：

​

增加400%并滚动以显示蓝色画布的右下角后：

​

所以我的问题很简单，我如何让蓝色画布在ScrollViewer或红色画布或其他任何东西中正确居中？

Answer 1

也许我误会你了，但是你有没有试过把RenderTransformOrigin设置到画布上？例如：

    <Canvas x:Name="Surface" Background="Blue" Height="100" Width="100" 
            RenderTransformOrigin="0.5, 0.5">
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="SurfaceScaleTransform" />
            </TransformGroup>
        </Canvas.RenderTransform>
        <!-- ... -->
    </Canvas>