WPF Vertical text in Button

Question

I would like to know how to display text vertically in a WPF Button. I have a tall rectangular button, Width = 38, Height = 90. I would like the button to show text as
B
U
Y

or

S
E
L
L

Can anyone tell me how this can be achieved in WPF .

Thanks

what effort have you made? – Daniel A. White Feb 04 '15 at 21:34 — Daniel A. White, Feb 04 '15 at 21:34

score 6 · Accepted Answer · edited May 23 '17 at 12:34

6

You can simply use an ItemsControl, which will create a list of the elements inside of it, making them appear vertical.

<Button>
    <ItemsControl ItemsSource="BUY" />
</Button>

You can find more information on doing something like this on this question..

edited May 23 '17 at 12:34

Community

1
1

answered Feb 04 '15 at 21:36

Cyral

13,999
6
50
90

3

Clever use of string as an `IEnumerable`. +1 for sheer audacity, though it could use a bit of explanation. – BradleyDotNET Feb 04 '15 at 21:37

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

Maybe this answers helps you. You basically need a style that wraps your text added to the button.

Check out this answer: WPF button textwrap style

edited May 23 '17 at 12:02

Community

1
1

answered Feb 04 '15 at 21:38

silverfighter

6,762
10
46
73

fallaciousreasoning · Answer 3 · 2015-02-04T22:18:58.800

The answer with an ItemsControl sounds perfect but in case you didn't want to do that you could create a converter that adds a '\n' between each character of text.

The XAML for your Page:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DilbertDownloader" x:Class="DilbertDownloader.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:TextVerticalConverter x:Key="TextVerticalConverter"/>
    </Window.Resources>
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <Button Content="{Binding ButtonText, Converter={StaticResource TextVerticalConverter}}" HorizontalAlignment="Left" Margin="270,156,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

The code for the converter:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DilbertDownloader
{
    public class TextVerticalConverter : System.Windows.Data.IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (!(value is string)) return value;

            var converted = "";

            foreach (var character in (string)value)
            {
                //If the character is a space, add another new line 
                //so we get a vertical 'space'
                if (character == ' ') {  
                    converted += '\n';
                    continue;
                }

                //If there's a character before this one, add a newline before our
                //current character
                if (!string.IsNullOrEmpty(converted))
                    converted += "\n";

                converted += character;
            }

            return converted; 
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //Not really worried about this at the moment
            throw new NotImplementedException();
        }
    }
}

And the code for the ViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DilbertDownloader
{
    public class ViewModel
    {
        public string ButtonText { get; set; }

        public ViewModel()
        {
            ButtonText = "BUY";
        }
    }
}

Hope that's helpful

score 0 · Answer 4 · answered Feb 05 '15 at 07:37

Using LineBreak and Literal LineBreak

<Button Width="38" Height="90" Content="B&#x0a;u&#x0a;y"/>

  <Button Width="38" Height="90">
    <TextBlock>
        <Run Text="S"/>
        <LineBreak/>
        <Run Text="E"/>
        <LineBreak/>
        <Run Text="L"/>
        <LineBreak/>
        <Run Text="L"/>
        <LineBreak/>
    </TextBlock>
</Button>

Setting width and textwrapping to textblock

<Button Width="38" Height="90">
    <TextBlock Text="Buy" Width="8" TextWrapping="Wrap"></TextBlock>
</Button>

WPF Vertical text in Button

4 Answers4