76

How do I get multi-line text on a WPF Button using only C#? I have seen examples of using <LineBreak/> in XAML, but my buttons are created completely programmatically in C#. The number and labels on the buttons correspond to values in the domain model, so I don't think I can use XAML to specify this.

I have tried the naive approach below, but it does not work.

Button b = new Button();
b.Content = "Two\nLines";

or

b.Content = "Two\r\nLines";

In either case, all i see is the first line ("Two") of the text.

2
  • Turns out the problem might have to do with the buttons' being in a grid. When I make a button and just throw it up randomly, the "\n" works fine. However, I have a grid of buttons, and each button takes up one cell. The grid is on the left of a DockPanel. In this case, the "\n" is not working, and I only see the first line of the text. (Sorry that the initial question was misleading) Sep 19, 2009 at 19:31
  • 4
    Sorry everybody. I got so excited about joining stackoverflow and posting my first question, that my first question is terrible. The "\n" works fine. My grid had a fixed size, and there is simply no visual indication in a button that there's more text available (e.g., no "..." indicating a cutoff). Once I generously expanded the size of my grid, the button text showed up fine. :P Sep 19, 2009 at 19:38

11 Answers 11

116

OR in XAML directly:

<Button>
   <TextBlock>Two<LineBreak/>Lines</TextBlock>  
</Button>
2
  • 1
    Thanks, I was looking at TextBox but TextBlock+LineBreak is what I was looking for
    – juFo
    Jul 31, 2014 at 8:52
  • I like this one as you can explicitly break where you want.
    – DRapp
    Nov 6, 2014 at 12:42
61

I prefer this way:

<Button Width="100">
  <TextBlock TextWrapping="Wrap">This is a fairly long button label</TextBlock>
</Button>

it worked for me.

3
  • 2
    Is there a way to get it to center the text using this solution?
    – Jeff
    Nov 1, 2013 at 19:21
  • 13
    I found the answer here: stackoverflow.com/a/4624689/13338 Namely--use TextAlignment instead of HorizontalAlignment.
    – Jeff
    Nov 1, 2013 at 19:38
  • That works, but unlike using "&#xa;" in XAML or "\n" in code-behind the text stays black when the button is disabled. By default the text is grayed out for disabled button.
    – Vad
    Jul 18, 2016 at 21:09
53

Answer is very simple. Just use &#xa; to introduce line-break, i.e.:

<Button Content="Row 1 Text &#xa; Row 2 Text"/>
3
  • If I want to do a button similar to keyboard, how to do it for & with 7? Currently it appear invalid markup as "expected the following token ';'"..also with underscore with multiline
    – Luiey
    Sep 7, 2018 at 2:46
  • 2
    @Luiey You can use this <Button Content="&amp; &#xa;7"/> Sep 7, 2018 at 14:37
  • 1
    perfect! And for underscore with minus, I'm using <Button Content="__&#xa;-"/> with double underscore
    – Luiey
    Sep 12, 2018 at 2:48
32

There are several ways to do this via XAML:

  1. Add a TextBlock with a line-break:
<Button>     
    <TextBlock TextAlignment="Center">Line 1<LineBreak/>Line 2</TextBlock>
</Button>
  1. Add a line-break in the text:

This method is simple but there is no way to easily control the alignment of the text:

    <Button Content="Line 1 &#xa; Line 2"/>
  1. Add a Text Block and Wrap the text

Once the Buttons size is smaller than the TextBlocks size it will simply split the content into two lines or more automatically

<Button>
  <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center">Line 1 Line 2</TextBlock>
</Button>
  1. Use can a StackPanel in your Button, and add each line as a Text Block:
<Button>
    <StackPanel>
        <TextBlock Text="Line1" HorizontalAlignment="Center"/>
        <TextBlock Text="Line2" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>
  1. Use a Grid in your Button:
<Button>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
            <TextBlock Text="Line1" HorizontalAlignment="Center"/>
            <TextBlock Text="Line2" HorizontalAlignment="Center"/>
    </Grid>
</Button>
  • I'm sure many more exist, the list is basically in order from most to least favorite.
13

This is how we do it here it allows for easy centering as well

<Button Height="40" Width="75">
    <StackPanel>
        <TextBlock Text="Line1" HorizontalAlignment="Center"/>
        <TextBlock Text="Line2" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>
2
  • How do you promamatically change the text of line 2 ? Jul 19, 2022 at 19:10
  • OK, I did it like this (without error handeling for simplicity here) StackPanel? sp = buttonA3.FindName("stackpanel") as StackPanel; if (sp != null) { ((TextBlock)sp.Children[0]).Text = "Text 1"; ((TextBlock)sp.Children[1]).Text = "Text 2"; } Jul 19, 2022 at 19:22
9

Turns out the "\n" works fine. My grid had a fixed size, and there is simply no visual indication in a button that there's more text available (e.g., no "..." indicating a cutoff). Once I generously expanded the size of my grid, the button text showed up in two rows.

8

Have you tried this?

b.Content = new TextBlock { 
    Text = "Two\nLines", 
    TextWrapping = TextWrapping.Wrap };

If that doesn't work, then you could try adding a StackPanel as a child and adding two TextBlock elements to that.

1
  • This worked, except I used instead: Text = "Two\nLines"
    – jas
    Jun 1, 2021 at 21:07
4

How about:

TextBlock textBlock = new TextBlock();
textBlock.Inlines.Add("Two");
textBlock.Inlines.Add(new LineBreak());
textBlock.Inlines.Add("Lines");
Button button = new Button();
button.Content = textBlock;

If you're using C# 3 you can make that slightly neater:

Button button = new Button
{
    Content = new TextBlock { Inlines = { "Two", new LineBreak(), "Lines" } }
};
0

I had the same issue.

I tried:
- button.content = "Line1\nLine2" (didn't work, maybe I did something wrong);
- replace button text with a new label (doesn't let you center align the text);
- replace button text with a text block (I think this lets you center align the text but doesn't wrap it);

I've seen answers mentioning the use of stackpanels or grids.
I've seen answers saying not to use a Textbox.

Even though the OP says that the \n works, I don't think that that is the way to go, in my opinion you're just brute forcing the control to do what you want and if at any point you need to change the text you will have to go and check if the text is correctly wrapped or if the \n needs to be in another position.
What I found to be the best way to go (to me) is to replace the button content with a text box (you can just drag and drop, no need to mess with XAML) and set the following properties as stated: IsReadOnly = true;
Focusable = false (optional);
I think Focusable = false prevents the user from selecting the text, even though he can't edit it, I don't want him to even select it (personal taste).

This will make the text box behave similar to a label but with the advantage that lets you center align the text.

0

Try below code:

<Button Command="{Binding DeliveryDateCommand}" x:Name="cntlbtnf5" Background="White" BorderBrush="#FFABADB3" Grid.Column="4">
   <Border BorderBrush="{x:Null}" Height="Auto">
     <TextBlock Text="Ctrl + F5 Delivery BillDate" TextWrapping="Wrap" Width="110" TextAlignment="Center" Height="44" />
   </Border>
</Button>
0

As an alternative/workaround if you gotta use an external custom button which you can't edit its content easily, you can always use a Grid and overlay the functional part of the button over your visual if it can be static.

<Grid>
  <TextBlock Foreground="LightGray">Click<LineBreak />Here</TextBlock>
  <MyCustomButton BorderBrush="Transparent" IsPressed="{Binding MyBtn.IsPressed, Mode=TwoWay}" />
</Grid>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.