How to load Diagram with image

1 min read

This article explains how to load an image with grid overlay in SfDiagram. In SfDiagram, there is no direct support for loading images. However, we can set a background image with grid overlay in SfDiagram.

Step 1:

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

Step 2:

Place image as the background of the SfDiagram control.

XAML

<Grid>
        <Image Source="xamarin.png" HeightRequest="500"/>
 
        <syncfusion:SfDiagram x:Name="diagram" BackgroundColor="Transparent">
                <syncfusion:SfDiagram.Nodes>
                    <syncfusion:NodeCollection>
                        <!--Initialize Node-->
                        <syncfusion:Node Width="200" Height="200" OffsetX="100" OffsetY="100">
                        </syncfusion:Node>
                    </syncfusion:NodeCollection>
                </syncfusion:SfDiagram.Nodes>
                <syncfusion:SfDiagram.PageSettings>
                    <syncfusion:PageSettings PageBackGround="Transparent" ShowGrid="True"  />
                </syncfusion:SfDiagram.PageSettings>
         </syncfusion:SfDiagram>
        
</Grid>

Note: Image control does not provide zooming support but we can perform zoom in SfDiagram control alone.

The sample that explains how to load an image with grid overlay in SfDiagram can be downloaded here.

Did you find this information helpful?

Yes

Comments (0)

How to load Diagram with image

Access denied