Using RadPDFViewer as a background in a container

[Andrew]

I'm working on an application that requires us to overlay UI elements on a PDF background. We're trying to use RadPDFViewer as that background, but are having a tough time getting rid of the built in scrollbars.

Our ideal situation would be for both the RadPDFViewer and an overlay canvas to be children of a scrolling container, which can be zoomed in and out as well.

Are there any tricks to this or is this not something that can be done?

[Kammen]

Hello Andrew,

If you put RadPdfViewer in a container that has infinite width and height (like StackPanel, Canvas, ScrollViewer) it will use all the space it has to show its content. However, some of the functionality will not work as expected (like go to page, page up, page down, etc.).

When it comes to hiding the toolbars, this can be achieved by overriding the template of the control.

Greetings,
Kammen
the Telerik team

[Joe]

Kammen,

If I take the examples XAML code for PdfViewer and wrap it in a canvas, it does not get sized correctly.. and even if I specify the canvas height/width, the PdfViewer does not fill the control unless I specify its height/width too... but of course, when I do that, the scroll bars are the PdfViewer's scrollbars, not the Canvas controls.

To be specific, if I modify Example.xaml in the PdfViewer project and wrap the last line like so, I get a small box and not a control that fills the grid row.

<Canvas Grid.row="1">
<telerik:RadPdfViewer x:Name="pdfViewer" DocumentSource="/PdfViewer:component/SampleDate/Sample.pdf" />
</Canvas>

[Kammen]

Hello Joe,
I am not really sure what you are trying to do. If you want to add some content to the pdf pages, the best way to do so is by using custom layers, and here you can find an example on how to build your own. Otherwise, if you want to add PDF viewer into container with scrollbars then you can use ScrollViewer as container. However, more of the features of RadPdfViewer will not work as expected.


Regards,
Kammen
the Telerik team

[Joe]

Kammen,

Thank you for providing that example... that really opens up the possibilities for what I want to do. I'll cut to the chase; I'm trying to allow the user to 'draw' boxes on the PDF for highlighting areas.... the example you sent allow this in a roundabout way allowing the user to select text - I want to allow the user to select a region anywhere on the PDF (not just text) and be able to access the coordinate data for the selected box/region programmatically.

So it seems the example you provided shows most of the functionality I'm looking for except it has the limitation of only allow 'highlights' when selecting text. My initial thoughts on this would be to have a canvas control containing the PDFViewer control to allow drawing of regions with the mouse on that canvas but hopefully I don't need to go that route and can instead use a custom layer. Do you know if this is possible with a custom layer without using the canvas control to simulate because I'd love to do it right on the PDFViewer itself?

[Kammen]

Hi Joe,
In fact, the UI Layer is canvas, and its purpose is to add custom content inside PDF, so I think this approach will fit your needs.
If you have further difficulties do not hesitate to contact us.


Kind regards,
Kammen
the Telerik team

[Joe]

Kammen,

I'm having difficulties merging our existing code that responds to events to the original plan (canvas with PDFViewer inside) with the canvas available using a custom UI layer. To be specific, it doesn't appear that we can capture MouseDown events in the canvas inside our custom UI layer (for drawing rectangles). Is there something more we need to do? I noticed that the PDFViewer has all the MouseDown events available but when employing that tactic, it doesn't appear that we can access our custom layer from that event.

[Kammen]

Hello Joe,

There are two things to do with the HighlightUILayer class from the demo in order to handle the mouse events. 

1. In the constructor add Background = Transparent for the container.

this.container.Background = Brushes.Transparent;

2. In the Initialize method, set the container's width = page.ActualWidth and height = page.ActualHeight

this.UIElement.Width = this.page.ActualWidth;
this.UIElement.Height = this.page.ActualHeight;

This should allow you to handle the Mouse events.:

this.container.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(container_MouseLeftButtonDown);

Note that you should handle (set e.Handled = true) the mouse events if and only if you will process them. Otherwise, RadPdfViewer may not work as expected.

Regards,
Kammen
the Telerik team

[Joe]

Ahhh I think it was the background set to transparency that fixed it! Thank you very much for the assistance... this is working great!  Now if I could access the custom layer from a button click on the main form, it'd be perfect.

[Kammen]

Hi Joe,

The things with custom layers do not work this way. The layer is only used to visualize something that is linked with RadFixedPage. In order to add something to your layer, you will need to add it to the RadFixedPage / Your_layer_data mapping (the Highlights collection in the demo). Then, when Update method is called, the layer should visualize the data that is linked to the current page (the one given in the UILayerInitializeContext instance). 

Unfortunately, there is no public method that will allow you to force an update. We have considered this as a feature request and have decided to expose such a method for the next LIB (Latest Internal Build). It will be called UpdatePresenterLayout().

Hope this answers your question.


All the best,
Kammen
the Telerik team

[Joe]

It does. Thank you. I've got it working albeit in a roundabout way. Good to know about the force update feature... that will be helpful for us too for our implementation.