Changing RenderTransformOrigin property of rotated object

1.9k Views Asked by At

how can I make a rotated object stand still when its RenderTransformOrigin property is changed? After running the code below, you can notice by rotating the object (the slider does that), changing the origin of rotation (the button) and rotating it again, that the object slightly moves. What I'm trying to achieve is being able to rotate the object against different points without it moving around whenever I try to switch between them.

<UserControl x:Class="ObjrctRotation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Canvas x:Name="C" Background="White">
    <Path x:Name="thing" RenderTransformOrigin="0,0" Stretch="Fill" Stroke="Black" StrokeThickness="2" Height="93.153" HorizontalAlignment="Left" VerticalAlignment="Top" Width="106.357" UseLayoutRounding="False" Data="M48.723255,124.82815 C41.00029,80.999809 81.000046,65.000069 112.99985,89.000092 C144.99965,113.00011 168.9996,169.00061 136.99989,169.0002 C105.00018,168.99979 104.9999,145.00015 81.000053,145.00015 C57.000206,145.00015 56.44622,168.65649 48.723255,124.82815 z" Canvas.Left="69" Canvas.Top="24" />
    <Slider Value="0" Minimum="0" Maximum="360" Width="100" Margin="300,0,0,272" ValueChanged="Slider_ValueChanged" />
    <TextBlock x:Name="test" Width="100" Height="20" Canvas.Left="300" Canvas.Top="24" />
    <Button Canvas.Left="300" Canvas.Top="24" Content="ChangeCenter" Height="20" Name="button1" Width="100" Click="button1_Click"/>
</Canvas>

 public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }
    private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        RotateTransform rotate = new RotateTransform()
        {
            Angle=e.NewValue
        };         

        thing.RenderTransform = rotate;
    }
    private void button1_Click(object sender, RoutedEventArgs e)
    {
        thing.RenderTransformOrigin = new Point(thing.RenderTransformOrigin.X + 0.2, thing.RenderTransformOrigin.Y + 0.2);
    }
}
1

There are 1 best solutions below

2
On

Set the RenderTransformOrigin="0,0" to RenderTransformOrigin="0.5,0.5" so that the transform origin is in the middle of the object you wish to rotate.