LayoutTransform RenderTransform Size Resize Sizing Xaml Hack and black magic...

ok, so this is just really making me tired all over. about every size months or so I run into this problem but really after solving it I nicely forget until it hits me in the face again. So amoung the zillion projects I'm working on I volunteered to help on any projects that have something for me. Fabio and Curtis are working on this cool project I can't talk about as such but here is this layout thing that came up in working on this control that needed fixed.

The issue is basically this. You have a control that is a set size and it has some element that is or needs to be layed out outside that control box's size. since its a custom control and its top element is a grid any thing laying out can only be the width of the grid. Event when rendered outside the control box using a translate transform etc. the last time this issue came up I remember there was also a rotate transform taht took me probably a day to figure out what was even going on but between Fabio, Curtis and I there wasn't to much wasted cycles on it but after going back and forth I did a number of tests to just to see what actually worked.

keep in mind that the control is a set size and the root element is a grid.

That being the case, here are the methods I tried to get something larger then the control box size layed out outside the box.

method 1: putting element in popup (wpf only trick, well sort of, you can do something like this in sl but its an even more aweful hack) works but lots of control issues... with behavior not the least of which is the element might still be there if the view is switched... this is a bad plan...

method 2: just trying to use a translatetransform to put it outside the box... no soup for you as your element is croped to the size of the control box (root element grid)... another bad plan...

method 3: chuncking the element into parts and transform it all into place... this works but is a silly hack... due to how messy the xaml gets... to me this is really a bad plan too unless something else didn't work.

method 4: put the element into a canvas and then transform it out... really? this works... feels like a hack but the xaml is very clean... #tiredallover

method 5: use negative margins... this really is against my inner designer or rather the xaml mess I've seen it cause is mind numbing. But alas used spairing this this is a clean xaml solution. Just bad on principal because it leads to abstract layouts that are difficult to visually decompose and mape to the xaml.

method 6: use a layout transform and then a render transform to size it down to smaller then the control box and then the layout transform to get it back to size and outside the control box...
...

this works... I don't even wnat to know why... I actually do know but really this is just well it makes me cringe but the xaml is fairly clean but its totally a hack... don't do this just for sanities sack but really it works... f... here is an example:

<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.88" ScaleY="2.88"/>
<TranslateTransform X="210"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Grid.LayoutTransform>

I went with the canvas trick as the xaml is the most clean.