Diagram in Xamarin Diagram (SfDiagram)

11 Apr 202224 minutes to read

Xamarin Diagram allows to create different types of diagrams such as flow charts, use case diagrams, workflow process diagrams, and more.

Page settings

Page settings enable to customize the appearance, width, and height of the Diagram page. The size and appearance of the Diagram pages can be customized with the PageSettings property.
The PageWidth and PageHeight properties of page settings define the size of the page. You can also customize the appearance of off-page regions with the property BackgroundColor.
The following code illustrates how to customize the page size and the appearance of page and off-page.

<diagram:SfDiagram x:Name="diagram" BackgroundColor="Lime"> 
<diagram:SfDiagram.PageSettings> 
<diagram:PageSettings PageWidth="500" PageHeight="50” PageBackGround="White" /> 
</diagram:SfDiagram.PageSettings> 
</diagram:SfDiagram>
//Sets Page background 
diagram.BackgroundColor = Color.Lime; 
//Sets Page size 
diagram.PageSettings.PageWidth = 500; 
diagram.PageSettings.PageHeight = 500; 
//Customizes the appearance of Page
diagram.PageSettings.PageBackGround= Color.White;

View Port Start Position

Page settings enable you to customize the viewport start position of the diagram page. The enum ViewPort Start Position has two constants: Default, Origin. The default value is set to Default.

Default

The viewport of the diagram page is decided based on the node’s offsets.

NOTE

The viewport of the diagram page will be in a negative region when the node’s offsets are negative.

Origin

The viewport of the diagram page begins with origin (0,0) even though when the node’s offsets are negative.

The following code explains how to customize the view port start position of the page.

<diagram:SfDiagram x:Name="diagram"> 
    <diagram:SfDiagram.PageSettings>
      <diagram:PageSettings ViewPortStartPosition = "Origin">  
    <diagram:SfDiagram.PageSettings>
</diagram:SfDiagram>
//Sets the viewport start position.
SfDiagram.PageSettings.ViewPortStartPosition = ViewportStartPosition.Origin;

Stencil:

Stencil has a collection of Symbols. Stencil is used to clone the desired symbol by dragging it from the Stencil and dropping it into the SfDiagram.
The following code snippet illustrates to add the stencil.

<syncfusion:Stencil x:Name="stencil" >
</syncfsion:Stencil>
Stencil stencil = new Stencil(); 
this.Content = stencil;

Node template:

You can replace the entire node template with your own design using SfDiagram.NodeTemplate property.
The following code snippet and screenshot illustrates this.

<DataTemplate x:Key="template">
  <Grid WidthRequest="80" HeightRequest="80">
    <Image Source="diagram.png"/>
  </Grid>
</DataTemplate>
<control:SfDiagram x:Name="diagram" NodeTemplate="{StaticResource template}"/>
var template = new DataTemplate(() =>
{
    Grid grid = new Grid();
    grid.WidthRequest = 80;
    grid.HeightRequest = 80;
    Image image = new Image();
    image.Source = "employee.png";
    grid.Children.Add(image);
    return grid;
});
diagram.NodeTemplate = template;

Diagram constraints

The constraints property of Diagram allows you to enable/disable certain features.
The Diagram Constraints allow you to enable or disable the following behaviors of Node.
EnableDrag
EnableResize
EnableRotation
EnableTextEditing
EnableSelectors
EnableZoomAndPan
IsReadOnly
EnableAutoScroll
EnableVirtualization
Example
The following code illustrates how to disable the item dragging.

<synfusion:SfDiagram x:Name="diagram" EnableDrag="False">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram(); 
// Disable the item dragging
diagram.EnableDrag = false;
this.Content = diagram;

Show Selector Handle

You can show or hide the selector handle for the diagram element based on the specified SelectorPosition options. You can restrict the resize operation for Nodes using the ShowSelectorHandle method. The following code sample explains this.

SfDiagram diagram = new SfDiagram(); 
diagram.AddNode(new Node(100, 100, 300,300) { ShapeType = ShapeType.Rectangle });         
diagram.ShowSelectorHandle(false, SelectorPosition.TopLeft);
diagram.ShowSelectorHandle(false, SelectorPosition.TopRight);
diagram.ShowSelectorHandle(false, SelectorPosition.BottomLeft);
diagram.ShowSelectorHandle(false, SelectorPosition.BottomRight);
diagram.ShowSelectorHandle(true, SelectorPosition.MiddleLeft);
diagram.ShowSelectorHandle(true, SelectorPosition.MiddleRight);
diagram.ShowSelectorHandle(true, SelectorPosition.TopCenter);
diagram.ShowSelectorHandle(true, SelectorPosition.BottomCenter);
this.Content = diagram;

