In RichTextBox area is a gray square

[Pawel]

I have very very plain test application with HtmlDataProvider and RadRichTextBox only. When I start the application RichTextBox area has small gray square in the corner (screen.png). I think this is a bug associated with HtmlDataProvider and html code which produce HtmlDataProvider.

MainWindow.xaml

<Window x:Class="TestTelerikWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:TestTelerikWpfApp"
        Title="MainWindow" Height="300">
    <Window.Resources>
    </Window.Resources>
    <Grid>
        <telerik:HtmlDataProvider RichTextBox="{Binding ElementName=richTextBox}"
                                  Html="{Binding Path=Notes, Mode=TwoWay}" />
        <telerik:RadRichTextBox Name="richTextBox" Width="800" Height="600" />

    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Data;
using Telerik.Windows.Controls;

namespace TestTelerikWpfApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new ViewModel();
        }
    }
}

ViewModel.cs

using System;
using Telerik.Windows.Controls;

namespace TestTelerikWpfApp
{
    public class ViewModel : ViewModelBase
    {
        private String notes;
        public String Notes
        {
            get
            {
                if (null == notes)
                {
                    Notes = String.Empty;
                }
                return this.notes;
            }
            set
            {
                if (value != this.notes)
                {
                    this.notes = value;
                    OnPropertyChanged(() => this.Notes);
                }
            }
        }
    }
}

[Petya]

Hi Pawel,

The behavior that you are experiencing a known visual glitch in RadRichTextBox, but is not actually related to the data provider that is bound to the control. The rectangle is in the template of the control to allow showing both vertical and horizontal scrollbar properly as shown in the attached image. 

In fact, this should be visible only when the control is initially loaded and as soon as you start typing, the rectangle should disappear. Could you confirm that?

If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox. Alternatively, you could force a measure of the control once it is loaded and everything should work fine.

I hope this helps.

Regards,
Petya
Telerik

 

 

[Pawel]

[quote]In fact, this should be visible only when the control is initially
loaded and as soon as you start typing, the rectangle should disappear.
Could you confirm that?[/quote]

I can partially confirm this. When I writing text in the first line, gray box is all time (screen1.png). When I enter "Enter key", gray box disappears (screen2.png) so I suppose I can add and remove new line before editing.

[quote]Alternatively, you could force a measure of the control once it is loaded and everything should work fine.[/quote]
What do you mean? I don't understand.

[Pawel]

[quote]If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox.[/quote]
I listened to your advice and I was able to remove the gray square using the RadRichTextBox template editing. Thanks.

[Igor]

Petya wrote:
If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox. Alternatively, you could force a measure of the control once it is loaded and everything should work fine.

Hello,

sorry for posting in this old thread, but I have the same problem with that control. But it's even worse.
My control ist very narrow (only one line is visible).

When this gray square is shown, the text of the RichTextBox is also moved up (shown with some margin). This leads to the effect, that my text is outside of the users view (see the attached picture. On the screenshot you can only see the red underline of the spell checker. The text itself is hidden, it's above).

I tried to invoke a measure of the control, like you said which really made the gray square disappear. The text however remains moved up.
As soon as I start typing (changing the preset text) the text comes down and I can see it (See second picture).

How can I workaround this strange behavior?

If I need to override the ControlTemplate, could you please provide it, so that I can directly copy the xaml?

Thank you very much.

[Petya]

Hi Igor,

I think the behavior you are experiencing is related to something else. As I mentioned before, the gray square is simply a visual glitch and it has no effect over the layout of documents shown in the control.

What I presume is forcing this look is the fact that the paragraph in the controls has some SpacingAfter applied. By default, the value of the property is 9pt which makes the last row of each paragraph a bit distant from the next paragraph.

Depending on the way you are adding the content in RadRichTextBox you can set the property to 0. For example, try changing the ParagraphDefaultSpacingAfter of the current document:

this.radRichTextBox.Document.ParagraphDefaultSpacingAfter = 0;

Note that once the document in the control is changed with a new one, the value will be reset to its default.

Regards,
Petya
Telerik

 

 

[Igor]

Thank you for your answer. The ParagraphSpacingAfter was not sufficient. I also had to set the LineSpacing to zero.
But then it worked fine.

Thank you very much.