1. Home
  2. Forum
  3. Xamarin.Forms
  4. Image loose aspect ratio after adding it to PDFGrid

Image loose aspect ratio after adding it to PDFGrid

Hey,

I'm trying to add the image into PDFGrid in Xamarin. Unfortunately after adding the image aspect ratio is distorted (despite using Fit value).
Is there anything I'm missing here?

      
   ObservableCollection<Type1> _lista;
   PdfDocument doc = new PdfDocument();
            Stream fontStream = Assembly.GetExecutingAssembly().GetManifestResourceStream("Project1.UWP.Assets.Helvetica-Bold.ttf");
            PdfTrueTypeFont font = new PdfTrueTypeFont(fontStream, 6);
           
            doc.PageSettings.Orientation = PdfPageOrientation.Landscape;
            PdfPage page = doc.Pages.Add();
            RectangleF bounds = new RectangleF(0, 0, doc.Pages[0].GetClientSize().Width, 50);
            PdfPageTemplateElement header = new PdfPageTemplateElement(bounds);
            Stream imageStream = File.OpenRead("logo.png");
            PdfBitmap image = new PdfBitmap(imageStream);
            PdfGraphics graphics = page.Graphics;
            graphics.DrawImage(image, 0, 0);
            this.AddHeader(page, doc, "cos");
            PdfGrid pdfGrid = new PdfGrid();
            pdfGrid.Columns.Add(11);
            PdfStringFormat format = new PdfStringFormat();
            format.Alignment = PdfTextAlignment.Center;
            format.LineAlignment = PdfVerticalAlignment.Middle;

            for (int i = 0; i < 11; i++)
            {
                pdfGrid.Columns[i].Format = format;
            }
            pdfGrid.Columns[0].Width = 50;
            pdfGrid.Columns[1].Width = 95;
            pdfGrid.Columns[2].Width = 50;
            pdfGrid.Columns[3].Width = 30;
            pdfGrid.Columns[4].Width = 280;
            pdfGrid.Columns[5].Width = 38;
            pdfGrid.Columns[6].Width = 38;
            pdfGrid.Columns[7].Width = 38;
            pdfGrid.Columns[8].Width = 38;
            pdfGrid.Columns[9].Width = 38;
            pdfGrid.Columns[10].Width = 50;
            pdfGrid.Headers.Add(1);
            PdfGridRow pdfGridHeader = pdfGrid.Headers[0];
            pdfGridHeader.Cells[0].Value = "C0";
            pdfGridHeader.Cells[1].Value = "C1";
            pdfGridHeader.Cells[2].Value = "C2";
            pdfGridHeader.Cells[3].Value = "C3";
            pdfGridHeader.Cells[4].Value = "C4";
            pdfGridHeader.Cells[5].Value = "C5";
            pdfGridHeader.Cells[6].Value = "C6";
            pdfGridHeader.Cells[7].Value = "C7";
            pdfGridHeader.Cells[8].Value = "C8";
            pdfGridHeader.Cells[9].Value = "C9";
            pdfGridHeader.Cells[10].Value = "Image";
            pdfGridHeader.Style.Font = font;


            //add rows
            List<Type1> OurList = new List<Type1>();
            for (int i = 0; i < _lista.Count; i++)
            {
                if (_lista[i].IsSelect == true)
                {
                    OurList.Add(_lista[i]);
                }
            }
            for (int i = 0; i < OurList.Count; i++)
            {
                PdfGridRow pdfGridRow = pdfGrid.Rows.Add();
                pdfGridRow.Cells[0].Value = OurList[i].C0;
                pdfGridRow.Cells[1].Value = OurList[i].C1;
                pdfGridRow.Cells[2].Value = OurList[i].C2;
                pdfGridRow.Cells[3].Value = OurList[i].C3;
                pdfGridRow.Cells[4].Value = OurList[i].C4;
                pdfGridRow.Cells[5].Value = OurList[i].C5;
                pdfGridRow.Cells[6].Value = OurList[i].C6;
                pdfGridRow.Cells[7].Value = OurList[i].C7;
                pdfGridRow.Cells[8].Value = OurList[i].C8;
                pdfGridRow.Cells[9].Value = OurList[i].C9;
                //add image to cell
                if (OurList[i].PhotoPath == " ")
    {
    }
                else
                {
                    Stream imageStreamPhoto = File.OpenRead(OurList[i].PhotoPath);
                    PdfBitmap imagePhoto = new PdfBitmap(imageStreamPhoto);
                    pdfGridRow.Cells[10].ImagePosition = PdfGridImagePosition.Fit;
                    pdfGridRow.Cells[10].Style.BackgroundImage = imagePhoto;
                    pdfGridRow.Cells[10].Value = 0;
                }
                pdfGridRow.Height = 38;
                pdfGridRow.Style.Font = font;
            }

            pdfGrid.Draw(page, 0, 80);
            //Save and close
            MemoryStream stream = new MemoryStream();
            doc.Save(stream);

            Xamarin.Forms.DependencyService.Get<Services.ISave>().SaveTextAsync("Test.pdf", "application/pdf", stream);
            doc.Close(true);

6 Replies
SK Sasi Kumar Sekar Syncfusion Team April 17, 2018 09:05 AM UTC

Hi Kamil, 

Thank you for contacting Syncfusion support. 

We have used the shared code snippet and drawn the both portrait and landscape image and we are not able to reproduce the image aspect radio distorted when adding in PdfGridcell with the PdfGridImagePosition as Fit. Can you please share the input image which you are using in your side and output document, it will help us to check the same in our side. Please find the screenshot for the generated output from our side.  
 Screenshot: 

 

 
Please let us know if you need further assistance in this. 

