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.
- Open the XAML file in Blend.
- Rotate your object on the design surface.
- 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.
- Merge the object aka flatten the XAML into a single description.
- Cut out your throw-away object.
- 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.