Viscomsoft UWP PDF Viewer SDK

C# Developer Getting Started



1. Launch Visual Studio 2015 or above version of Visual Studio. Select Visual C#, Select Windows - Universal - Blank App.

 


 

2. In the Solution Explorer, right-click References, and then click Add Reference.




3. Select Browse tab,  Navigate to the extracted  UWP PDF Viewer SDK for REDIST folder, open it, select x64 or x86 or ARM folder, depend on your project target platform and then selected PDFViewerWrapper.winmd and Viscomsoft.UWP.PDFViewerSDK.dll , click OK button.



4. Now you will see the PDFViewerWrapper and Viscomsoft.UWP.PDFViewer SDK files added to References. then create Themes folder in App1.



5. Add Generic.xaml to Themes folder, you can found Generic.xaml in C:\Program Files (x86)\UWP PDF Viewer SDK\Templates\Themes folder.



6. Open Generic.xaml, now your project named App1, you can found XML namespace mappings xmlns:local="using:App1" , if your project named is not App1, you need change App1 to your project name.



7. Added FlipViewControl.cs, PageControl.cs, PageGroupControl.cs, ScrollViewControl.cs to your project. you can found these files in C:\Program Files (x86)\UWP PDF Viewer SDK\Templates folder.



8. Open ScrollViewControl.cs, FlipViewControl.cs, PageControl.cs, PageGroupControl.cs, In these files, the default namespace is App1,now your project named App1, so you do not need changed it.  if your project named is not App1, you need change namespace App1 to your project name.


9. Open MainPage.xaml, In the XAML editor, add the code for simple layout and you need add Border control named uiViewPanel
 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <Grid.RowDefinitions>
   <RowDefinition Height="100" />
   <RowDefinition Height="*" />
   </Grid.RowDefinitions>

   <Border Grid.Row="1" x:Name="uiViewPanel" Background="#FFE6E6E6" Margin="-10,10,10,-10">
   </Border>
</Grid>

 




 

10. In the XAML editor, add the button named btnOpen and add Click event.
 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <Grid.RowDefinitions>
   <RowDefinition Height="100" />
   <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <Button x:Name="btnOpen" Content="Open" Click="btnOpen_Click"/>
   <Border Grid.Row="1" x:Name="uiViewPanel" Background="#FFE6E6E6" Margin="-10,10,10,-10">
   </Border>
</Grid>

11. Open MainPage.xaml.cs, add the using statement - using Viscomsoft.UWP.PDFViewerSDK; and using Windows.Storage.Pickers;

using Viscomsoft.UWP.PDFViewerSDK;
using Windows.Storage.Pickers;



12. In MainPage.xaml.cs, declare PDFDisplayManager object named _pdfDisplayManager and set to null.



13. In MainPage.xaml.cs , add the using statement - using Windows.Storage and add the code to open picker , let the user select the PDF or image file.

using Windows.Storage;

private async void btnOpen_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.List;
openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
openPicker.FileTypeFilter.Add(".pdf");
openPicker.FileTypeFilter.Add(".bmp");
openPicker.FileTypeFilter.Add(".png");
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".tif");
openPicker.FileTypeFilter.Add(".tiff");
StorageFile file = await openPicker.PickSingleFileAsync();
}
 

14. In MainPage.xaml.cs , add the code to open the PDF file. First create DocumentFactory object, then call CreateDocument method,
it will return IDocument object, call IDocument::OpenAsync, next create instance of PDFDisplayManager, set the IDocument object to Document property.
Finally create ScrollViewControl and set this control is child of uiViewPanel.
 

private async void btnOpen_Click(object sender, RoutedEventArgs e)
{
 FileOpenPicker openPicker = new FileOpenPicker();
 openPicker.ViewMode = PickerViewMode.List;
 openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
 openPicker.FileTypeFilter.Add(".pdf");
 openPicker.FileTypeFilter.Add(".bmp");
 openPicker.FileTypeFilter.Add(".png");
 openPicker.FileTypeFilter.Add(".jpg");
 openPicker.FileTypeFilter.Add(".tif");
 openPicker.FileTypeFilter.Add(".tiff");
 StorageFile file = await openPicker.PickSingleFileAsync();

 DocumentFactory factory = new DocumentFactory();
 IDocument doc = factory.CreateDocument(file.Name);
 bool opened = await doc.OpenAsync(file);

 _pdfDisplayManager = new PDFDisplayManager();
 _pdfDisplayManager.Width = (int)Window.Current.Bounds.Width;
 _pdfDisplayManager.Height = (int)Window.Current.Bounds.Height;
 _pdfDisplayManager.Document = doc;
 _pdfDisplayManager.GotoPage(1);
 uiViewPanel.Child = createScrollViewControl();
}
 

15. In MainPage.xaml.cs , add the code to create scroll view control.
 

