如何使文本块中的文本在 UWP/WinRT 中垂直显示

Question

我需要在我的 UWP 应用程序中更改文本的显示顺序，但遗憾的是我没有找到任何直接的解决方案。

WinRT 中的文本块不支持这个属性，至少我在 MSDN 上找不到关于这个功能的任何信息。我找到了一个解决方案，我需要创建一个“新”文本块控件，它支持以垂直顺序显示文本，但该解决方案适用于 silverlight，所以我正在研究它是否有效。

这是 textblock 正常工作的方式：

这就是我希望它工作的文本块的方式：

我知道有一种方法可以设置宽度和文本环绕，但它只适用于特定的屏幕尺寸和分辨率，这意味着在其他屏幕下文本将无法正常显示

任何提示将不胜感激。

Answer 1

要在 UWP 中获得“真实”的垂直文本，请尝试以下操作：

<TextBlock Text="Rotated Text" 
           FontSize="18" 
           Foreground="Black">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="-90" />
    </TextBlock.RenderTransform>
</TextBlock>

Answer 2

编辑 - 带有用户控制的 UWP 版本

VerticalTextBlock - 后面的代码

public partial class VerticalTextBlock : UserControl
{

    public VerticalTextBlock()
    {
        InitializeComponent();
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text",
            typeof(string),
            typeof(VerticalTextBlock),
            new PropertyMetadata(string.Empty, textChangeHandler));

    private static void textChangeHandler(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var prop = d as VerticalTextBlock;
        var textBlock = prop.TheTextBlock;
        var str = (e.NewValue as string);
        textBlock.Inlines.Clear();
        for (int i = 0; i < str.Length-1; i++)
        {
            textBlock.Inlines.Add(new Run() { Text = str[i] + Environment.NewLine });
        }
        textBlock.Inlines.Add(new Run() { Text = str[str.Length-1].ToString()});
    }
}

垂直文本块 - XAML

<UserControl
    ...
    >
    <TextBlock x:Name="TheTextBlock"/>
</UserControl>

使用和测试 - XAML

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock x:Name="a" Text="ASD"></TextBlock>
    <local:VerticalTextBlock x:Name="b" Text="{Binding ElementName=a, Path=Text}" />
    <local:VerticalTextBlock x:Name="c" Text="{Binding ElementName=b, Path=Text}" />
    <TextBlock x:Name="d" Text="{Binding ElementName=c, Path=Text}"></TextBlock>
    <TextBlock TextAlignment="Center" HorizontalAlignment="Left">
        <Run Text="A"/>
        <LineBreak/>
        <Run Text="S"/>
        <LineBreak/>
        <Run Text="D"/>
        <LineBreak/>
        <Run Text="A"/>
        <LineBreak/>
        <Run Text="S"/>
        <LineBreak/>
        <Run Text="D"/>
    </TextBlock>
</StackPanel>

原始答案 - 没有注意到它是 UWP 而不是 WPF

你让我感兴趣，因为我只在 Android 中做过，所以有一些解决方案可行，但我决定尝试自定义控件扩展 TextBlock

public partial class VerticalTextBlock : TextBlock
{
    public VerticalTextBlock()
    {
        InitializeComponent();
    }

    new public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    new public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text",
            typeof(string),
            typeof(VerticalTextBlock),
            new PropertyMetadata(string.Empty, textChangeHandler));

    private static void textChangeHandler(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var prop = d as VerticalTextBlock;
        var str = (e.NewValue as string);
        var inlines = str.Select(x => new Run(x + Environment.NewLine));
        prop.Inlines.Clear();
        prop.Inlines.AddRange(inlines);
    }
}

在 XAML 中的使用

<local:VerticalTextBlock Text="AABBCCDDEEFF" />