Step 1 of 3: Adding C1PdfViewer to the Application

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

In Visual Studio 2012 Select File | New | Project.
In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.
Open MainPage.xaml if it isn't already open, place the cursor between the <Grid> and </Grid> tags, and click once.
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.

Markup	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions>

Navigate to the Toolbox and double-check the C1PdfViewer icon to add the control to your application.
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.

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.

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 WinRT-style application. In the next step you'll add code to the application to view a PDF.