pdf links

PDF Rendering
Convert PDF to Image (.NET)
Convert PDF to image on Android (Xamarin)
Convert PDF to image on iOS (Xamarin)
Convert PDF to image in Windows Store apps (.NET)
Convert PDF to image in Windows Phone apps (.NET)
PDF to image in Universal Windows Store apps (.NET)
Free PDF Viewer control for Windows Forms (.NET)
How to integrate PDF Viewer control in WPF app (.NET)
Creating WPF PDF Viewer supporting bookmarks (.NET)
Cross-platform PDF Viewer using GTK# (MONO)
Silverlight PDF viewer control (Silverlight 5)
Multithreaded PDF rendering (.NET)
Convert pdf to image in Silverlight app (C# sample)
How to set fallback fonts for PDF rendering (C#)
Avoiding the out-of-memory exception on rendering (C#)
PDF viewer single page application (WebAPI, AngularJS)
PDF viewer control for Windows 10 universal applications
Use custom ICC profile for CMYK to RGB conversion
PDF layers - separate images, text, annotations, graphics

PDF Forms Creation PDF Security
Conversion to PDF/A
Other topics
PDF Document Manipulation PDF Content Generation
Fixed and Flow layout document API (.NET)
Creation of grids and tables in PDF (C# sample)
How to create interactive documents using Actions (C# sample)
Text flow effects in PDF (C# sample)
How to generate ordered and bulleted lists in PDF (C# sample)
Convert HTML to PDF using flow layout API (C# sample)
How to use custom fonts for PDF generation (.NET)
Create document with differently sized pages (C#)
Create PDF documents using MONO (C#/MONO/Windows/OSX)
How to use background images for content elements (C#/PDF Kit/FlowLayout)
Add transparent images to PDF document (C#)
Draw round rect borders in PDF documents(C#)
ICC color profiles and and ICC based colors in PDF (C#)
How to use bidirectional and right to left text in PDF (C#)
Create PDF documents from XML templates (C# sample)
How to resize PDF pages and use custom stamps (C#)
Add header and footer to PDF page (.NET sample)
How to use clipping mask for drawing on PDF page
Fill graphics path with gradient brushes in PDF (Shadings)
Apitron PDF Kit and Rasterizer engine settings
Add layers to PDF page (optional content, C# sample)
How to create free text annotation with custom appearance
PDF Content Extraction PDF Navigation
PDF to TIFF conversion
Contact us if you have a PDF related question and we'll cover it in our blog.

2016-03-27

Windows 10 universal application pdf viewer control sample

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.

This viewer control is implemented as the UserControl and corresponding ViewModel that manages PDF document loading and provides properties consumed by the owner control via data binding. You can use this control as a base for you own viewer or host it as is if it satisfies your needs. Implementation details are discussed in the next sections.

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)

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)

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.

No comments:

Post a Comment