Is it possible to apply RenderTransform to the actual UIElements?

Question

Im creating Path objects with curvy edges on a Canvas. I want to be able to rotate them and move them around the canvas. But when i try to apply several transform to and object it only visually displays the last one. I assume its because the transforms are applied to the coordinates of the Path object and are only displayed but not saved afterwards.

So if i would run something like:

my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 100);
my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 150);

it would move my Path 150 pixels down.

Is there a way i can save the transform progress of RenderTransform or do i have to recreate my Path with different parameters/write a method to displace the pixels manually?

Edit

Another example:

my_canvas.Children[0].MouseDown += (object sender, MouseButtonEventArgs e) => 
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                {
                    MouseDownLocation = e.GetPosition(my_canvas);
                }
            };

            my_canvas.Children[0].MouseMove += (object sender, MouseEventArgs e) =>
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                {                    
                    my_canvas.Children[0].RenderTransform  = new TranslateTransform(-(MouseDownLocation.X - e.GetPosition(my_canvas).X), -(MouseDownLocation.Y - e.GetPosition(my_canvas).Y));                    
                }
            };

This code allows me to move my element and it works fine: i can pick it up, visually move it, and let it go. But only once. If try to do it again it tries to do the transformation based on the elements' previous position. And as I am typing this i realize that i can probably solve this by keeping track of the offsets the transformations are causing.

maybe [this](https://stackoverflow.com/questions/45208505/is-it-good-practice-to-position-uielements-via-rendertransform) can help you. Just have a look:) — , Oct 20 '17 at 20:01
When you assign a transform to the RenderTransform property of a UIElement, you obviously replace the previously assigned value. If you want to apply multiple transforms at once, add them to a TransformGroup and assign that once to RenderTransform. Then reuse the existing elements of the TransformGroup. See [How to: Apply Multiple Transforms to an Object](https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-apply-multiple-transforms-to-an-object). — Clemens, Oct 20 '17 at 20:59
@Clemens i want to be able not only to apply multiple transforms but to apply them based on where the element ended up as a result of the previous transform, if that makes any sense. And to do that i need to actually change the coordinates of the element. Is there a method that accomplishes this? — Volodymyr Dovhopoliuk, Oct 20 '17 at 21:09

score 1 · Accepted Answer · answered Oct 20 '17 at 21:23

Just add the next translation to the X and Y values of the existing RenderTransform:

my_canvas.Children[0].RenderTransform = new TranslateTransform(0, 100);
((TranslateTransform)my_canvas.Children[0].RenderTransform).Y += 150;

Or use Canvas.Left and Canvas.Top instead of a TranslateTransform:

UIElement element = my_canvas.Children[0];
Canvas.SetTop(element, 100);
Canvas.SetTop(element, Canvas.GetTop(element) + 150);

Is it possible to apply RenderTransform to the actual UIElements?

1 Answers1