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