Articles in this section

How to save diagram with image as Pdf?

How to Save a Diagram with an Image as a Pdf?

This article explains how to save a diagram with an image as a Pdf.

 

Step 1:

Create a SfDiagram sample with all the necessary assemblies. Refer to this Getting started documentation to create and configure a simple SfDiagram sample.

 

Step 2:

Using the saved stream from the ‘SaveAsImageAsync’ method, you can save the diagram with an image as a Pdf.

 

XAML

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<sfDiagram:SfDiagram  VerticalOptions="FillAndExpand" HeightRequest="500" x:Name="diagram" />
<Button Text="Save Diagram as PDF" HeightRequest="50" Grid.Row="1" Clicked="Button_Clicked"/>
</Grid>

 

 

CS

//Define the data template to a node.
var template = new DataTemplate(() =>
{
      StackLayout stacklayout = new StackLayout();
      stacklayout.WidthRequest = 200;
      stacklayout.HeightRequest = 300;
      stacklayout.BackgroundColor = Color.Transparent;
      stacklayout.VerticalOptions = LayoutOptions.FillAndExpand;
      stacklayout.HorizontalOptions = LayoutOptions.FillAndExpand;
      stacklayout.Orientation = StackOrientation.Vertical;
      Image image = new Image();
      image.BackgroundColor = Color.Transparent;
      image.WidthRequest = 200;
      image.HeightRequest = 200;
      image.Aspect = Aspect.AspectFit;
      image.Source = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png";
      stacklayout.Children.Add(image);
 
      Label label = new Label()
      {
            TextColor = Color.Red,
            Text = "Image",
            FontSize = 12,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand
      };
      stacklayout.Children.Add(label);
      return stacklayout;
});
//Initialize a node with a template.
Node node = new Node() { Width = 200, Height = 300, OffsetX = 0, OffsetY = 0, Template = template };
node.Style.Brush = new SolidBrush(Color.Transparent);
node.Style.StrokeBrush = new SolidBrush(Color.Transparent);
diagram.AddNode(node);

 

 

The sample that explains how to save a diagram with an image as a Pdf can be downloaded here.

 

See Also: 

https://www.syncfusion.com/xamarin-ui-controls/xamarin-diagram

https://www.syncfusion.com/xamarin-android-ui-controls/diagram

https://www.syncfusion.com/xamarin-ios-ui-controls/diagram

 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied