在固定宽度的网格内重叠旋转的Textblock

Question

I have UserControl which represents a header. The header text can be pretty long, so rotating solves the problem. Each colum should be 60 DPI, but as soon the text uses up more than 60 the text is no longer visible. Is Grid the right class to use?

To make the long story short, below is the sample of what I try to achieve (fist picture) and what I have (2nd one).

Below is the xaml of the 2nd picture:

<UserControl>
<Grid Height="Auto">
    <Grid.Resources>
        <Style x:Key="StyleGrid" TargetType="Grid">
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="RenderTransformOrigin" Value="0,0.5" />
            <!--  <Setter Property="LayoutTransform">  -->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="330" />
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="24" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="492" />
    </Grid.ColumnDefinitions>

    <!--  Header  -->
    <TextBlock Grid.Row="0"
               Grid.Column="0"
               Grid.ColumnSpan="2"
               FontSize="14"
               FontWeight="Bold"
               Text="Date 14.08.2014" />
    <TextBlock Grid.Row="1"
               Grid.Column="0"
               Margin="1,0,0,0"
               FontSize="18"
               Text="This is the Title" />

    <Grid Grid.Row="0"
          Grid.RowSpan="2"
          Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0"
              HorizontalAlignment="Left"
              Style="{StaticResource StyleGrid}">
            <TextBlock Text="This is a long colum titel" />
        </Grid>
        <Grid Grid.Column="1"
              HorizontalAlignment="Left"
              Style="{StaticResource StyleGrid}">
            <TextBlock FontSize="11" Text="Bla Bla 12" />
        </Grid>
        <Grid Grid.Column="2"
              HorizontalAlignment="Left"
              Style="{StaticResource StyleGrid}">
            <TextBlock Text="Some more Text" />
        </Grid>
        <Grid Grid.Column="3"
              HorizontalAlignment="Left"
              Style="{StaticResource StyleGrid}">
            <TextBlock Text="Short Text" />
        </Grid>
    </Grid>
</Grid>

Answer 1

Usually when you want the child control to be able to be displayed outside of the bounds of the parent panel, a Canvas is used as the panel.

<Grid VerticalAlignment="Center">
        <Grid.Resources>
            <Style x:Key="StyleGrid2" TargetType="Canvas">
                <Setter Property="VerticalAlignment" Value="Bottom" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="RenderTransformOrigin" Value="0,0.5" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform Angle="330" />
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="24" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="492" />
        </Grid.ColumnDefinitions>

        <!--  Header  -->
        <TextBlock Grid.Row="0"
           Grid.Column="0"
           Grid.ColumnSpan="2"
           FontSize="14"
           FontWeight="Bold"
           Text="Date 14.08.2014" />
        <TextBlock Grid.Row="1"
           Grid.Column="0"
           Margin="1,0,0,0"
           FontSize="18"
           Text="This is the Title" />

        <Grid 
            Grid.Row="0"
            Grid.RowSpan="2"
            ShowGridLines="True"
            Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="60" />
            </Grid.ColumnDefinitions>

            <Canvas Grid.Column="0"
                HorizontalAlignment="Left"
                Style="{StaticResource StyleGrid2}">
                <TextBlock Text="This is a long colum titel" />
            </Canvas>
            <Canvas Grid.Column="1"
                HorizontalAlignment="Left"
                Style="{StaticResource StyleGrid2}">
                <TextBlock FontSize="11" Text="Bla Bla 12" />
            </Canvas>
            <Canvas Grid.Column="2"
                HorizontalAlignment="Left"
                Style="{StaticResource StyleGrid2}">
                <TextBlock Text="Some more Text" />
            </Canvas>
            <Canvas Grid.Column="3"
                HorizontalAlignment="Left"
                Style="{StaticResource StyleGrid2}">
                <TextBlock Text="Short Text" />
            </Canvas>
        </Grid>
    </Grid>