TextBlock 填充垂直空间

发布于 2024-08-03 05:34:25 字数 1746 浏览 10 评论 0原文

我想创建一个垂直（-90 变换角度）的 TextBlock （或其中包含仅用于显示的文本的其他元素），但我希望该元素填充它所包含的垂直空间中，但有一个定义的水平量（我使用垂直和水平术语而不是高度和宽度，因为当我让 TextBlock 垂直时它会被交换），并将其与左侧对齐容器。

我相信我了解如何使用 RenderTransform 或 LayoutTransform 使 TextBlock 垂直。但是，我似乎无法让“对接”正常工作，每当我更改容器的垂直方向时，TextBlock 都会在水平方向而不是垂直方向上增加。

这是我所拥有的：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AttendanceTracker.StudentView"
x:Name="UserControl" Height="172.666" Width="417.333">

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <Border BorderBrush="Black" BorderThickness="1" RenderTransformOrigin="0.5,0.5" Background="#52FFFFFF" Width="139.667">
        <TextBlock Text="My Title" TextWrapping="Wrap" FontSize="18.667" TextAlignment="Center" Foreground="White" Margin="-58.509,68.068,49.158,70.734" Background="Black" RenderTransformOrigin="0.5,0.5" Width="147.017" d:LayoutOverrides="Height">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Border>
</StackPanel>

更改 UserControl 的高度，您会注意到 TextBlock 的水平方向增加，而不是所需的垂直方向增加。

原文

I want to create a TextBlock (or some other element with text in it for display only) that is vertical (-90 transform angle), but I want that element to fill up the vertical space it is contained in, but have a defined horizontal amount (I'm using vertical and horizontal terms instead of height and width since it's swapped when I have the TextBlock go vertical), and have it aligned to the left side of the container.

I believe I understand how to make a TextBlock go vertical using RenderTransform or LayoutTransform. However, I cannot seem to get the 'docking' to work properly, whenever I change the vertical aspect of the container the TextBlock increases in horizontal aspect instead of vertical.

Here is what I have:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AttendanceTracker.StudentView"
x:Name="UserControl" Height="172.666" Width="417.333">

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <Border BorderBrush="Black" BorderThickness="1" RenderTransformOrigin="0.5,0.5" Background="#52FFFFFF" Width="139.667">
        <TextBlock Text="My Title" TextWrapping="Wrap" FontSize="18.667" TextAlignment="Center" Foreground="White" Margin="-58.509,68.068,49.158,70.734" Background="Black" RenderTransformOrigin="0.5,0.5" Width="147.017" d:LayoutOverrides="Height">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Border>
</StackPanel>

Change the height of the UserControl and you will notice that the TextBlock increases in horizontal aspect instead of the desired vertical aspect.

分享到QQ

分享到微博

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

发布评论

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

旧人 2024-08-10 05:34:25

如果我理解正确，那么这应该为您指明正确的方向：

<StackPanel Orientation="Horizontal">
    <TextBlock Background="Red" Text="My Title">
        <TextBlock.LayoutTransform>
            <TransformGroup>
                <RotateTransform Angle="90"/>
            </TransformGroup>
        </TextBlock.LayoutTransform>
    </TextBlock>
</StackPanel>

关键是使用 LayoutTransform，而不是 RenderTransform。这将确保在变换发生后发生另一个布局过程。否则，布局系统将使用原始边界矩形来布局 TextBlock。

除此之外，我刚刚摆脱了所有 Blend 生成的垃圾，看看发生了什么。结果如下：

替代文本 http://img187.imageshack.us/img187/1189/截图tbv.png

If I understand you correctly, then this should point you in the right direction:

<StackPanel Orientation="Horizontal">
    <TextBlock Background="Red" Text="My Title">
        <TextBlock.LayoutTransform>
            <TransformGroup>
                <RotateTransform Angle="90"/>
            </TransformGroup>
        </TextBlock.LayoutTransform>
    </TextBlock>
</StackPanel>

The key is to use LayoutTransform, not RenderTransform. This will ensure that another layout pass occurs after the transform occurs. Otherwise, the layout system is using the original bounding rectangle to layout the TextBlock.

Beyond that, I just got rid of all the Blend-generated cruft to see what was going on. Here's the result:

alt text http://img187.imageshack.us/img187/1189/screenshottbv.png

回复收藏 0 原文

~没有更多了~