Automatic vertical scroll bar in WPF TextBlock?

Question

I have a TextBlock in WPF. I write many lines to it, far exceeding its vertical height. I expected a vertical scroll bar to appear automatically when that happens, but it didn't. I tried to look for a scroll bar property in the Properties pane, but could not find one.

How can I make vertical scroll bar created automatically for my TextBlock once its contents exceed its height?

Clarification: I would rather do it from the designer and not by directly writing to the XAML.

Drew Noakes · Accepted Answer · 2012-03-07T12:43:19.570

633

Wrap it in a scroll viewer:

<ScrollViewer>
    <TextBlock />
</ScrollViewer>

NOTE this answer applies to a TextBlock (a read-only text element) as asked for in the original question.

If you want to show scroll bars in a TextBox (an editable text element) then use the ScrollViewer attached properties:

<TextBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ScrollViewer.VerticalScrollBarVisibility="Auto" />

Valid values for these two properties are Disabled, Auto, Hidden and Visible.

edited Mar 07 '12 at 12:43

answered Jul 28 '09 at 07:16

Drew Noakes

300,895
165
679
742

2

How do I do it from the designer? – Bab Yogoo Jul 28 '09 at 07:19
19

Sorry I am not sure, I don't use the WPF designer. I think if you add the XAML directly, the designer will update itself. – Drew Noakes Jul 28 '09 at 08:04
5

@conqenator TextBox.ScrollToEnd(); – Petey B Feb 04 '11 at 18:51
2

@Greg, the question is about `TextBlock` not `TextBox`. – Drew Noakes Mar 25 '11 at 12:46
@PeteyB: I know this is way too late. But thanks. :) I was searching for this and the found the answer in the comments. Again! – Robin Maben Jun 25 '12 at 13:37
Fantastic answer - I love having the two options. I had to consider both as they are equally applicable but slightly different. Thanks! – Shawn J. Molloy Nov 24 '13 at 23:50
@Stefan, yes the answer explains for the `TextBox` and `TextBlock`. – Drew Noakes Aug 08 '14 at 21:58
Thanks for that. It wasn't obvious, but `TextBox` has a `VerticalScrollBarVisibility` now. Worked perfectly. – UndeadBob Feb 08 '16 at 21:30
And if you want your `TextBox` to act more like a `TextBlock` then add the `IsReadOnly="True"` attribute. – Jesse Chisholm Jan 19 '17 at 19:09
7

Sometimes a MaxHeight on the Scrollviewer is needed to force the scoll to appear if the enclosing element doesn't enforce any height. – HackerBaloo Feb 07 '17 at 16:48
I had to put `VerticalScrollBarVisibility="Auto"` on the `ScrollViewer` itself. Putting it on the `TextBlock` as in the `TextBox` part of the answer wouldn't work (scroll bar was always displayed). – z33k Sep 08 '21 at 11:41

score 114 · Answer 2 · edited Jun 13 '12 at 20:03

114

can use the following now:

<TextBox Name="myTextBox" 
         ScrollViewer.HorizontalScrollBarVisibility="Auto"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         ScrollViewer.CanContentScroll="True">SOME TEXT
</TextBox>

edited Jun 13 '12 at 20:03

akjoshi

15,374
13
103
121

answered Dec 30 '09 at 21:02

vince

1,149
1
7
2

22

@jjnguy, I interpreted the original question as being about `TextBlock` not `TextBox` (as in the title and opening line), but the second paragraph mentioned `TextBox`. To be clear, this answer is definitely the best approach for text _boxes_, and mine is the best I know of for text _blocks_ :) – Drew Noakes Mar 25 '11 at 12:47
2

Worked better for me too. For a TextBox at least, when using the ScrollViewer around it, like in the accepted answer, the TextBox' borders disappear, because the whole control is scrolled, and not only its contents. – Fueled Jan 19 '12 at 16:43

score 25 · Answer 3 · edited Jul 04 '13 at 18:06

Something better would be:

<Grid Width="Your-specified-value" >
    <ScrollViewer>
         <TextBlock Width="Auto" TextWrapping="Wrap" />
    </ScrollViewer>
