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

Question

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

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

这是文本块的正常工作方式：

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

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

如有任何提示，我们将不胜感激。

Answer 1

编辑 - 用户控制的 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" />

Answer 2

要在 UWP 中获得 "real" 垂直文本，请尝试以下操作：

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

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

How to make the text in textblock display vertically in UWP/WinRT

c#

xaml

windows-runtime

uwp