#926 – Text Containing Embedded Carriage Returns Wraps Automatically

Even if a TextBox has its TextWrapping property set to NoWrap, text added to the TextBox will automatically wrap if that text includes embedded carriage returns.

In the example below, we define a multi-line string (using verbatim string notation) and then bind the Text property of a TextBox to the string.  The text then automatically wraps within the TextBox.

        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;

            // Defining multi-line verbatim string
            CosbyQuote = @"A word to the wise
ain't necessary -
it's the stupid ones
that need the advice.";
        }

        private string cosbyQuote;
        public string CosbyQuote
        {
            get { return cosbyQuote; }
            set
            {
                if (value != cosbyQuote)
                {
                    cosbyQuote = value;
                    RaisePropertyChanged("CosbyQuote");
                }
            }
        }
    <TextBox Text="{Binding CosbyQuote}"
        TextWrapping="NoWrap"
        Height="60" Margin="5"/>

926-001

Advertisement

#925 – Scrolling Through TextBox Text That Doesn’t Wrap

Even when text in a TextBox does not wrap to fill multiple lines, the text is still contained in the TextBox and you can scroll through it or select it.

    <TextBox Text="{Binding CosbyQuote}"
        TextWrapping="NoWrap"
        Height="60" Margin="5"/>

925-001
925-002
925-003

#924 – TextBox Wrap vs. WrapWithOverflow

When you specify that you want to wrap text within a TextBox, you can set the TextWrapping property to one of:

  • NoWrap
  • Wrap
  • WrapWithOverflow

The WrapWithOverflow indicates that words will be wrapped, wrapping at the nearest space.  But if there is some text that won’t fit into the available space after wrapping at word boundaries, the TextBox will just let the text extend beyond the boundaries of the TextBox.  By contrast, when you specify TextWrapping=Wrap, if the text won’t fit after wrapping at a word boundary, it just wraps in the middle of the word.

Here’s an example of long word wrapping with TextWrapping=Wrap:

924-001

 

Here’s the same text with TextWrapping=WrapWithOverflow.  The long word extends beyond the right side of the TextBox.

924-002

 

#923 – Text Wrapping in a TextBox

By default, the text displayed in a TextBox does not wrap to multiple lines–even if the TextBox is tall enough to accommodate several lines.

<TextBox Text="{Binding NerdQuote}"
                Height="60"/>

923-001
By default, the value of the TextWrapping property of the TextBox is NoWrap. You can set it to Wrap to cause the text to automatically wrap to multiple lines.

<TextBox Text="{Binding NerdQuote}"
                TextWrapping="Wrap"
                Height="60"/>

923-002
When the TextBox wraps text, it tries to wrap at word boundaries, i.e. after seeing a space or hyphen (-).
923-003
If the TextBox is unable to wrap the text, however, it will just wrap at the nearest character.
923-004
Notice also that, if text wrapping is enabled, the wrapping will change dynamically as you resize the TextBox.923-005923-006

#339 – Wrapping a Button’s Text Content to Multiple Lines

When a Button control automatically sizes to fit its content, it will grow to fit the text in the Content property.  However, the text will always remain on a single line.

        <Button Content="Click me if you want to see something cool.  In fact, click as many times as you like."
                HorizontalAlignment="Center" VerticalAlignment="Center"


If you constrain the button’s Width, however, the text will be clipped.

To get the text on a face of a Button to wrap, you can use a TextBlock as the button’s Content, rather than a simple text string.  You also set the TextWrapping property on the TextBlock.

        <Button HorizontalAlignment="Center" VerticalAlignment="Center"
                Margin="10" Width="120">
            <TextBlock Text="Click me if you want to see something cool.  In fact, click as many times as you like."
                       TextWrapping="Wrap"/>
        </Button>