A couple years ago I wrote this sample that shows how to use C1PdfViewer and C1Book together to display a PDF file like an interactive book. Now that we have C1Book and C1PdfViewer available in WinRT XAML, it’s time to update the sample.

C1Book is an ItemsControl used to display UI elements with page turning animation between items. On Windows 8, it's a great control with touch gestures. C1PdfViewer is also a UI control that can render arbitrary PDF files. The key thing here is that we can also use C1PdfViewer in code to read a PDF file and serve up the pages as FrameworkElements to any other UI control. You can call the GetPages method to get a collection of all pages, or the GetPage method to get one page at a time.

First, let’s create our UI using the C1Book control. It’s important to define an ItemTemplate for C1Book. You can also use RightPageTemplate/LeftPageTemplate if you want to provide gutters or page numbers on top of the page elements.


<Extended:C1Book x:Name="c1Book1" BorderThickness="2" BorderBrush="Gray">
<Extended:C1Book.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}">
<ContentPresenter.RenderTransform>
<ScaleTransform ScaleX="0.7" ScaleY="0.7" CenterX="0.5" CenterY="0.5"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</DataTemplate>
</Extended:C1Book.ItemTemplate>
</Extended:C1Book>


This ItemTemplate provides some scaling to the PDF pages. When C1PdfViewer gets pages they are returned at actual size and the ScaleTransform below scales it down to 70% of the actual size. If you need more fluctuating page scaling, this is where you would provide it.

Next, let’s add a button to load a PDF into C1Book. Then wire up its Click event. The code snippet below opens a file into a C1PdfViewer created in memory. Then it gets the pages and sets to the ItemsSource on the C1Book. That’s all it takes.


private async void Button_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.FileTypeFilter.Add(".pdf");

StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{
Stream stream = await file.OpenStreamForReadAsync();

// create PdfViewer in code
C1PdfViewer pdfViewer = new C1PdfViewer();
await pdfViewer.LoadDocumentAsync(stream);

// set pages to c1Book
c1Book1.ItemsSource = pdfViewer.GetPages();
}
}


If you need more control over getting pages from C1PdfViewer, you can also use the GetPage method to get pages one by one. This is sometimes better for performance when working with large documents.

Conclusion


This sample is a proof of concept that you can very easily render PDF files as a page-turning book using ComponentOne Studio for WinRT XAML. You can download a trial of the studio and check out the samples included to learn how to do more with these controls.

Book_PDF