How to add two images in one PDF table cell in Xamarin Forms

The Syncfusion Essential PDF is a Xamarin PDF library used to create, read, and edit PDF documents. Using this library, you can add two images in one PDF table cell in Xamarin Forms.

Steps to add two images in one PDF table cell in Xamarin Forms

1. Create a new C# Xamarin Forms application project.

2. Select the project template and required platforms to deploy the application. In this application,  the .NET Standard code sharing strategy has been selected to share the portable assemblies across multiple platforms. For more details about code sharing, refer to here.
   Note:

   If the .NET Standard is not available in the code-sharing strategy, the Portable Class Library (PCL) can be selected.

3. Install the Syncfusion.Xamarin.Pdf NuGet package as a reference to your .NET Framework application from NuGet.org.

4. Add a new Forms XAML page in the portable project if there is no XAML page is defined in the App class. Otherwise, proceed to the next step.

1. To add a new XAML page, right-click the project and select Add > New Item and add a Forms XAML Page from the list and Name it as MainPage.
2. In-App class of portable project (App.cs), replace the existing constructor of App class with the following code sample that invokes the MainPage.

   public App()
   {
       InitializeComponent();
       MainPage = new MainPage();
   }
   

5. In the MainPage.xaml, add a new button as follows.

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:ImagesInTableCell"
                x:Class="ImagesInTableCell.MainPage">
       <StackLayout VerticalOptions="Center">
           <Button Text="Generate PDF Document" Clicked="OnButtonClicked"  HorizontalOptions="Center" VerticalOptions="Center"/>
       </StackLayout>
   </ContentPage>
   

6. Include the following namespace in MainPage.xaml.cs file.

   using Syncfusion.Drawing;
   using Syncfusion.Pdf;
   using Syncfusion.Pdf.Graphics;
   using Syncfusion.Pdf.Grid;
   

7. Include the following code sample in the click event of the button in MainPage.xaml.cs file to add two images in one PDF table cell in Xamarin Forms.

   //Create a new PDF document
   PdfDocument pdfDocument = new PdfDocument();
    
   //Create the page
   PdfPage pdfPage = pdfDocument.Pages.Add();
    
   //Create a new PdfGrid
   PdfGrid pdfGrid = new PdfGrid();
    
   //Add row
   PdfGridRow row1 = pdfGrid.Rows.Add();
    
   //Add columns
   pdfGrid.Columns.Add(1);
    
   //Set the value to the specific cell
   row1.Cells[0].Value = "Two images in one PDF table cell";
    
   //Add row
   PdfGridRow row2 = pdfGrid.Rows.Add();
   row2.Height = 400;
    
   pdfGrid.BeginCellLayout += PdfGrid_BeginCellLayout;
    
   //Create and customize the string formats
   PdfStringFormat format = new PdfStringFormat();
   format.Alignment = PdfTextAlignment.Center;
    
   pdfGrid.Rows[0].Cells[0].StringFormat = format;
    
   //Draw the PdfGrid
   pdfGrid.Draw(pdfPage, PointF.Empty);
    
   MemoryStream stream = new MemoryStream();
   //Save the document to the stream
   pdfDocument.Save(stream);
    
   //Close the document
   pdfDocument.Close(true);
    
   //Save the stream as a file in the device and invoke it for viewing
   Xamarin.Forms.DependencyService.Get<ISave>().SaveAndView("Sample.pdf", "application/pdf", stream);
   

Helper method:

private void PdfGrid_BeginCellLayout(object sender, PdfGridBeginCellLayoutEventArgs args)
{
    //Draw images one after another in single PDF cell
    if (args.RowIndex == 1 && args.CellIndex == 0)
    {
        //Load the first image from a stream
        Stream imageStream1 = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("ImagesInTableCell.Assets.Image1.jpg");
        PdfBitmap image1 = new PdfBitmap(imageStream1);
        
        //Draw first image
        args.Graphics.DrawImage(image1, new RectangleF(args.Bounds.X, args.Bounds.Y, args.Bounds.Width, 200));
        
        //Load the second image from the stream
        Stream imageStream2 = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("ImagesInTableCell.Assets.Image2.jpg");
        PdfBitmap image2 = new PdfBitmap(imageStream2);
        
        //Draw second image
        args.Graphics.DrawImage(image2, new RectangleF(args.Bounds.X, args.Bounds.Y + 200, args.Bounds.Width, 200));
    }
}

8. Download the helper files from this link and add them to the mentioned project. These helper files allow you to save the stream as a physical file and open the file for viewing.

• Create a new XML file with the name of provider_paths.xml under the Android project Resources folder and add the following code in it.

Ex: Resources/xml/provider_path.xml

<?xml version="1.0" encoding="utf-8" ?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <external-path name="external_files" path="."/>
</paths>

• Add the following code to the AndroidManifest.xml file located under Properties/AndroidManifest.xml.

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.ImagesInTableCell">
      <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" />
      <application android:label="ImagesInTableCell.Android">
        <provider android:name="android.support.v4.content.FileProvider" android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true">
          <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths" />
        </provider>
      </application>
  </manifest>
  

9. Complete and execute the application. This creates a table with two images in the PDF document.

Download the complete working sample from ImagesInTableCell.zip.

Take a moment to peruse the documentation. You can find options like creating a table using the PdfLightTable and PdfGrid, cell, and row customization in the PdfLightTable and PdfGrid, built-in table styles to PdfGrid, pagination in the PdfGrid and PdfLightTable and features like inserting an image in a new PDF document with code examples. 

Refer to here to explore a rich set of Syncfusion Essential PDF features.

See Also:

Add two images in PDF cell in Windows Forms

Add image and text in the PDF table in Windows Forms

Insert image in the PDF table in Windows Forms