尝试旋转组框的文本

发布于 2024-07-22 07:49:30 字数 1600 浏览 2 评论 0原文

我正在尝试在 XAML 中创建一个类似于 groupbox 的元素（对于 Silverlight 2 应用程序），但有一些变化。

通常，组框由边框组成，主要内容放置在边框内，标题内容放置在边框本身上方。

我想做的是将标题文本放在左侧边框上，旋转 270 度并在顶部对齐。但我的大脑因试图找出旋转变换而受到伤害。

这是我现有 Groupbox 的 ControlTemplate，我想更改它：

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

非常感谢任何帮助！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

城歌 2024-07-29 07:49:30

最简单的方法是使用 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>

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>

回复收藏 0 原文

~没有更多了~