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

Question

我有UserControl，它代表一个标题。标题文本可能很长，因此旋转可以解决问题。每个列应该是60 DPI，但是一旦文本消耗超过60，文本就不再可见。 Grid是否适合使用？

长话短说，下面是我试图实现的样本（第一张图片）和我所拥有的（第二张）。

下面是第二张图片的xaml：

<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

通常，当您希望子控件能够显示在父面板的边界之外时，Canvas将用作面板。

<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>