ComponentOne PdfViewer for UWP
Step 1 of 3: Adding C1PdfViewer to the Application
Quick Start > Step 1 of 3: Adding C1PdfViewer to the Application

In this step you'll begin in Visual Studio to create a UWP-style application using PdfViewer for UWP. To set up your project and add a C1PdfViewer control to your application, complete the following steps:

  1. Select File | New | Project.
  2. In the New Project dialog box, select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows). Enter a Name and click OK to create your project.
  3. Open MainPage.xaml if it isn't already open, place the cursor between the <Grid> and </Grid> tags, and click once.
  4. Add the following column and row definitions between the <Grid> and </Grid> tags:
Markup
Copy Code
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Elements in the grid will now appear positioned.

  1. Navigate to the Toolbox and double-check the C1PdfViewer icon to add the control to your application.
  2. Edit the C1PdfViewer's markup so it appears similar to the following:

To write the markup in XAML:

Markup
Copy Code
<PdfViewer:C1PdfViewer  x:Name="pdfViewer" ViewMode="FitWidth" Grid.Row="1" Grid.ColumnSpan="2"/>

This markup gives the control a name, sets the ViewMode of the control so that the entire width of a PDF will be displayed in the control, and customizes the layout of the control.

  1. Navigate to the Toolbox and double-click the StackPanel icon to add it to the page. Edit the StackPanel's markup so it appears similar to the following:

To write the markup in XAML:

Markup
Copy Code
<StackPanel Orientation="Horizontal" Margin="8" VerticalAlignment="Center" >
    <TextBlock Text="{Binding ElementName=pdfViewer, Path=PageNumber}" FontSize="20" Foreground="{StaticResource ApplicationForegroundThemeBrush}" />
    <TextBlock Text=" / " Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="20"/>
    <TextBlock Text="{Binding ElementName=pdfViewer, Path=PageCount}" FontSize="20" Foreground="{StaticResource ApplicationForegroundThemeBrush}" />
</StackPanel>

This markup adds three TextBlock controls in the StackPanel.

  1. Add the following markup just below the StackPanel's closing tag icon to add a Button to the page:

To write the markup in XAML:

Markup
Copy Code
<Button x:Name="btnLoad" Grid.Column="1" Content=" Load Pdf... " HorizontalAlignment="Right" VerticalAlignment="Top" Margin="8" Click="btnLoad_Click" />

You've successfully created a UWP-style application. In the next step you'll add code to the application to view a PDF.

See Also