Regards, 
Sasi Kumar S 


KC Kamil Cisewski replied to Sasi Kumar Sekar April 17, 2018 02:20 PM UTC

Hi Kamil, 

Thank you for contacting Syncfusion support. 

We have used the shared code snippet and drawn the both portrait and landscape image and we are not able to reproduce the image aspect radio distorted when adding in PdfGridcell with the PdfGridImagePosition as Fit. Can you please share the input image which you are using in your side and output document, it will help us to check the same in our side. Please find the screenshot for the generated output from our side.  
 Screenshot: 

 

 
Please let us know if you need further assistance in this. 

Regards, 
Sasi Kumar S 


Hi @Sasi,

I was using images that were 1200px high and 250px width. 
Could you test it for me?

Best regards
Kamil

Attachment: bug_b3ee69f1.zip

SK Sasi Kumar Sekar Syncfusion Team April 18, 2018 11:09 AM UTC

Hi Kamil, 
 
Thank you for your update. 
 
We can achieve your requirement using BeginCellLayout event. We have created sample for the same. Please find the code snippet and sample below, 
Code snippet: 
 
       private void Button_OnClicked(object sender, EventArgs e) 
        {             
            //Create initialize PDF document. 
            PdfDocument doc = new PdfDocument();             
 
            //Add page to PDF document. 
            PdfPage page = doc.Pages.Add();                                                               
         
            //Create PdfGird . 
            PdfGrid pdfGrid = new PdfGrid(); 
 
            //Subscribing Event. 
            pdfGrid.BeginCellLayout += PdfGrid_BeginCellLayout; 
 
           pdfGrid.Columns.Add(4); 
 
            pdfGrid.Columns[0].Width = 100; 
            pdfGrid.Columns[1].Width = 100; 
            pdfGrid.Columns[2].Width = 100; 
            pdfGrid.Columns[3].Width = 100;             
 
            PdfGridRow pdfGridRow = pdfGrid.Rows.Add(); 
 
            for (int i = 0; i < pdfGridRow.Cells.Count; i++) 
            { 
                pdfGridRow.Cells[i].Value = "cell" + i.ToString(); 
            } 
            Stream imgStream = typeof(MainPage).GetTypeInfo().Assembly.GetManifestResourceStream("GettingStarted.kurortowe.jpg"); 
            PdfBitmap imagePhoto = new PdfBitmap(imgStream); 
            pdfGridRow.Cells[3].ImagePosition = PdfGridImagePosition.Fit; 
 
            //Set image to PdfGridCell background 
            pdfGridRow.Cells[3].Style.BackgroundImage = imagePhoto; 
 
 
            pdfGridRow.Height = 38; 
 
 
            pdfGrid.Draw(page, 0, 80); 
 
            //Save and close 
            MemoryStream stream = new MemoryStream(); 
            doc.Save(stream); 
 
            Xamarin.Forms.DependencyService.Get<ISave>().SaveTextAsync("output.pdf", "application/pdf", stream); 
        } 
 
 //PdfGridBeginCellLayout event 
private void PdfGrid_BeginCellLayout(object sender, PdfGridBeginCellLayoutEventArgs args) 
        { 
            if (args.CellIndex == 10 && args.Style.BackgroundImage!=null) 
            {                 
                PdfImage backgroundOriginalImage = args.Style.BackgroundImage; 
 
                // Calculate the new image dimensions 
                float thumbnailSize =args.Bounds.Height; 
                float newWidth, newHeight; 
 
                //Calculate Aspect ratio of image. 
                float radiusX = (float)(args.Bounds.Width / backgroundOriginalImage.Width); 
                float radiusY = (float)(args.Bounds.Height / backgroundOriginalImage.Height); 
                float r = Math.Min(radiusX, radiusY); 
                newWidth = backgroundOriginalImage.Width * r; 
                newHeight = backgroundOriginalImage.Height * r; 
 
                //Draw image in center of the cell. 
                float centerX = args.Bounds.X+(args.Bounds.Width - newWidth) / 2; 
                float centerY = args.Bounds.Y+(args.Bounds.Height - newHeight) / 2; 
 
                //Draw the image in center of the cell. 
                args.Graphics.DrawImage(backgroundOriginalImage, new RectangleF(centerX,centerY, newWidth, newHeight)); 
 
                args.Style.BackgroundImage = null;                                 
            } 
        } 
 
 
Sample: 
 
Screenshot: 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Sasi Kumar S. 


KC Kamil Cisewski April 19, 2018 11:36 AM UTC

Thank you for the code. It's working and image has correct aspect ratio :-)

Best Regards
Kamil

CC Chad Church Syncfusion Team replied to Sasi Kumar Sekar April 19, 2018 01:18 PM UTC

Hi Kamil, 

Thank you for contacting Syncfusion support. 

We have used the shared code snippet and drawn the both portrait and landscape image and we are not able to reproduce the image aspect radio distorted when adding in PdfGridcell with the PdfGridImagePosition as Fit. Can you please share the input image which you are using in your side and output document, it will help us to check the same in our side. Please find the screenshot for the generated output from our side.  
 Screenshot: 

 

 
Please let us know if you need further assistance in this. 

Regards, 
Sasi Kumar S 


Hi Sasi,

Do we have an option to maintain the aspect ratio for images as they are added to our pdf grid?

Thanks,
Chad



SK Sasi Kumar Sekar Syncfusion Team April 20, 2018 12:51 PM UTC

Hi Chad, 
 
At present we do not have support for maintaining the aspect ratio for images in PdfGridCell and it can be fixed by workaround sample. We have created feature request for this, we will include this implementation in our source. 
 
Regards, 
Sasikumar S. 


Loader.
Up arrow icon