</Grid>

This makes sure that the text in your textblock does not overflow and overlap the elements below the textblock as may be the case if you do not use the grid. That happened to me when I tried other solutions even though the textblock was already in a grid with other elements. Keep in mind that the width of the textblock should be Auto and you should specify the desired with in the Grid element. I did this in my code and it works beautifully. HTH.

score 13 · Answer 4 · edited Apr 04 '17 at 20:09

<ScrollViewer MaxHeight="50"  
              Width="Auto" 
              HorizontalScrollBarVisibility="Disabled"
              VerticalScrollBarVisibility="Auto">
     <TextBlock Text="{Binding Path=}" 
                Style="{StaticResource TextStyle_Data}" 
                TextWrapping="Wrap" />
</ScrollViewer>

I am doing this in another way by putting MaxHeight in ScrollViewer.

Just Adjust the MaxHeight to show more or fewer lines of text. Easy.

score 9 · Answer 5 · edited Feb 08 '17 at 19:35

9

<ScrollViewer Height="239" VerticalScrollBarVisibility="Auto">
    <TextBox AcceptsReturn="True" TextWrapping="Wrap" LineHeight="10" />
</ScrollViewer>

This is way to use the scrolling TextBox in XAML and use it as a text area.

edited Feb 08 '17 at 19:35

Drew Noakes

300,895
165
679
742

answered Mar 29 '13 at 08:28

John

539
1
4
15

1

The question is related to `TextBlock` not `TextBox`. – Afzaal Ahmad Zeeshan Jun 21 '14 at 10:11
1

Not quite correct answer, but I found VerticalScrollBarVisibility to be a useful hint so +1 – Malachi Sep 17 '14 at 23:23

score 4 · Answer 6 · edited Jun 11 '21 at 03:00

Dont know if someone else has this problem but wrapping my TextBlock into a ScrollViewer somewhow messed up my UI - as a simple workaround I figured out that replacing the TextBlock by a TextBox like this one

<TextBox  SelectionBrush="Transparent" 
          Cursor="Arrow" 
          IsReadOnly="True" 
          Text="{Binding Text}" 
          VerticalScrollBarVisibility="Auto">

creates a TextBox that looks and behaves like a TextBlock with a scrollbar (and you can do it all in the designer).

score 3 · Answer 7 · edited Feb 03 '14 at 09:19

3

You can use

ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible"

These are attached property of wpf. For more information

http://wpfbugs.blogspot.in/2014/02/wpf-layout-controls-scrollviewer.html

edited Feb 03 '14 at 09:19

Rob

4,927
12
49
54

answered Feb 03 '14 at 09:03

ravi saini

179
1
3

Contango · Answer 8 · 2016-05-25T10:09:03.737

This answer describes a solution using MVVM.

This solution is great if you want to add a logging box to a window, that automatically scrolls to the bottom each time a new logging message is added.

Once these attached properties are added, they can be reused anywhere, so it makes for very modular and reusable software.

Add this XAML:

<TextBox IsReadOnly="True"   
         Foreground="Gainsboro"                           
         FontSize="13" 
         ScrollViewer.HorizontalScrollBarVisibility="Auto"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         ScrollViewer.CanContentScroll="True"
         attachedBehaviors:TextBoxApppendBehaviors.AppendText="{Binding LogBoxViewModel.AttachedPropertyAppend}"                                       
         attachedBehaviors:TextBoxClearBehavior.TextBoxClear="{Binding LogBoxViewModel.AttachedPropertyClear}"                                    
         TextWrapping="Wrap">

Add this attached property:

public static class TextBoxApppendBehaviors
{
    #region AppendText Attached Property
    public static readonly DependencyProperty AppendTextProperty =
        DependencyProperty.RegisterAttached(
            "AppendText",
            typeof (string),
            typeof (TextBoxApppendBehaviors),
            new UIPropertyMetadata(null, OnAppendTextChanged));

    public static string GetAppendText(TextBox textBox)
    {
        return (string)textBox.GetValue(AppendTextProperty);
    }

    public static void SetAppendText(
        TextBox textBox,
        string value)
    {
        textBox.SetValue(AppendTextProperty, value);
    }

