ViewBox makes RichTextBox lose its caret

Question

RichTextBox is placed inside a ViewBox and zoomed to various levels 10 - 1000%. At percentages less than 100%, caret disappears at random cursor locations.

I unders

Answer 1

FINAL EDIT:

hey there, just wanted to say, you can even get this working without reflection at all!! This is not optimized code, I'll leave that for yourself. Also this is still relying on internal stuff. So here it comes:

Codebehind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        rtb.LayoutUpdated += (sender, args) =>
        {
            var child = VisualTreeHelper.GetChild(vb, 0) as ContainerVisual;
            var scale = child.Transform as ScaleTransform;
            rtb.ScaleX = scale.ScaleX;
        };
    }
}

public class RTBwithVisibleCaret:RichTextBox
{
    private UIElement _flowDocumentView;
    private AdornerLayer _adornerLayer;
    private UIElement _caretSubElement;
    private ScaleTransform _scaleTransform;

    public RTBwithVisibleCaret()
    {            
        LayoutUpdated += (sender, args) =>
            {
                if (!IsKeyboardFocused) return;
                if(_adornerLayer == null)
                    _adornerLayer = AdornerLayer.GetAdornerLayer(_flowDocumentView);
                if (_adornerLayer == null || _flowDocumentView == null) return;
                if(_scaleTransform != null && _caretSubElement!= null)
                {
                    _scaleTransform.ScaleX = 1/ScaleX;
                    _adornerLayer.Update(_flowDocumentView);
                }
                else
                {
                    var adorners = _adornerLayer.GetAdorners(_flowDocumentView);
                    if(adorners == null || adorners.Length<1) return;
                    var caret = adorners[0];
                    _caretSubElement = (UIElement) VisualTreeHelper.GetChild(caret, 0);
                    if(!(_caretSubElement.RenderTransform is ScaleTransform))
                    {
                        _scaleTransform = new ScaleTransform(1 / ScaleX, 1);
                        _caretSubElement.RenderTransform = _scaleTransform;
                    }
                }
            };
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var cthost = GetTemplateChild("PART_ContentHost") as FrameworkElement;
        _flowDocumentView = cthost is ScrollViewer ? (UIElement)((ScrollViewer)cthost).Content : ((Decorator)cthost).Child;            
    }

    public double ScaleX
    {
        get { return (double)GetValue(ScaleXProperty); }
        set { SetValue(ScaleXProperty, value); }
    }
    public static readonly DependencyProperty ScaleXProperty =
        DependencyProperty.Register("ScaleX", typeof(double), typeof(RTBwithVisibleCaret), new UIPropertyMetadata(1.0));
}

working with this XAML:

<Window x:Class="RTBinViewBoxTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:RTBinViewBoxTest="clr-namespace:RTBinViewBoxTest" Title="MainWindow" Height="350" Width="525">
    <Viewbox Height="100" x:Name="vb">
        <RTBinViewBoxTest:RTBwithVisibleCaret Width="70" x:Name="rtb">
            <FlowDocument>
                <Paragraph>
                    <Run>long long long long long long long long long long long long long long long long long long long long long long long long text</Run>
                </Paragraph>
            </FlowDocument>
        </RTBinViewBoxTest:RTBwithVisibleCaret>
    </Viewbox>
</Window>

yeah, it got me thinking when I saw, that all these are accessible through the visual tree! Instead of inheriting from RichTextBox (which was needed to get the TemplateChild) you can also traverse the VisualTree to get to that FlowDocumentView!

original post:

ok, let's look at what your options are:

as stated in my comment above: the easiest way to accomplish this whould be to have RichTextBox's content zoom instead of the RichTextBox being inside a ViewBox. You haven't answered (yet) if this would be an option.

now everything else will get complex and is more or less problematic:

you can use Moq or something similar (think Moles or so...) to replace the getter of SystemParameters.CaretWidth to accommodate for the ScaleTransform the ViewBox exerts. This has several problems! First: these Libraries are designed for use in testing scenarios and not recommended for production use. Second: you would have to set the value before the RichTextBox instantiates the Caret. That'd be tough though, as you don't know beforehand how the ViewBox scales the RichTextBox. So, this is not a good option!

the second (bad) option would be to use Reflection to get to this nice little Class System.Windows.Documents.CaretElement. You can get there through RichTextBox.TextEditor.Selection.CaretElement (you have to use Reflection as these Properties and Classes are for the most part internal sealed). As this is an Adorner you might be able to attach a ScaleTransform there that reverses the Scaling. I have to say though: this is neither tested nor recommended!

Your options are limited here and if I were you I'd go for my first guess!

EDIT:

If you really want to get down that second (bad) route you might have more luck if you apply that ScaleTransform to that adorners single child that you can get through the private field _caretElement of type CaretSubElement. If I read that code right, then that subelement is your actual Caret Visual. The main element seems to be used for drawing selection geometry. If you really want to do this, then apply that ScaleTransform there.

EDIT:

complete example to follow:

XAML:

<Window x:Class="RTBinViewBoxTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Viewbox Height="100" x:Name="vb">
        <RichTextBox Width="70" Name="rtb">
            <FlowDocument>
                <Paragraph>
                    <Run>long long long long long long long long long long long long long long long long long long long long long long long long text</Run>
                </Paragraph>
            </FlowDocument>
        </RichTextBox>
    </Viewbox>
</Window>

Codebehind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        rtb.GotFocus +=RtbOnGotFocus;
    }

    private void RtbOnGotFocus(object s, RoutedEventArgs routedEventArgs)
    {
        rtb.LayoutUpdated += (sender, args) =>
            {
                var child = VisualTreeHelper.GetChild(vb, 0) as ContainerVisual;
                var scale = child.Transform as ScaleTransform;
                rtb.Selection.GetType().GetMethod("System.Windows.Documents.ITextSelection.UpdateCaretAndHighlight", BindingFlags.NonPublic | BindingFlags.Instance).Invoke(
                    rtb.Selection, null); 

                var caretElement=rtb.Selection.GetType().GetProperty("CaretElement", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(rtb.Selection, null);
                if (caretElement == null)
                    return;
                var caretSubElement = caretElement.GetType().GetField("_caretElement", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(caretElement) as UIElement;
                if (caretSubElement == null) return;
                var scaleTransform = new ScaleTransform(1/scale.ScaleX, 1);
                caretSubElement.RenderTransform = scaleTransform;
            };
    }
}

this works for me. everything said.

Answer 2

AFAIK you can't really solve this. ViewBox is using ScaleTransform under the covers, and ScaleTransform, when scaling down, will hide certain lines, since it cannot display everything. the ScaleTransform is not using a very advanced algorithm to do the scale,(it just does it in the fastest way possible) and I don't think you can change that..