0

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!

4

1 回答 1

2

最简单的方法是使用 RenderTransform。举个例子：

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

您还可以使用属性 CenterX 和 CenterY 指定旋转中心

希望这可以帮助！

编辑

要调整标签位置，您可以使用这样的画布：

<Canvas Margin="0,45,0,-45">
    <Canvas.RenderTransform>
        <RotateTransform  Angle="270"></RotateTransform>
    </Canvas.RenderTransform>
    <TextBlock Background="Red">
        My title!
    </TextBlock>
</Canvas>
于 2009-05-28T02:14:11.467 回答