    private static void OnAppendTextChanged(
        DependencyObject d,
        DependencyPropertyChangedEventArgs args)
    {
        if (args.NewValue == null)
        {
            return;
        }

        string toAppend = args.NewValue.ToString();

        if (toAppend == "")
        {
            return;
        }

        TextBox textBox = d as TextBox;
        textBox?.AppendText(toAppend);
        textBox?.ScrollToEnd();
    }
    #endregion
}

And this attached property (to clear the box):

public static class TextBoxClearBehavior
{
    public static readonly DependencyProperty TextBoxClearProperty =
        DependencyProperty.RegisterAttached(
            "TextBoxClear",
            typeof(bool),
            typeof(TextBoxClearBehavior),
            new UIPropertyMetadata(false, OnTextBoxClearPropertyChanged));

    public static bool GetTextBoxClear(DependencyObject obj)
    {
        return (bool)obj.GetValue(TextBoxClearProperty);
    }

    public static void SetTextBoxClear(DependencyObject obj, bool value)
    {
        obj.SetValue(TextBoxClearProperty, value);
    }

    private static void OnTextBoxClearPropertyChanged(
        DependencyObject d,
        DependencyPropertyChangedEventArgs args)
    {
        if ((bool)args.NewValue == false)
        {
            return;
        }

        var textBox = (TextBox)d;
        textBox?.Clear();
    }
}

Then, if you're using a dependency injection framework such as MEF, you can place all of the logging-specific code into it's own ViewModel:

public interface ILogBoxViewModel
{
    void CmdAppend(string toAppend);
    void CmdClear();

    bool AttachedPropertyClear { get; set; }

    string AttachedPropertyAppend { get; set; }
}

[Export(typeof(ILogBoxViewModel))]
public class LogBoxViewModel : ILogBoxViewModel, INotifyPropertyChanged
{
    private readonly ILog _log = LogManager.GetLogger<LogBoxViewModel>();

    private bool _attachedPropertyClear;
    private string _attachedPropertyAppend;

    public void CmdAppend(string toAppend)
    {
        string toLog = $"{DateTime.Now:HH:mm:ss} - {toAppend}\n";

        // Attached properties only fire on a change. This means it will still work if we publish the same message twice.
        AttachedPropertyAppend = "";
        AttachedPropertyAppend = toLog;

        _log.Info($"Appended to log box: {toAppend}.");
    }

    public void CmdClear()
    {
        AttachedPropertyClear = false;
        AttachedPropertyClear = true;

        _log.Info($"Cleared the GUI log box.");
    }

    public bool AttachedPropertyClear
    {
        get { return _attachedPropertyClear; }
        set { _attachedPropertyClear = value; OnPropertyChanged(); }
    }

    public string AttachedPropertyAppend
    {
        get { return _attachedPropertyAppend; }
        set { _attachedPropertyAppend = value; OnPropertyChanged(); }
    }

    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    #endregion
}

Here's how it works:

The ViewModel toggles the Attached Properties to control the TextBox.
As it's using "Append", it's lightning fast.
Any other ViewModel can generate logging messages by calling methods on the logging ViewModel.
As we use the ScrollViewer built into the TextBox, we can make it automatically scroll to the bottom of the textbox each time a new message is added.

Scott Bordelon · Answer 9 · 2018-10-30T15:06:41.733

I tried to to get these suggestions to work for a textblock, but couldn't get it to work. I even tried to get it to work from the designer. (Look in Layout and expand the list by clicking the down-arrow "V" at the bottom) I tried setting the scrollviewer to Visible and then Auto, but it still wouldn't work.

I eventually gave up and changed the TextBlock to a TextBox with the Readonly attribute set, and it worked like a charm.

score 1 · Answer 10 · answered Oct 25 '18 at 19:27

1

This is a simple solution to that question. The vertical scroll will be activated only when the text overflows.

<TextBox Text="Try typing some text here " ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="WrapWithOverflow" />

answered Oct 25 '18 at 19:27

Zuhair

837
1
8
12

Automatic vertical scroll bar in WPF TextBlock?

10 Answers10

Linked