Trying to rotate text for a groupbox

Question

I'm trying to create a groupbox-like element in XAML (for a Silverlight 2 app) but with a twist.

Normally a groupbox would consist of a border, with the main content placed inside the border, and a header content placed over the border itself.

What I'm trying to do is place the header text over the left side border, rotated 270 degrees and justified at the top. But my brain hurts from trying to figure out the rotate transform.

Here's my ControlTemplate for the existing Groupbox, which I'd like to change:

<ControlTemplate TargetType="Controls1:GroupBox">
  <Grid Background="{TemplateBinding Background}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Border BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1" Grid.RowSpan="2" 
            BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
      <Border.Clip>
        <GeometryGroup FillRule="EvenOdd">
          <RectangleGeometry x:Name="FullRect" Rect="0,0,300,200"/>
          <RectangleGeometry x:Name="HeaderRect" Rect="6,0,100,100"/>
        </GeometryGroup>
      </Border.Clip>
    </Border>
    <ContentPresenter Grid.Row="2" ContentTemplate="{TemplateBinding ContentTemplate}" 
                      Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
    <ContentControl x:Name="HeaderContainer" Margin="6,0,0,0" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Left" IsEnabled="False" >
      <ContentPresenter Margin="3,0,3,0" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" />
    </ContentControl>
  </Grid>
</ControlTemplate>

Any help much appreciated!

Answer 1

The simplest way is use a RenderTransform. For exemple:

<TextBlock Background="Red" Width="100" Height="50">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="270"></RotateTransform>
    </TextBlock.RenderTransform>
    My title!
</TextBlock>

You can also specify the rotation center with properties CenterX and CenterY

Hope this helps!

EDIT

To ajust to label position you can use a Canvas like this:

<Canvas Margin="0,45,0,-45">
    <Canvas.RenderTransform>
        <RotateTransform  Angle="270"></RotateTransform>
    </Canvas.RenderTransform>
    <TextBlock Background="Red">
        My title!
    </TextBlock>
</Canvas>