How to Save Diagram as Image
This article explains how to save SfDiagram as an Image.
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:
Save Diagram as Image:
Save the SfDiagram as an Image using the ‘SaveAsImage’ method.
XAML
<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <sfDiagram:SfDiagram VerticalOptions="FillAndExpand" HeightRequest="200" x:Name="diagram" /> <Button Text="SaveImage" Grid.Row="1" HeightRequest="50" Clicked="Button_Clicked"/> </Grid>
CS
private void Button_Clicked(object sender, EventArgs e)
{
diagram.SaveAsImage();
}
Note: Please find the saved image path location details below, In Android: The saved image is stored in the ‘Pictures’ location with an image name starts with “Diagram” and DateAndTime (i.e., "Diagram" and "yyyyMMddHHmmssfff") in the android device. In iOS: The saved image is stored in the ‘Photos’ location with the image name ‘Diagram’ in the iPhone. In UWP: The saved image is stored in the ‘ApplicationData’ folder. You can get the application path using ‘ApplicationData.Current.LocalFolder’. Ex: C:\Users\AppData\Local\Packages\f653350b-351f-492a-abeb-5ec6cdc31367_2zq8t8r7s00mj\RoamingState
Save Diagram as Stream:
Save the SfDiagram as Stream using the ‘SaveAsImage’ method by parsing empty stream.
XAML
<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <sfDiagram:SfDiagram VerticalOptions="FillAndExpand" HeightRequest="200" x:Name="diagram" /> <Button Text="SaveImageWithStream" Grid.Row="1" HeightRequest="50" Clicked="Button_Clicked"/> </Grid>
CS
private void Button_Clicked(object sender, EventArgs e)
{
Stream stream = new MemoryStream();
diagram.SaveAsImage(stream, ImageFormat.Png);
}
Save Diagram as Stream with Margin:
Save the SfDiagram as Stream using the ‘SaveAsImage’ method withthe margin.
XAML
<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <sfDiagram:SfDiagram VerticalOptions="FillAndExpand" HeightRequest="200" x:Name="diagram" /> <Button Text="SaveImageWithMargin" Grid.Row="1" HeightRequest="50" Clicked="Button_Clicked"/> </Grid>
CS
private void Button_Clicked(object sender, EventArgs e)
{
Stream stream = new MemoryStream();
diagram.SaveAsImage(stream, ImageFormat.Png,50,0,0,0);
}
Save Diagram as Stream with Padding:
Save the SfDiagram as Stream using the ‘SaveAsImage’ method with the padding.
XAML
<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <sfDiagram:SfDiagram VerticalOptions="FillAndExpand" HeightRequest="200" x:Name="diagram" /> <Button Text="SaveImageWithPadding" Grid.Row="1" HeightRequest="50" Clicked="Button_Clicked"/> </Grid>
CS
private void Button_Clicked(object sender, EventArgs e)
{
Stream stream = new MemoryStream();
diagram.SaveAsImage(stream, ImageFormat.Png,50);
}
The sample that explains how to save SfDiagram as an image can be downloaded here.
