Wednesday, October 17, 2012

Applying transforms to source xaml

Applying transforms to source xaml

I have a bit of a problem with XAML and Blend. We;ve converted the company logo from AI -> SVG -> XAML, cleaned it up a bit and its has produced a very peculiar source. In essence it is applying a "flip" transformation to a collection of paths:

<Canvas Width="640" Height="200" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <Canvas Width="640" Height="200" RenderTransform="1,0,0,-1,0,200" >          <!-- L -->         <Canvas RenderTransform="1,0,0,1,317.0645,64.3652">             <Path>                 <Path.Data>                     <PathGeometry FillRule="Nonzero" Figures="M0,0L0,75.065 18.743,76.83 18.743,17.066 43.553,17.066 38.564,0 0,0z" />                 </Path.Data>             </Path>         </Canvas>         ... etc 

Note the RenderTransform="1,0,0,-1,0,200" node in the enclosing Canvas. It flips the canvas upside down and lowers it 200 down to adjust to root canvas position. Given taht Logo looks ok when rendered means that all graphic elements in the xaml are actually upside down :). Maybe its an AI thing, I don't know.

The problem is that I now use Blend to convert this canvas into a GraphicBrush. The blend omits the transform and the logo looks upiside down when brush is applied. Rather then again transforming at each brush recipient I was thinking that maybe we should just fix it at the root, e.g. convert all paths so that they render properly to begin with avoiding a need for root transform.

Question: is there a programmatic (or any other way) to do this? Meaning, can I render this canvas and then serialize a rendered (after all transforms applied) DOM into an XAML?

Or to make the question clearer: there are two transforms applied to each path (as seen above, one global flip and one local shift for each path), can I somehow apply those transforms to each path/its points so that paths render without them.

Answers & Comments...

Answer: 1

You can use the Export to XAML feature built in to Expression Design in the Microsoft Expression suite.

Or personally I normally use Mike Swanson's AI to XAML converter since I'm normally already working in Illustrator for more complex vector graphics.

Both would provide a better result than the converter you used. Not sure where that original conversion got so wacky with the RenderTransforms etc but as you've found, it helps to have a good conversion to start with then going through the trouble of fixing a bad one haha.

Cheers!

by : Chris W.http://stackoverflow.com/users/1090206




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog