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 PDFViewerControlViewModelclass. The model gets set in the constructor of the control like this:
public PDFViewerControl()
{
this.InitializeComponent();
viewModel = newPDFViewerControlViewModel();
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:PDFViewerControlBackground="Black"/>
</Page>
The view model internally uses Documentobject to open PDF documents and its very useful property Navigatorto 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 = newDocument(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:
privatevoid RenderPage(Apitron.PDF.Rasterizer.Page page)
{
if (page != null)
{
ErrorLogger logger = newErrorLogger();
WriteableBitmap bm = page.Render(newResolution(96, 96),
newRenderingSettings(), 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 githubrepo.
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.