How to display large amounts of Text in a Windows Store application?

Question

When displaying large amounts of text in a RichTextBlock or even in a TextBlock in WinRT, I've noticed that the WinRT XAML rendering engine reaches its limits. So consider the following simple example, where I've defined a RichTextBlock in XAML and where I'm filling it with a larger amount of text in code behind. (This would work similar for a simple TextBlock.)

This is the XAML part:

<ScrollViewer>
    <RichTextBlock Name="rtb" />
</ScrollViewer>

And some Code behind to fill it:

void MainPage_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    string text = Enumerable.Range(0, 200).Aggregate("", (current, i) => current + loremipsum);
    text = text.Replace("\r\n", "\n").Replace("\r", "\n");
    foreach (var line in text.Split('\n'))
    {
        var paragraph = new Paragraph();
        paragraph.Inlines.Add(new Run { Text = line });
        this.rtb.Blocks.Add(paragraph);
    }
}

private const string loremipsum = @"
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. ";

In the first moment this seems to work, but when you start zooming the app will freeze and crash, because the xaml renderer fails. This happens immediately for a much larger amount of text without any interaction.

So the question is: How to display large amounts of text in WinRT, where large means round about 100 KB of text or even more up to 5 MB?

Note: I've not tried the WebBrowser control yet, because it should be readonly and I want to avoid copy&paste. So the WebBrowser control is not a choice for me.

EDIT

I've found a temporary solution, where I'm adding the lines as items to an ItemsControl, where the items are virtualized.

<ItemsControl Name="ItemsControl">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <ScrollViewer>
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

With this solution the app doesn't crash anymore, but really lacks of performance.

Answer 1

Be ready for Win2D. The following works really smooth:

public class InifiniteTextBlock : Grid
{
    CanvasControl canvasControl;

    public InifiniteTextBlock()
    {
       Initialize();
    }

    private const string loremipsum = @"
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, velillum dolore eu feugiat nulla facilisis. ";

    private string largeloremipsum;

    private async void Initialize()
    {
        canvasControl = new CanvasControl() { ClearColor = Colors.Transparent, Width = 480, Height = 4000 };
        largeloremipsum = String.Concat(loremipsum, loremipsum, loremipsum, loremipsum, loremipsum);
        this.Children.Insert(0, canvasControl);
        while (!canvasControl.ReadyToDraw)
        {
            await Task.Delay(60);
        }

        canvasControl.Draw += (s, e) =>
        {
            var test = new CanvasTextFormat();
            e.DrawingSession.DrawText(largeloremipsum, new Rect(0,0,480,4000), Colors.Black, test);
        };
        canvasControl.Invalidate();
    }
}

Then in XAML do the following:

<ScrollViewer>
  <local:InifiniteTextBlock/>
</ScrollViewer>

And works like a charm!