Load and Save JSON :

You can save the diagram in JSON format and load the JSON saved file into Diagram. The following code sample explains this.

SfDiagram diagram = new SfDiagram();
string JsonText = diagram.SaveAsJson();
diagram.LoadFromJson(JsonText);

SaveAsImage

To save the output screen shot of the diagram control in image format, use the SaveAsImage method. It uses the default format image.png File Name - it is generated automatically by using the Current Date and Time.Save the diagram in a Specific ImageFormat.The following code sample explains this.

<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    (sender as SfDiagram).SaveAsImage();   
}

Save Diagram as image format with Padding.

To save the diagram as image format, use the SaveAsImage method with the padding.

<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    (sender as SfDiagram).SaveAsImage(ImageFormat.Png,50); 
}

Save the diagram as image format with Margin.

To save the diagram as image format, use the SaveAsImage method with the margin.

<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    (sender as SfDiagram).SaveAsImage(ImageFormat.Png,40,0,0,0); 
}

Save the diagram as Stream.

To save the diagram as Stream, use the SaveAsImage method by parsing empty stream.

<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    Stream stream = new MemoryStream();
    (sender as SfDiagram).SaveAsImage(stream);
}

NOTE

To save the diagram as SaveAsImage stream and the SaveAsImage stream with image format methods are works in Android and iOS platform only.

Save the diagram as Stream Asynchronous.

To save the diagram as Asynchronous Stream, use the SaveAsImageAsync method by parsing empty stream.And save the diagram as Asynchronous Stream using the SaveAsImageAsync with the image format.The following code sample explains this.

<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    Stream stream = new MemoryStream();
    (sender as SfDiagram).SaveAsImageAsync(stream);
}
<synfusion:SfDiagram x:Name="diagram" Loaded="Diagram_Loaded">
</syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.Loaded += Diagram_Loaded;
this.Content = diagram;

private void Diagram_Loaded(object sender)
{
    Stream stream = new MemoryStream();
    (sender as SfDiagram).SaveAsImageAsync(stream, ImageFormat.Png);
}

NOTE

To save the diagram as SaveAsImageAsync stream and SaveAsImageAsync stream with image format methods are works in Android, iOS and UWP platforms.

NOTE

The saved image path location details, 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\90e15aa5-f034-42d8-9532-0f8ac8ab27cf_bkebv2yxxpdar\RoamingState). Android - The saved image is stored in the ‘Pictures’ location with an image name that starts with “Diagram” and DateAndTime (i.e., “Diagram” and “Current Date and Time”) in the android device. iOS - The saved image is stored in the ‘Photos’ location with the image name ‘Diagram’ in the iPhone.

Diagram style settings

It is easier to apply default rendering styles to all shapes, connectors, stencil symbol, and stencil header in a diagram. Pass the following arguments to diagram style setting constructor:

  • DefaultNodeStyle argument: Defines the node style properties.
  • DefaultConnectorStyle argument: Defines the connector style properties.
  • DefaultSymbolStyle argument: Defines the symbol style properties.
  • DefaultHeaderStyle argument: Defines the header style properties.
    The following code shows how to define the diagram style settings for the diagram object.
// Diagram style settings 
Syncfusion.SfDiagram.XForms.Style NodeStyle = new Syncfusion.SfDiagram.XForms.Style() { Brush = new SolidBrush(Color.Blue), StrokeBrush = new SolidBrush(Color.Brown), StrokeWidth = 2, StrokeStyle = StrokeStyle.Dashed };
Syncfusion.SfDiagram.XForms.Style ConnectorStyle = new Syncfusion.SfDiagram.XForms.Style() { StrokeBrush = new SolidBrush(Color.DeepSkyBlue), StrokeWidth = 3.0f, StrokeStyle = StrokeStyle.Dotted };
SymbolStyle SymbolStyle = new SymbolStyle() { Width = 70, Height = 70, BorderThickness = 4, BorderBrush = Color.Gray }; HeaderStyle HeaderStyle = new HeaderStyle() { FontSize = 24, TextBrush = Color.White, Fill = Color.SteelBlue, FontStyle = FontStyle.Italic, HorizontalAlignment = HorizontalAlignment.Center };
DiagramStyleSettings diagramStyleSettings = new DiagramStyleSettings(NodeStyle, ConnectorStyle, SymbolStyle, HeaderStyle);
//Passing diagram style settings instance to SfDiagram constructor
SfDiagram diagram = new SfDiagram(diagramStyleSettings);

