Question

I have a simple canvas as follows:

<Canvas x:Name="canvBackground" Grid.Row="0" Margin="20" Background="Blue">
        <Canvas.LayoutTransform>
            <ScaleTransform x:Name="scaleTransformBackground"
                            ScaleX="{Binding Value,
                                             ElementName=uiSliderZoom}"
                            ScaleY="{Binding Value,
                                             ElementName=uiSliderZoom}" />
        </Canvas.LayoutTransform>
        <Canvas.RenderTransform>
            <RotateTransform x:Name="rotateTransformBackground"
                            Angle="{Binding Value,
                                             ElementName=uiSliderRotate}"></RotateTransform>
        </Canvas.RenderTransform  >
    </Canvas>

These transform are bound to two slider controls. I have assigned an imagebrush to the background of the canvas which works fine. At the time I assign the imagebrush I am setting the centerX and centerY properties of both transforms to half the X and Y of the image. The zoom slider works as expected as does the rotate slider.

When I combine the zoom and slider I’m getting odd results (i.e. the rotate transform is still based on the centerX and centerY properties of the original size image. Therefore the rotate and zoom do not behave as expected (zoom in to out and rotate around the centre of the image.

Can anyone assist?

Many thanks.

Answer 1

You could put both Transforms in a TransformGroup and assign that to either LayoutTransform or RenderTransform:

<Canvas x:Name="canvBackground" Grid.Row="0" Margin="20" Background="Blue">
    <Canvas.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="scaleTransformBackground"
                            ScaleX="{Binding Value, ElementName=uiSliderZoom}"
                            ScaleY="{Binding Value, ElementName=uiSliderZoom}" />
            <RotateTransform x:Name="rotateTransformBackground"
                             Angle="{Binding Value, ElementName=uiSliderRotate}" />
        </TransformGroup>
    </Canvas.RenderTransform  >
</Canvas>

And you may also need to set the RenderTransformOrigin.