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

Question

I need to change the display order of the text in my UWP app but unfortunately I don't find any straight solution to do so.

The textblock in WinRT does not support this property, at least I can't found any information about this feature from MSDN. I found a solution that I need create a "New" textblock control which supports the text display in vertical order but the solution is for silverlight so I'm working on it to see whether it works or not.

This is how textblock works normally: enter image description here

This is how textblock that I want it to work:

enter image description here

I know there is a way that just setting up the Width and text wraping something but it only works for a certain screen size & resolution, which means under other screen the text will not display properly

Any tips would be appreciated.

@yms Hey, I just update my question and you could just look at it again if you will. Thank you so much — jason_wun, Nov 11 '15 at 21:08
Set the width to somewhat very small and your letters will appear each on its own line. This at least guaranteed to work. — Croll, Nov 11 '15 at 21:38
Possible duplicate of [Vertical Text in Wpf TextBlock](http://stackoverflow.com/questions/349875/vertical-text-in-wpf-textblock) — Justin XL, Nov 11 '15 at 21:53
@JustinXL nope, that is just for WPF and it does not work under Windows Runtime — jason_wun, Nov 12 '15 at 13:59
Yes it does. The Designer is buggy, ignore the exception n run the project. It will work. — Justin XL, Nov 12 '15 at 19:08

score 3 · Answer 1 · answered Feb 07 '16 at 09:41

To get a "real" vertical text in UWP try the following:

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

kirotab · Accepted Answer · 2015-11-11T22:23:48.773

Edit - UWP verison with user control

VerticalTextBlock - code behind

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()});
    }
}

VerticalTextBlock - XAML

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

Usage and test - 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>

Original Answer - didn't notice it's UWP not WPF

You got me interested as I've only done this in Android, so there are a few solutions that will work but I decided to try custom control extending 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);
    }
}

Usage in XAML

<local:VerticalTextBlock Text="AABBCCDDEEFF" />

This is a good solution. The solution above doesn't work so basically I think I should create a custom textblock — jason_wun, Nov 12 '15 at 13:57
@jason_wun Found interesting article on control creation (WinRT but universal would be similar I think) [Link to article](http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx). Also [MSDN Example](https://code.msdn.microsoft.com/windowsapps/XAML-user-and-custom-a8a9505e/sourcecode?fileId=51012&pathId=1761065519) — kirotab, Nov 12 '15 at 14:18

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

2 Answers2