Introduction
Rendering and showing PDF
documents in Windows 10 Universal applications can be a tricky task and that’s
why we prepared a PDF Viewer sample based on the Apitron PDF Rasterizer .NET
component that works on many platforms including Windows 10 desktop and mobile.
The code
XAML:
<UserControl
x:Class="UniversalAppSamplePDFViewerControlForWindows10.Controls.PDFViewerControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="using:UniversalAppSamplePDFViewerControlForWindows10.Controls.Converters"
mc:Ignorable="d" d:DesignHeight="300"
d:DesignWidth="400" Name="pdfViewerControl">
<UserControl.Resources>
<ResourceDictionary>
<converters:DoubleToPercentageConverter x:Name="DoubleToPercentageConverter"/>
<converters:PageIndexToPageNumberConverter x:Name="PageIndexToPageNumberConverter"/>
<Style TargetType="Button">
…custom style definition for viewer buttons
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0"
HorizontalAlignment="Center">
…toolbar buttons and labels are
defined here
</StackPanel>
<ScrollViewer Grid.Row="1"
Background="{Binding ElementName=pdfViewerControl, Path=Background}"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
Name="scrollViewer">
<Image x:Name="myImage" Stretch="None"/>
</ScrollViewer>
</Grid>
</UserControl>
You can see that the control is
pretty simple and its main parts are toolbar, and a scrollview with an image
inside it representing a rendered page. The control binds to a viewmodel
represented by the PDFViewerControlViewModel class.
The model gets set in the constructor of the control like this:
public PDFViewerControl()
{
this.InitializeComponent();
viewModel = new PDFViewerControlViewModel();
viewModel.Navigated += NavigationHandler;
this.DataContext = viewModel;
}
And the main page of the app looks as follows:
<Page
x:Class="UniversalAppSamplePDFViewerControlForWindows10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UniversalAppSamplePDFViewerControlForWindows10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:UniversalAppSamplePDFViewerControlForWindows10.Controls"
mc:Ignorable="d">
<controls:PDFViewerControl
Background="Black"/>
</Page>
The
view model internally uses Document
object to open PDF documents and its very useful property Navigator to subscribe to navigation events and avoid
implementing its own navigation logic. The navigator object keeps track of the
currently “selected” page and current page index as well. It can also be used
to move forward or backward, and all you need to do is to handle Navigated event. See the
code excerpts below.
Opening
the file:
currentDocument = new Document(documentStream);
// subscribe to navigation
events and go to first page
currentDocument.Navigator.Navigated
+= Navigator_Navigated;
currentDocument.Navigator.Move(0,
Origin.Begin);
Navigation can be implemented as follows:
currentDocument.Navigator.MoveBackward();
or
currentDocument.Navigator.MoveForward();
where
currentDocument object
is a currently opened pdf document.
Rendering
looks very simple:
private void RenderPage(Apitron.PDF.Rasterizer.Page page)
{
if (page != null)
{
ErrorLogger logger = new ErrorLogger();
WriteableBitmap bm = page.Render(new Resolution(96, 96),
new RenderingSettings(), logger);
myImage.Source = bm;
}
}
The
view model also provides many helper properties that control uses to update its
UI elements.
The complete code sample can be found in our github
repo.
Here is the screenshot
of the actual windows 10 running app (desktop):
 |
Pic. 1 PDF Viewer control sample for
Universal Windows Application
(Windows 10)
|
And photo of the application running on the windows phone 10:
 |
Pic. 2 Apitron PDF Rasterizer based PDF
Viewer control running on Lumia 550
(Windows 10)
|
Summary
One of the possible applications
of the Apitron PDF
Rasterizer for .NET component is implementing PDF viewers for supported
platforms. In this article we’ve demonstrated how to create a PDF viewer
control for Windows 10 Universal application. The code runs smoothly on your desktop
and mobile devices and can be used as a base for further development.
Contact us if you have any
questions regarding this code sample or PDF processing in general, and we’ll be
happy assist you.
