locked
RenderTransformOrigin not working with border

    Question

  • when i rotate border with transforms. rotation happens with "Border x and y as origin" not the center of border? How can I rotate it around border's center ?

    xaml:

     <Border  x:Name="myImage"
                       ManipulationMode="All"
                       ManipulationDelta="Border_ManipulationDelta"
                       RenderTransformOrigin="0.5, 0.5">
                    <Border.RenderTransform>
                        <CompositeTransform></CompositeTransform>
                    </Border.RenderTransform>

    <Canvas>

    //canvas elements

    </Canvas>

    </Border>

    c#:

     private void Border_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
            {
                try
                {
                    var ct = (CompositeTransform)myImage.RenderTransform;
                    ct.ScaleX *= e.Delta.Scale;
                    ct.ScaleY *= e.Delta.Scale;
                    ct.TranslateX += e.Delta.Translation.X;
                    ct.TranslateY += e.Delta.Translation.Y;
                    ct.Rotation += 180.0 / Math.PI * e.Delta.Rotation;

                    UpdateControls(ct);
                }
                catch (Exception ex)
                {
                    var md = new MessageDialog(ex.Message);
                    md.ShowAsync();
                }
            }

    Tuesday, April 10, 2012 10:53 AM

Answers

All replies

  • I tried to replicate your problem but when I try the border always rotates about it's centre using the code you have posted. Have you got some more code/xaml which might help?

    http://babaandthepigman.spaces.live.com/blog/

    Tuesday, April 10, 2012 12:04 PM
  • Complete example is here:

    xaml:

     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
            <Border  x:Name="myImage" VerticalAlignment="Center"
                HorizontalAlignment="Center"   ManipulationMode="All"
                      RenderTransformOrigin="0.5, 0.5">
                <Border.RenderTransform>
                    <CompositeTransform></CompositeTransform>
                </Border.RenderTransform>

                <Canvas>
                    <Button Content="Test App" Background="Green" />
                </Canvas>

            </Border>
            <Slider x:Name="RotationSlider" VerticalAlignment="Bottom"  HorizontalAlignment="Center"   StepFrequency="1" Minimum="0" SmallChange="1" LargeChange="10" Maximum="360" Value="0" Width="150" ValueChanged="RotationSlider_ValueChanged_1" />
        </Grid>


    c#:

     private void RotationSlider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)
            {
                
                var ct = myImage.RenderTransform as CompositeTransform;
                if (ct != null)
                {
                    double angle = e.NewValue;
                    ct.Rotation = angle;
                }
            }

    please have a look.
    Tuesday, April 10, 2012 1:35 PM
  • If you change your Canvas to a Grid then the Button will rotate about it's Centre, i.e.

                <Grid>
                    <Button Content="Test App"
                            Background="Green" />
                </Grid>
    

    This is because a Canvas uses absolute positioning and does not centre it's content (so your button is at 0, 0). A grid with default settings will.

    http://babaandthepigman.spaces.live.com/blog/

    Tuesday, April 10, 2012 1:50 PM