Vertical Text in Wpf TextBlock

Question

Is it possible to display the text in a TextBlock vertically so that all letters are stacked upon each other (not rotated with LayoutTransform)?

user_199245 · Answer

Nobody has yet mentioned the obvious and trivial way to stack the letters of an arbitrary string vertically (without rotating them) using pure XAML:

This simply lays out the text vertically by recognizing the fact that the string is an IEnumerable and so ItemsControl can treat each character in the string as a separate item. The default panel for ItemsControl is a StackPanel, so the characters are laid out vertically.

Note: For precise control over horizontal positioning, vertical spacing, etc, the ItemContainerStyle and ItemTemplate properties can be set on the ItemsControl.

user_253632 · Answer

Just in case anybody still comes across this post... here is a simple 100% xaml solution.

    
        
            
                      
            
             Some Text for tab 1
        
        
            
                
            
             Some Text for tab 2

Micah_17744 · Answer

I don't think there is a straighforward of doing this withought changing the way the system inherently laysout text. The easiest solution would be to change the width of the textblock and supply a few extra properties like this:

THIS IS A TEST

This is hacky, but it does work.

Lette_11808 · Answer

It's doable:

Your TextBlock's TextAlignment property should be set to Center:

Then add NewLines between every character:

textBlock1.Text =
    String.Join(
        Environment.NewLine,
        textBlock1.Text.Select(c => new String(c, 1)).ToArray());

(Uses System.Linq to create an array of strings from the individual characters in the original string. I'm sure there are other ways of doing that...)

user_485221 · Answer

Below XAML code changes the angle of text displayed in a textblock.

user_1284354 · Answer

Make an image and fill the block with the image, use photoshop or something designed to manipulate text instead of fiddling in code ?

Boyan_38106 · Answer

Here's a way to insert a ' ' after every character in the text of the TextBlock, that way making it display vertically:

Then, in the Loaded event handler, you say:

TextBlock tb = sender as TextBlock;
StringBuilder sb = new StringBuilder(tb.Text);
int len = tb.Text.Length * 2;

for (int i = 1; i < len; i += 2)
{
    sb.Insert(i, '
');
}

tb.Text = sb.ToString();

That solution was proposed by Lette, but I believe my implementation incurs less overhead.

user_13235273 · Answer

You could also use the "RUN" binding

In the App.xaml file use something like this:

Create the command class binded to the textblock using i:Interaction.Triggers on the Loaded event in the app.xaml example

namespace Deridiam.Helper.Commands
{
public class HorizontalToVertical
{
    private ICommand _convertToVerticalCommand;

    public ICommand ConvertToVerticalCmd =>
        _convertToVerticalCommand ?? (_convertToVerticalCommand = new RelayCommand(
                x =>
                {
                    var tBlock = x as TextBlock;
                    var horizontalText = tBlock.Text;
                    tBlock.Text = "";

                    horizontalText.Select(c => c).ToList().ForEach(c =>
                    {
                        if (c.ToString() == " ")
                        {
                            tBlock.Inlines.Add("
");
                            //tBlock.Inlines.Add("
");
                        }

                        else
                        {
                            tBlock.Inlines.Add((new Run(c.ToString())));
                            tBlock.Inlines.Add(new LineBreak());
                        }


                    });
                }));
}
}

Finally in the .xaml file where you want the vertical text to be shown

Will result in:

V
e
r
t
i
c
a
l

T
e
x
t

user_5605739 · Answer

none of the above solutions solved my problem (some come close), so I'm here to post my solution and maybe help someone. The accepted solution helped me, but the text is not aligned to the center.

user_13349759 · Answer

I will offer a solution based on the converter:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Markup;

namespace Converters
{
    [ValueConversion(typeof(object), typeof(string))]
    public class InsertLineBreakConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (parameter != null)
                value = parameter;

            if (value == null)
                return null;

            if (!(value is string str))
                str = value.ToString();

            return string.Join(Environment.NewLine, (IEnumerable) str);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        public static InsertLineBreakConverter Instance { get; } = new InsertLineBreakConverter();
    }

    public class InsertLineBreakConverterExtension : MarkupExtension
    {
        public override object ProvideValue(IServiceProvider serviceProvider)
            => InsertLineBreakConverter.Instance;
    }
}

Usage examples:

Vertical Text in Wpf TextBlock

16 Answers