How to translate and rotate an image as done for shape

Question

Hi.I have a diagram node that contain an image and a shape (rectangle).I perform matrix rotation and scaling to the shape and get (as expected) a parrallogram.I would like image to follow the rectangle - i.e get rotated and scaled into a parrallogram covering the shape.Is it possible at all? (I know a simple rotation is possible).If so, how?Please note I am using Code only, no XAML during the logic.The attached solution describe the issue.The rectangle (click on the image to hide it) is rotated and streched on the X axis to for a parrallelogra,The image is not.The logic happens in MainWindow.xaml.cs (the XAML is for showing the diagram).Again - I would like the image to fit directly over the red parrallelogram behind it.Thanks is advance,DotanAttachment: ImageRotateTranslate_8e99f1c.zip

Karkuvel Rajan Shanmugavel · Accepted Answer

Hi Dotan, 
 
Thanks for using Syncfusion products. 
 
Requirement: Need to translate and rotate an image. 
 
We can able to apply transform form the image control in WPF.  But in your data template case we cannot able to get the image used in the data template because we can’t able to access the View parent of the template in sample. So we have achieve your requirement by creating custom class of AnnotationEditorViewModel with a custom property to apply render transform for the Image in data template. We have provided the code example and sample to achieve your requirement. 
 
Code Example: 
 




 
@"    <Image Source=""{Binding Path=Content}"" Stretch=""Fill"" RenderTransform=""{Binding Path=RenderTransform}""/>" + 
 
 
            MatrixTransform mattrans = ImageTransformCalculation();             
 
            ((node.Annotations as AnnotationCollection).First() as CustomAnnotationVM).RenderTransform = mattrans; 
 
 
        private MatrixTransform ImageTransformCalculation() 
        { 
            Matrix matrix = new Matrix(); 
            matrix.RotateAt(-20.0, 100, 100); 
            matrix.ScaleAt(1, 1, 100, 100); 
            matrix.Transform(new Point { X = 100, Y = 100 }); 
 
            MatrixTransform matrixTransform = new MatrixTransform() { Matrix = matrix }; 
 
            return matrixTransform;             
        } 
 
 
Sample link: https://www.syncfusion.com/downloads/support/forum/166032/ze/Image_Annotation__Modified1879836697 
 
Regards, 
Karkuvel Rajan S