Recently I'm working hard with Expression Blend to create some interfaces starting from some Illustrator mockups, made by a designer and also creating the user interface of some Windows Phone 7 applications I developed. One thing I've found annoying is that once you create a shape and you rotate it in the designer, Blend uses a CompositeTransform to render the shape in the XAML markup. If you are creating lot of elements (in my case they were the ticks of a gauge) you can get lot of transformations that the plugin or the phone have to render. And to me (particularly from my developer side), this is no a good thing since many times a rotated rectangle might be represented as a Path instead of using the CompositeTransform.
After realizing that creating the shape by hand is not an option I searched hard the options in the menu items because in my mind it was obvious to have a "Make transform static" option. But it simply does not exists (or at least I was unable to find it). So for a long time I decided to close my eyes and accept the Transformations. This until I found a tricky way to convince Blend to perform this operation as a side effect of a sequence of common operations. Here is the process I found:
First of all create the Shape. In this example I will use a Rectangle:
Then I apply the Transformation I need. For this example I simply rotate the shape with the mouse of an amout of degrees:
Now select the shape and find the option in the context menu (or in the Objects Tree) to make the shape a Path (Path -> Convert To Path). Obviously, to remove the transformation, you have to make the rectangle a Path. Once you have done this you will have this in the Object tree:
As now Blend have performed the conversion but the CompositeTrasform is still in place. To convince Blend we have another couple of steps. Now Draw another shape (a rectangle) over the shape to convert. See in figure the result:
Then Convert also this Rectangle to a Path. After this step the Objects Tree will show two paths one on top of the other. In the figure I've named the upper Shape to "Mask":
Finally, and it is the tricky thing you have to deselect both the Paths (e.g. selecting the LayoutRoot element) then select again them starting from "Mask" then (using CTRL) the shape to convert. It is important to be aware that in the conversion the order matter. If you select the shapes in the inverse order you will not reach the required result. Then finally from the context menu select Combine -> Intersect. The resulting shape is this:
The type of selection makes evident that now the Shape ha no rotation but we can see at the markup and the result is reported here:
1: <Grid x:Name="LayoutRoot" Background="White">
2: <Path x:Name="Mask"
3: Data="M29.362633,1.5 L101.14476,29.362633 L73.282127,101.14476 L1.5,73.282127 z"
6: Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False"/>
Now you are ready to put the shape wherever you need it. I've experimented the trick in many ways and until today I never found a case where it does not works. The sole things you have to keep in mind is the right order of the steps, and that you can convert only a single shape at a time. So for my Gauge I had to make the conversion many times.
As a suggestion I think it would be beautiful to have an additional menu item that does the trick automatically... If someone knows a better way please feel free to write me and I will be very grateful.