WPF Transformations -- Rotating and switching width/height?

Question

Basically, I have a FooControl (I did not set the Height/Width explicitly) added to a Grid.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <FooControl x:Name="HWFoo" Content="HelloWorld" Grid.Row="0">
        <FooControl.RenderTransform>
            <TransformGroup>
                <RotateTransform Angle="270" />
                <TranslateTransform Y="{Binding ActualWidth, ElementName=HWFoo}" />
            </TransformGroup>
        </FooControl.RenderTransform>
    </FooControl>
</Grid>

But, the problem now is that the FooControl fills up the entire row and when it's transformed it looks quite bizarre (because of it's height/width).

---

FooControl is a custom control. So do I do something with the ArrangeOverride or MeasureOverride? Or am I doing something wrong that can be fixed in XAML.

Answer 1

1 - Use LayoutTransform
2 - Set HorizontalAlignment to Left or Right to prevent stretching

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <FooControl x:Name="HWFoo" Content="HelloWorld" Grid.Row="0" HorizontalAlignment="Left">
        <FooControl.LayoutTransform>
            <TransformGroup>
                <RotateTransform Angle="270" />
                <TranslateTransform Y="{Binding ActualWidth, ElementName=HWFoo}" />
            </TransformGroup>
        </FooControl.LayoutTransform>
    </FooControl>
</Grid>

Answer 2

I'm not sure what you mean by 'bizarre', but I'd suggest to try and use LayoutTransform instead of RenderTransform - that's probably the issue.

Due note however that LayoutTransform is significantly slower than RenderTransform.

Answer 3

Use LayoutTransform instead of RenderTransform.

http://patconroy.wordpress.com/2009/03/24/layouttransform-vs-rendertransform-in-wpf/

Simple :)