Problem:

I needed to take a stock XAML ‘image’ for a search icon from SyncFusion’s Metro Studio and rotate it about 75 degrees but I couldn’t use the rotate transformation code to do it because all of the required data had to be contained in the path description/geometry.

If you need a reference for how to do a normal transformation, try the Transforms Overview on MSDN.

Context:

Last year, I needed to set a logo for a new app I was developing using the ModernUI shell (CodePlex/GitHub).  The logo is set in as a property of the ModernWindow as LogoData.  LogoData is a raw path.  So I couldn’t use anything except the XAML defined geometry to describe the logo.     

Solution:

I don’t recall where I found the idea or if I pieced it together from posts around the topic, but here’s what you need to do.

 

1. Open the XAML file in Blend.
2. Rotate your object on the design surface.
3. Add a new throw-away object far away from your target object.
   • I used an ellipse because it’s easier to see in the final path code.
   • I also added the object to the left and below my original object.
   • You can’t have any overlap to get this to work right.
4. Merge the object aka flatten the XAML into a single description.
5. Cut out your  throw-away object.
6. Save it.

 

After you save the XAML the original object path information will be updated to show the rotation within the path.

I hope that helps.