Zooming enhancement

Supports customizing the zoom levels. You can set minimum zoom level value to 0.01f and maximum to ‘infinite’.

<!-- Define the minimum and maximum zoom factor value -->
<control:SfDiagram x:Name="diagram"  MinimumZoomFactor="0.01" MaximumZoomFactor="5.00" />
// Define the minimum and maximum zoom factor value 
  diagram.MinimumZoomFactor = 0.01f;
  diagram.MaximumZoomFactor = 5.00f;

Clear

Remove all the items from the diagram page using the ‘Clear’ method. To remove all the items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram(); 
diagram.Clear(); 
this.Content = diagram;

Select

Select the node or connector items from the diagram using the ‘Select’ method. To select the items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram(); 
Node node = new Node() { Width = 120, Height = 40, OffsetX = 300,OffsetY = 60};
diagram.AddNode(node);
diagram.Select(node); 
this.Content = diagram;

ClearSelection

Clear the selected items from the diagram using the ‘ClearSelection’ method. To clear the selected items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram(); 
diagram. ClearSelection();  
this.Content = diagram;

Undo and Redo

The diagram tracks the history of actions that are performed after initializing the diagram and provides support to reverse and restore those changes.
The ‘Undo’ function is performed to reverse the action of an earlier action.

The ‘Redo’ function is restores any actions that have been previously undone using an undo.

//To perform the Undo action in the Diagram
SfDiagram diagram = new SfDiagram(); 
diagram.Undo(); 
this.Content = diagram;

//To Perform the Redo action in the Diagram
SfDiagram diagram = new SfDiagram(); 
diagram.Redo(); 
this.Content = diagram;

BringToFront and SendToBack

The ‘BringToFront’ is used to visually move the selected elements to the front of all other overlapped elements.

The ‘SendToBack’ visually moves the selected elements behind all other overlapped elements.

//Bring it to the front
SfDiagram diagram = new SfDiagram(); 
diagram.BringToFront(); 
this.Content = diagram;

// Send it To the Back
SfDiagram diagram = new SfDiagram(); 
diagram.SendToBack();  
this.Content = diagram;

BringToFront and SendToBack in Xamarin.forms diagram

BringForward and SendBackward

The ‘BringForward’ visually moves the selected element over the nearest overlapping element.

The ‘SendBackward’ visually moves the selected elements behind the underlying element.

// Brings it Forward
SfDiagram diagram = new SfDiagram(); 
diagram.BringForward();
this.Content = diagram;

// Send it Backward
SfDiagram diagram = new SfDiagram(); 
diagram.SendBackward(); 
this.Content = diagram;

BringForward and SendBackward in Xamarin.forms diagram

How to enable or disable the context menu?

By default, the diagram comes with a context menu that will be displayed long press the node or connector in the diagram control, which as a button(option) to cut, copy, delete and paste option. The display of context menu can be disabled by setting Visibility property of the ContextMenuSettings class to false. The below code illustrates the same. By default, value of context menu enable in diagram control.

<sfDiagram:SfDiagram  VerticalOptions="FillAndExpand" x:Name="diagram" >
     <sfDiagram:SfDiagram.ContextMenuSettings>
          <sfDiagram:ContextMenuSettings Visibility="False">
          </sfDiagram:ContextMenuSettings>
      </sfDiagram:SfDiagram.ContextMenuSettings>
</sfDiagram:SfDiagram>
SfDiagram diagram = new SfDiagram();
diagram.ContextMenuSettings.Visibility = false;
this.Content = diagram;

ZoomFactor

Supports customizing the zoom level of the diagram control. You can set the ZoomFactor of the diagram control. The following code example explains how to apply ZoomFactor.

<sfDiagram:SfDiagram  VerticalOptions="FillAndExpand" x:Name="diagram" ZoomFactor="0.4"/>
SfDiagram diagram = new SfDiagram();
diagram.ZoomFactor = 0.4f;
this.Content = diagram;

Cut

To cut the selected node or connector items from the diagram, use the Cut method. To cut the selected items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram();
Node node = new Node {Width = 200, Height = 200, OffsetX = 100, OffsetY = 100 };
diagram.AddNode(node);
diagram.Select(node);
diagram.Cut();
this.Content = diagram;

Copy

To copy the selected the node or connector items from the diagram, use the Copy method. To copy the selected items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram();
Node node = new Node {Width = 200, Height = 200, OffsetX = 100, OffsetY = 100 };
diagram.AddNode(node);
diagram.Select(node);
diagram.Copy();
this.Content = diagram;

Paste

