Rendering Thumbnail of the first page of a RadDocument

[Oliver Weichhold]

With the WPF FlowDocument it is possible to render a preview thumbnail of a document with the code below. Is there an equivalent for the RadDocument?

FlowDocument flowDocument = _editorControl.Document;
var documentPaginatorSource = flowDocument as IDocumentPaginatorSource;
var page = documentPaginatorSource.DocumentPaginator.GetPage(0);

var renderTargetBitmap = new RenderTargetBitmap((int) PreviewWidth, (int) PreviewHeight, 96.0, 96.0, PixelFormats.Pbgra32);
var dv = new DrawingVisual();
RenderOptions.SetBitmapScalingMode(page.Visual, BitmapScalingMode.Fant);

using (var ctx = dv.RenderOpen())
{
var vb = new VisualBrush(page.Visual)
{
Stretch = Stretch.UniformToFill,
AlignmentX = AlignmentX.Left,
AlignmentY = AlignmentY.Top
};

ctx.DrawRectangle(Brushes.White, null, new Rect(new Point(), new Size(PreviewWidth, PreviewHeight)));
ctx.DrawRectangle(vb, null, new Rect(new Point(), new Size(PreviewWidth, PreviewHeight)));
}

renderTargetBitmap.Render(dv);
Document.PreviewPicture = renderTargetBitmap;

[Iva Toteva]

Hi Oliver Weichhold,

You can use a RadRichTextPageView and assign its document to a copy of the document of the rich text box.
Here is a sample code to get you started:

DocumentViewManager viewManager = new DocumentViewManager();
XamlFormatProvider xamlProvider = new XamlFormatProvider();
viewManager.Document = xamlProvider.Import(xamlProvider.Export(this.editor.Document));
viewManager.Document.LayoutMode = DocumentLayoutMode.Paged;
RadRichTextPageView view = new RadRichTextPageView();
ScaleTransform transform = new ScaleTransform();
transform.ScaleX = 0.4;
transform.ScaleY = 0.4;
view.RenderTransform = transform;

view.ViewManager = viewManager;
view.PageIndex = 0;   myContentControl.Children.Add(view);

Regards,
Iva
the Telerik team

[Nehme Moussa]

Ok but how do I extract a bitmap from the view? I'm not sure if we are talking about the same thing.

[Ivailo Karamanolev]

Hi Nehme Moussa,

For some reason, when capturing the RadRichTextPageView as a bitmap using WriteableBitmap, Silverlight doesn't render it correctly. We are making an effort to make it work, but we don't currently have a solution to the problem.

All the best,
Ivailo
the Telerik team

[Oliver]

Any update on this issue? We are approaching our release.

[Iva Toteva]

Hi Oliver Weichhold,
The steps to create an image of the first page of a document are:

1. Create a RadRichPageView and a ViewManager for it. Set the ViewManager's document to a copy of the document (created through export and import). Set the ViewManager's PageIndex to the number of the page you wish to have captured;
2. Add the RadRichPageView to the visual tree. Update the Layout of the parent control. Create a WritableBitmap from the page view.
3. Remove the page view from the visual tree.

Here is the sample code:

public void CreateThumbnail()
{
    RadRichTextPageView view = new RadRichTextPageView();
    DocumentViewManager viewManager = new DocumentViewManager();
    XamlFormatProvider xamlProvider = new XamlFormatProvider();
    viewManager.Document = xamlProvider.Import(xamlProvider.Export(this.radRichTextBoxEditor1.Document));
    viewManager.Document.LayoutMode = DocumentLayoutMode.Paged;

    view.ViewManager = viewManager;
    view.PageIndex = 0;

    ScaleTransform transform = new ScaleTransform();
    transform.ScaleX = 0.4;
    transform.ScaleY = 0.4;

    view.RenderTransform = transform;

    view.SetValue(Grid.RowProperty, 3);
    this.LayoutRoot.Children.Add(view);
    this.LayoutRoot.UpdateLayout();

    WriteableBitmap bitmap = new WriteableBitmap(350, 350);
    bitmap.Render(view, new ScaleTransform() { CenterX = 0, CenterY = 0, ScaleX = 0.3, ScaleY = 0.3 });

    bitmap.Invalidate();

    this.image.Source = bitmap;

    this.LayoutRoot.Children.Remove(view);
}

You can adjust the numbers as you find fit.
I hope that helps.

Regards,
Iva
the Telerik team

[Oliver]

Thanks for your response Iva. Does the RadRichPageView need to be totallly visible for this to work or can be obscured by another control? I don't want the user to see the thumbnail generation preferably.

[Alex]

Hi Nehme Moussa,

There shouldn't be any problem if the RadRichPageView is hidden "behind" some other control. You can even put it in a special  container(for example Grid) that has its Opacity property set to 0. This way the thumb generation will be totally invisible for the user.

I hope this was helpful.

Regards,
Alex
the Telerik team

[Oliver]

While this works at least somehow there are still a couple major problems:

1. Try this with a document containing only a single line of text and you get blackness rendered to the WriteableBitmap for the rest of the document
2. Even setting viewManager.Document.PageViewMargin = new SizeF(0, 0); and viewManager.Document.SectionDefaultPageMargin = new Padding(0); does not yield a rendered image where the page content starts in the upper left corner. There still seems to be some kind of margin involved on the left side

[Oliver]

Ok maybe I've figured it out. In order to prevent the black parts in output image you need to set the control containing the RadRichPageView  during rendering to Width = (1/ScaleTransformX) * WriteableBitmapWidth and Height = (1/ScaleTransformY) * WriteableBitmapHeight. This also seems to fix the margin problems.