ComponentOne PdfViewer for UWP
Key Features / Step 1 of 3: Adding C1PdfViewer to the Application
In This Topic
    Step 1 of 3: Adding C1PdfViewer to the Application
    In This Topic

    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