1. Home
  2. Forum
  3. Xamarin.Forms
  4. Image Binding

Image Binding

Hi, 

Is it possible to create a custom node template that takes a data object containing an image URL, so that the node is an image and some text?

Thank you! 



3 Replies
GR Gayathri Ramalingam Syncfusion Team February 15, 2022 02:41 PM UTC

Hi Raymond, 
 
Yes. We can customize the entire node with our own customized design using Template property. Please find the UG documentation from below, 
 
var template = new DataTemplate(() => 
{ 
      StackLayout stacklayout = new StackLayout(); 
      stacklayout.WidthRequest = 200; 
      stacklayout.HeightRequest = 230; 
      stacklayout.VerticalOptions = LayoutOptions.FillAndExpand; 
      stacklayout.HorizontalOptions = LayoutOptions.FillAndExpand; 
      stacklayout.Orientation = StackOrientation.Vertical; 
      Image image = new Image(); 
      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 = 10,           
            HorizontalOptions = LayoutOptions.CenterAndExpand, 
            VerticalOptions = LayoutOptions.CenterAndExpand 
      }; 
      stacklayout.Children.Add(label); 
      return stacklayout; 
}); 
//Initialize node with template. 
Node node = new Node() { Width = 200, Height = 230, OffsetX = 300, OffsetY = 60, Template = template }; 
node.Style.Brush = new SolidBrush(Color.Transparent); 
node.Style.StrokeBrush = new SolidBrush(Color.Transparent); 
diagram.AddNode(node); 
 
We have prepared sample based on your information and it can be downloaded from below link 
 
Could you please try the above suggested solution and let us know whether it meets your requirement or not?   
 
With Regards, 
Gayathri R 


RD Raymond Dillon February 22, 2022 06:10 PM UTC

Hi,

I’ve added a binding for the image source when applying a data source to the diagram and some data binding for the text.

The data binding for the text comes through OK but the image does not (its a remote URL for the data binding).

Is there an issue with the control or a particular way to apply data binding? 


GR Gayathri Ramalingam Syncfusion Team February 23, 2022 02:31 PM UTC

Hi Raymond, 
 
We have tried to reproduce the issue “The image is not displayed while binding to node in Diagram”, but its working fine as we expected. 
 
We have created a simple sample based on the provided information and the sample can be downloaded from the below link.  
 
Please find the output screenshot from below, 
 
 
 
We have changed the appearance of the node by set the image control and it’s working fine if the stream getting properly from URL link. Could you please provide the simple/ modify the sample with URL which the issue could be reproduced? It will be useful for us to investigate further on this and assist you with the better solution at the earliest.  
 
With Regards, 
Gayathri R 
 


Loader.
Up arrow icon