Silverlight: Centering After ScaleTransform

Question

I learned how to get a ScrollViewer's scrollbars to display after scaling an element within in a ScrollViewer from this post: http://www.eightyeightpercentnerd.dreamhosters.com/?p=92

Now, I'm trying to get the scaled object (a canvas in this case) to center correctly within the ScrollViewer. I'm going to let images tell my story here (please help me before Screencast.com purges my files). ;

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

On initial load, my blue canvas is centered and at 100%:

After decreasing by 50%, the blue canvas is still centered:

After increasing 400% and scrolling to display the top left corner of the blue canvas:

After increasing 400% and scrolling to display the bottom right corner of the blue canvas:

So my question is simply how do I get the blue canvas centered correctly in the ScrollViewer or red canvas or whatever?

Answer 1

Hi Beaudetious,

Maybe I got you wrong, but have you tried setting RenderTransformOrigin to the Canvas? E.g.:

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