Essayer de faire pivoter le texte d'une boîte de groupe

Question

J'essaie de créer un élément de type boîte de groupe en XAML (pour une application Silverlight 2) mais avec une torsion.

Normalement, une zone de groupe se compose d'une bordure, avec le contenu principal placé à l'intérieur de la bordure, et d'un contenu d'en-tête placé sur la bordure elle-même.

Ce que j'essaie de faire est de placer le texte d'en-tête sur la bordure gauche, tourné de 270 degrés et justifié en haut. Mais mon cerveau fait mal d'essayer de comprendre la transformation de rotation.

Voici mon ControlTemplate pour GroupBox existant, que je voudrais changer:

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

Toute aide très appréciée!

Answer 1

La méthode la plus simple consiste à utiliser RenderTransform. Pour exemple:

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

Vous pouvez également spécifier le centre de rotation avec des propriétés CenterX et CenterY

Hope this helps!

EDIT

Pour Ajust à la position de l'étiquette, vous pouvez utiliser une toile comme ceci:

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