All geek questions in one place

How to display large amounts of text in the Windows Store app?

When displaying large amounts of text in RichTextBlock or even in TextBlock in WinRT, I noticed that the WinRT XAML rendering engine reaches its limits. Therefore, consider the following simple example where I defined RichTextBlock in XAML and where I fill it with a lot of text in the code. (This will be similar to a simple TextBlock .)

This is part of XAML:

 <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. ";

At first, this seems to work, but when you start scaling, the application will freeze and crash, because xaml rendering is not working. This happens immediately for much more text without any interaction.

So, the question arises: how to display large amounts of text in WinRT, where large funds amount to about 100 KB of text or even more up to 5 MB?

Note. I have not tried the WebBrowser control yet, because it should be read-only, and I want to avoid copying and pasting. Therefore, the WebBrowser control is not a choice for me.

EDIT

I found a workaround where I add rows as items in the 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 application no longer crashes, but actually lacks performance.

+6
source share
1 answer

Get ready for Win2D. The following works are 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 it works like a charm!

+1
source

Source: https://habr.com/ru/post/976559/

More articles:


All Articles