How to print multiple charts in one page

[Nicotra]

Hi, I'm trying to print a multiple sfchart in UWP, I saw the solution in thread 121814, but I don't know where to find ChartPrintDialog

[Hemalatha Marikumar]

Hi Nicotra,

Greetings from Syncfusion.  

 

We would like to let you know that ChartPrintDialog class from Syncfusion.UI.Xaml.Charts namespace. Please download the below sample to include the chart reference to make it runnable from below 

 

https://www.syncfusion.com/downloads/support/forum/161140/ze/ExportChart-2127325038 

 

Please check and let us know if you have any other concern. 

 

Regards,
Hemalatha M. 

 

[Nicotra]

Thanks Hemalatha for the quick answer.

I tried your example and it works, of course. At this point I tried again in my project, but unfortunately the result was the same as before: ChartPrintDialog not found.

I noticed that your example has been devoleped using WPF, while mine uses UWP and it seems that class isn't present in that version. What can I do?

Regards

Mario

[Hemalatha Marikumar]

Hi Nicotra,

We regret about inconvenience, we shared the sample in WPF since your referred forum platform is in WPF.

You can print the multiple charts in UWP using the PdfDocument and its setting with converting the chart included parent layout as stream (you can convert the UIElement to stream by using RenderTargetBitmap) and pass it to PdfDocument to print as pdf. 

 

Find the GetStreamFromUIElement and SavePdf method implementation from attached sample. 

 

  private async void Button_Click(object sender, RoutedEventArgs e) 

        { 

            float borderWidth = 1f; // 1-px black border around image 

            PdfDocument pdfDoc = new PdfDocument(); 

            pdfDoc.PageSettings = new PdfPageSettings() 

            { 

                Orientation = PdfPageOrientation.Portrait, 

                Width = 850, 

                Height = 600 

            }; 

 

            

            PdfPage page = pdfDoc.Pages.Add(); 

            PdfGraphics graphics = page.Graphics; 

            PointF diagramOrigin = new PointF(10f, 10f); 

            float diagramRenderWidth = pdfDoc.PageSettings.Width - (diagramOrigin.X + (pdfDoc.PageSettings.Margins.Left + pdfDoc.PageSettings.Margins.Right));//795 

            float diagramRenderHeight = pdfDoc.PageSettings.Height - (diagramOrigin.Y + (pdfDoc.PageSettings.Margins.Top + pdfDoc.PageSettings.Margins.Bottom)); // 302 

 

            //Instead of passing Border, we can directly pass the UIElement chart. 

            Stream imageFileStream = await this.GetStreamFromUIElement(this.chartPanel); 

            PdfBrush blackBrush = new PdfSolidBrush(new PdfColor(0, 0, 0)); 

            PdfImage img = PdfImage.FromStream(imageFileStream); 

            graphics.DrawRectangle(blackBrush, new RectangleF(diagramOrigin.X - borderWidth, diagramOrigin.Y - borderWidth, diagramRenderWidth + (2 * borderWidth), diagramRenderHeight + (2 * borderWidth))); 

            graphics.DrawImage(img, diagramOrigin.X, diagramOrigin.Y, diagramRenderWidth, diagramRenderHeight); 

            string filename = string.Format("PdfWithChart-{0}.pdf", DateTime.Now.ToString("yyyyMMddHHmmss")); 

            await this.SavePdf(pdfDoc, filename); 

        } 

 

Here chartpanel is chart included parent layout 

 

<StackPanel> 

    <Grid x:Name="chartPanel" Background="White"> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition/> 

            <ColumnDefinition/> 

        </Grid.ColumnDefinitions> 

            <syncfusion:SfChart  Background="LightPink"/> 

            <syncfusion:SfChart  Background="Yellow" Grid.Column="1"/> 

        </Grid> 

        <Button Margin="0,20,0,0" Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Click to Print"/> 

    </StackPanel> 

 

Here, you can find the complete sample to print all chart with having the file picker to save the pdf in your desired location and to load that in view when having the confirmation popup. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/161140/ze/AppUWPTest-1913195670 

 

Pdf file: https://www.syncfusion.com/downloads/support/forum/161140/pd/PdfWithChart-20210106120221-827014821 

 

Needed packages: 

 

Syncfusion.SfChart.UWP 

Syncfusion.Pdf.UWP 

 

Regards,
Hemalatha M. 

 

 

  

[Nicotra]

Thanks Hemalatha,

the sample works, now I'll try to modify it in order to have a sort of print preview to let the user choose some options like portrait or landscape.

Regards

Mario

[Hemalatha Marikumar]

Hi Nicotra, 

 

We are glad to hear that given solution works.  

 

Please revert if you need any further assistance. 

 

Regards,
Hemalatha M.