To cut or copy the selected node or connector items, use the Paste method. To paste the cut or copy the selected items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram();
Node node = new Node {Width = 200, Height = 200, OffsetX = 100, OffsetY = 100 };
diagram.AddNode(node);
diagram.Select(node);
diagram.Copy();
diagram.Paste();
this.Content = diagram;

Delete

To delete the selected node or connector items from the diagram, use the Delete method. To delete the selected items in the diagram, use the following code snippet.

SfDiagram diagram = new SfDiagram();
Node node = new Node {Width = 200, Height = 200, OffsetX = 100, OffsetY = 100 };
diagram.AddNode(node);
diagram.Select(node);
diagram.Delete();
this.Content = diagram;

ZoomEnd

The ZoomEnd event will be triggered while you zoom in or zoom out the ‘Diagram’ control. The following code example explains how to create a ZoomEnd Event.

<sfDiagram:SfDiagram  VerticalOptions="FillAndExpand" x:Name="diagram" ZoomEnd="diagram_ZoomEnd"/>
SfDiagram diagram = new SfDiagram();
diagram.ZoomEnd += Diagram_ZoomEnd;
this.Content = diagram;

private void Diagram_ZoomEnd(object sender, ZoomEndEventArgs e)
{
    var items = e.IsPinching;
}

DiagramClicked

The ‘DiagramClickedEvent’ will be triggered when you click the ‘Diagram’ page. The following code example explains how to create a DiagramClickedEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" DiagramClicked="Diagram_DiagramClicked"/>
SfDiagram diagram = new SfDiagram();
diagram.DiagramClicked += Diagram_DiagramClicked; 
this.Content = diagram;

private void Diagram_DiagramClicked(object sender, DiagramClickedEventArgs args)
{
    var items = args.Item;
}

ItemAdded

The ‘ItemAddedEvent’ will be triggered when the node or connector will be added to the ‘Diagram’.The following code example explains how to create a ItemAddedEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" ItemAdded="Diagram_ItemAdded"/>
SfDiagram diagram = new SfDiagram();
diagram.ItemAdded += Diagram_ItemAdded;
this.Content = diagram;

private void Diagram_ItemAdded(object sender, ItemAddedEventArgs args)
{
    Node node = (Node)args.Item;
}

DragEnd

The ‘DragEndEvent’ will be triggered when the node or connector will be dragged from the one place to another place of the ‘Diagram’ page. The following code example explains how to create a DragEndEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" DragEnd="Diagram_DragEnd"/>
SfDiagram diagram = new SfDiagram();
diagram.DragEnd += Diagram_DragEnd;
this.Content = diagram;

private void Diagram_DragEnd(object sender, DragEndEventArgs args)
{
    Node node = (Node)args.Item;
}

DiagramObjectDeleted

The ‘DiagramObjectDeletedEvent’ will be triggered when you delete the node or connector from the‘Diagram’ page. The following code example explains how to create a DiagramObjectDeletedEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" DiagramObjectDeleted="Diagram_DiagramObjectDeleted"/>
SfDiagram diagram = new SfDiagram();
diagram.DiagramObjectDeleted += Diagram_DiagramObjectDeleted; 
this.Content = diagram;

private void Diagram_DiagramObjectDeleted(object sender, DiagramObjectDeletedEventArgs args)
{
    Node node = (Node)args.Item;
}

ResizeEnd

The ‘ResizeEndEvent’ will be triggered when the node or connector is resizing. The following code example explains how to create a ResizeEndEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" ResizeEnd="Diagram_ResizeEnd"/>
SfDiagram diagram = new SfDiagram();
diagram.ResizeEnd += Diagram_ResizeEnd;
this.Content = diagram;  

private void Diagram_ResizeEnd(object sender, ResizeEndEventArgs args)
{
    Node node = (Node)args.Item;
}

ItemLongPressed

The ‘ItemLongPressedEvent’ will be triggered when long pressing the node or connector items. The following code example explains how to create a ItemLongPressedEvent trigger.

<diagram:SfDiagram x:Name="diagram" VerticalOptions="FillAndExpand" ItemLongPressed="Diagram_ItemLongPressed" />
SfDiagram diagram = new SfDiagram();
diagram.ItemLongPressed += Diagram_ItemLongPressed;
this.Content = diagram;   

private void Diagram_ItemLongPressed(object sender, ItemLongPressedEventArgs args)
{
    Node node = (Node)args.Item;
}

NOTE

Diagram supports zooming with custom option in Xamarin.Forms.Android and Xamarin.Forms.iOS alone.
You can also explore our Xamarin Diagram example to understand how to present and manipulate data.