private UIElement createScrollViewControl()
{
  ScrollViewControl svc = new ScrollViewControl();
  svc.DataContext = _pdfDisplayManager;
  svc.Name = "uiScrollView";
  svc.SetBinding(ScrollViewControl.ItemCountProperty, new Binding { Path = new PropertyPath  ("PageCount") });
  svc.SetBinding(ScrollViewControl.ItemIndexProperty, new Binding { Path = new PropertyPath("CurrentIndex"), Mode = BindingMode.TwoWay, UpdateSourceTrigger = UpdateSourceTrigger.Default });
  svc.StartIndex = _pdfDisplayManager.CurrentIndex;

return svc;
}

16. Run the project, if you added PDFViewerWrapper.winmd and Viscomsoft.UWP.PDFViewerSDK.dll  is x64 version, you should select compile in x64 and run the project.
Click open button to open the PDF, it can display the PDF file now, try click open button to select another PDF, it will crash, because it have not close the previous PDF file.
Now add the using statement

using System.Threading.Tasks;

and add the close function. The PDFDisplayManager have Commands class that useful if you have copy selected text, select all text button, so you need call ResetAllCommands() when close the document.
 

private async Task close()
{
  if (_pdfDisplayManager != null)
  {
  await _pdfDisplayManager.Document.CloseAsync();
  _pdfDisplayManager = null;
  }
Commands.ResetAllCommands();
}

17. Call close function before open the PDF. Now you can open the PDF, then open next PDF, it will not crash.
 

private async void btnOpen_Click(object sender, RoutedEventArgs e)
{
 await close();
 FileOpenPicker openPicker = new FileOpenPicker();
 openPicker.ViewMode = PickerViewMode.List;
 openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
 openPicker.FileTypeFilter.Add(".pdf");
 openPicker.FileTypeFilter.Add(".bmp");
 openPicker.FileTypeFilter.Add(".png");
 openPicker.FileTypeFilter.Add(".jpg");
 openPicker.FileTypeFilter.Add(".tif");
 openPicker.FileTypeFilter.Add(".tiff");
 StorageFile file = await openPicker.PickSingleFileAsync();

 DocumentFactory factory = new DocumentFactory();
 IDocument doc = factory.CreateDocument(file.Name);
 bool opened = await doc.OpenAsync(file);

 _pdfDisplayManager = new PDFDisplayManager();
 _pdfDisplayManager.Width = (int)Window.Current.Bounds.Width;
 _pdfDisplayManager.Height = (int)Window.Current.Bounds.Height;
 _pdfDisplayManager.Document = doc;
 _pdfDisplayManager.GotoPage(1);
 uiViewPanel.Child = createScrollViewControl();
}
 

18. In the XAML editor, add the button named btnZoomIn and btnZoomOut and add Click events.



19. Open MainPage.xaml.cs, add the code in btnZoomIn_Click and btnZoomOut_Click events.
 

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{
 if (_pdfDisplayManager == null)
 return;

 _pdfDisplayManager.ZoomIn();
}

private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
 if (_pdfDisplayManager == null)
 return;

 _pdfDisplayManager.ZoomOut();
}
 

20.  In the XAML editor, add the Toggle button named btnContinuous and add Click events.



21. Open MainPage.xaml.cs, add the code in btnContinuous_Click events. 

private void btnContinuous_Click(object sender, RoutedEventArgs e)
{
  if (_pdfDisplayManager == null)
  return;

  if (btnContinuous.IsChecked == true)
   uiViewPanel.Child = createScrollViewControl();
  else
   uiViewPanel.Child = createFlipViewControl();
}

 

21. add the code to create FlipView Control if the btnContinuous have not selected.

private UIElement createFlipViewControl()
{
 FlipViewControl fvc = new FlipViewControl();
 fvc.DataContext = _pdfDisplayManager;
 fvc.Name = "uiFlipView";
 fvc.StartIndex = _pdfDisplayManager.CurrentIndex;
 return fvc;
}
 

22. Finally set btnContinuous is selected when open the PDF.
 

private async void btnOpen_Click(object sender, RoutedEventArgs e)
{
 await close();
 FileOpenPicker openPicker = new FileOpenPicker();
 openPicker.ViewMode = PickerViewMode.List;
 openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
 openPicker.FileTypeFilter.Add(".pdf");
 openPicker.FileTypeFilter.Add(".bmp");
 openPicker.FileTypeFilter.Add(".png");
 openPicker.FileTypeFilter.Add(".jpg");
 openPicker.FileTypeFilter.Add(".tif");
 openPicker.FileTypeFilter.Add(".tiff");
 StorageFile file = await openPicker.PickSingleFileAsync();

 DocumentFactory factory = new DocumentFactory();
 IDocument doc = factory.CreateDocument(file.Name);
 bool opened = await doc.OpenAsync(file);

 _pdfDisplayManager = new PDFDisplayManager();
 _pdfDisplayManager.Width = (int)Window.Current.Bounds.Width;
 _pdfDisplayManager.Height = (int)Window.Current.Bounds.Height;
 _pdfDisplayManager.Document = doc;
 _pdfDisplayManager.GotoPage(1);
 uiViewPanel.Child = createScrollViewControl();
 btnContinuous.IsChecked = true;
}
 


10.  Select Build - Rebuild Solution.

You may download the project source code from http://www.viscomsoft.com/UWP/pdfviewer-sdk-csharp-tutorial.zip