Wpf TextBlock中的垂直文本

47

是否有可能在TextBlock中垂直显示文本,使所有字母都叠放在彼此之上(而不是通过LayoutTransform旋转)?

16个回答

80

目前还没有人提到一种明显且微不足道的利用纯XAML垂直堆叠任意字符串字母(无需旋转)的方法:

<ItemsControl
  ItemsSource="Text goes here, or you could use a binding to a string" />

这段代码通过识别字符串是IEnumerable类型,从而让ItemsControl将字符串中的每个字符作为单独的项进行垂直排列。默认情况下,ItemsControl使用StackPanel作为面板来实现垂直布局。

注意:若需要对水平定位、垂直间距等进行精确控制,可以在ItemsControl上设置ItemContainerStyle和ItemTemplate属性。


4
通过创建字符串资源并将其绑定到Items Source,来克服固定字符串的“不转换为字符串”的问题: <Expander.Resources><system:String x:Key="Title">堆叠文本</system:String></Expander.Resources> <Expander.Header><ItemsControl ItemsSource="{StaticResource Title}"></Expander.Header> - aliceraunsbaek
1
<ItemsControl ItemsSource="{Binding Source='一些文本'}"/> - ASh

28

如果还有人遇到这个问题...这里有一个简单的100% XAML解决方案。

    <TabControl TabStripPlacement="Left">
        <TabItem Header="Tab 1">
            <TabItem.LayoutTransform>
                <RotateTransform Angle="-90"></RotateTransform>      
            </TabItem.LayoutTransform>
            <TextBlock> Some Text for tab 1</TextBlock>
        </TabItem>
        <TabItem Header="Tab 2">
            <TabItem.LayoutTransform>
                <RotateTransform Angle="-90"></RotateTransform>
            </TabItem.LayoutTransform>
            <TextBlock> Some Text for tab 2</TextBlock>
        </TabItem>
    </TabControl>

19

我认为没有一种简单的方法可以在不改变系统固有的文本布局方式的情况下完成这个。最简单的解决方案是更改文本块的宽度并提供一些额外的属性,例如:

<TextBlock TextAlignment="Center" FontSize="14" FontWeight="Bold" Width="10" TextWrapping="Wrap">THIS IS A TEST</TextBlock>

这是一种不太规范的方法,但它确实有效。


18

只需使用简单的LayoutTransform即可。

<Label Grid.Column="0" Content="Your Text Here" HorizontalContentAlignment="Center">
  <Label.LayoutTransform>
    <TransformGroup>
        <RotateTransform Angle="90" />
        <ScaleTransform ScaleX="-1" ScaleY="-1"/>
    </TransformGroup>
  </Label.LayoutTransform>
</Label>

感谢您的回答。实际上,这是最简单和最好的结果,因为它还旋转了文本,这是阅读文本最自然的方式。 - Álvaro García

4

这是可行的:

您的TextBlockTextAlignment属性应设置为Center

<TextBlock Name="textBlock1" TextAlignment="Center" Text="Stacked!" />

然后在每个字符之间添加NewLine
textBlock1.Text =
    String.Join(
        Environment.NewLine,
        textBlock1.Text.Select(c => new String(c, 1)).ToArray());

(使用 System.Linq 从原始字符串的单个字符创建字符串数组。我相信还有其他方法可以实现这一点...)


3
以下XAML代码可以改变文本块中显示的文本角度。
<TextBlock Height="14"
        x:Name="TextBlock1"
        Text="Vertical Bottom to Up" Margin="73,0,115,0" RenderTransformOrigin="0.5,0.5" >
        <TextBlock.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="-90"/>
                <TranslateTransform/>
            </TransformGroup>
        </TextBlock.RenderTransform>
 </TextBlock>

2

Ray Burns提供的被接受的答案在我的.net 4.0上不起作用。这是我是如何做到的:

引入mscorlib

xmlns:s="clr-namespace:System;assembly=mscorlib"

将其放入您的用户控件/窗口/页面资源中

<s:String x:Key="SortString">Sort</s:String>

并像这样使用它

<ItemsControl ItemsSource="{Binding Source={StaticResource SortString}}" Margin="5,-1,0,0"   />    

希望它能帮助到你!

1
创建一个 StackPanel,其中包含一堆 TextBlock,每个 TextBlock 只显示一个字符。

1

将文本容器的最大宽度设置为仅允许一个字符,并换行文本:

<TextBlock TextWrapping="Wrap" MaxWidth="8" TextAlignment="Center" Text="stack" />

尽管这种方法有些不正规,但它似乎比其他方法要轻松得多,所以我试了一下,但是它有一个问题。如果您的文本中有小写字母 i,那么由于它相当狭窄,它可能能够在最大宽度为8的范围内容纳i和旁边的字母。这对我来说发生在文本“Y轴”中,它可以将i和s放在同一行上。将maxwidth更改为7则无法适应“W”,因此本质上存在缺陷。 - Alan Macdonald

1

创建一张图片并用它来填充区块,在Photoshop或设计用于文本处理的软件中操作,而不是在代码中调整。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接