Set Image Icon in code

Hi Jake,

I have implemented the following MainPage class to create nodes & link.
Now I want to set Image icon for each node directly in this class, not be defining any xaml template.
Can I do this by using some property of GraphLinksModelNodeData?
Please reply me as soon as possible.

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

var model = new GraphLinksModel<MyNodeData, String, String, MyLinkData>();

model.Modifiable =

true;

model.HasUndoManager =

true;

model.NodesSource =

new ObservableCollection<MyNodeData>()

{

new MyNodeData() { Key="First", Color="Black", Location = new Point(400.0, 100.0)},

new MyNodeData() { Key="Second", Color="Black", Location = new Point(700.0, 100.0)}

};

model.LinksSource =

new ObservableCollection<MyLinkData>()

{

new MyLinkData() { From="First", To="Second" }

};

myDiagram.Model = model;

}

}

public class MyNodeData : GraphLinksModelNodeData<String>

{

public String Color

{

get { return _Color; }

set {

if (_Color != value) {

String old = _Color;

_Color =

value;

RaisePropertyChanged(

"Color", old, value);

}

}

}

private String _Color = "White";

}

public class MyLinkData : GraphLinksModelLinkData<String, String>

{

// nothing to add

}

public class TextImageSourceConverter : Converter

{

public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

return new BitmapImage(new Uri("http://www.goxam.com/go/beatpaths/" +

(value ??

"NE").ToString() + "_logo-50x50.png"));

}

}

You do need to specify a DataTemplate for the nodes, because the default Diagram.NodeTemplate does not include an Image. And it is far easier to do so in XAML than it is in code.

You can use something like what the BeatPaths sample uses, but if the data property is a complete URL, you don’t need to use a converter.

For example, let’s say your node data class is:
public class SimpleData : GraphLinksModelNodeData {
public String Src { get; set; } // should be the URL of an image
}

And you create instances of this like:
myDiagram.NodesSource = new ObservableCollection() {
new SimpleData() { Src=“http://placekitten.com/80/50” },
new SimpleData() { Src=“http://placekitten.com/80/60” },
};

Then your node template could be:


And the use would be:
<go:Diagram x:Name=“myDiagram” NodeTemplate={StaticResource NodeTemplate}" … />

Hi,

I have modified my dummy application, as you specified in your previous reply.
But even then, it’s not displaying images with node.
Please have a look below & let me know if there is anything wrong:

MainPage.xaml code:

<

UserControl x:Class=“Minimal.MainPage”



xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation



xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml



xmlns:go=“clr-namespace:Northwoods.GoXam;assembly=Northwoods.GoSilverlight” mc:Ignorable=“d” xmlns:d=“http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=“http://schemas.openxmlformats.org/markup-compatibility/2006” d:DesignHeight=“270” d:DesignWidth=“390” xmlns:sdk=“http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”>



<FrameworkElement.Resources>



<DataTemplate x:Key=“MyNodeTemplate”>



<StackPanel go:Node.Location="{Binding Path=Data.Location}">


<TextBlock Text="{Binding Path=Data.Key}"

HorizontalAlignment="Center" />

<Image Source="{Binding Path=Data.Flag}" />

</StackPanel>

</DataTemplate>

</FrameworkElement.Resources>

<Grid>

<go:Diagram x:Name="myDiagram"

NodeTemplate="{StaticResource MyNodeTemplate}">

</go:Diagram>

</Grid>

</

UserControl>

MainPage.xaml.cs code:

using

System;


using

System.Collections.ObjectModel;


using

System.Globalization;


using

System.IO;


using

System.Reflection;


using

System.Windows;


using

System.Windows.Controls;


using

System.Windows.Media.Imaging;


using

Northwoods.GoXam;


using

Northwoods.GoXam.Model;

namespace

Minimal

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

var model = new GraphLinksModel<MyNodeData, String, String, MyLinkData>();

model.Modifiable =

true;

model.HasUndoManager =

true;

model.NodesSource =

new ObservableCollection<MyNodeData>()

{

new MyNodeData() { Key="First", Location = new Point(700.0, 100.0), Flag = "http://placekitten.com/80/50"},

new MyNodeData() { Key="Second", Location = new Point(900.0, 100.0), Flag = "http://placekitten.com/80/60"}

};

model.LinksSource =

new ObservableCollection<MyLinkData>()

{

new MyLinkData() { From="First", To="Second" }

};

myDiagram.Model = model;

}

}

public class MyNodeData : GraphLinksModelNodeData<String>

{

public string Flag { get; set; }

}

public class MyLinkData : GraphLinksModelLinkData<String, String>

{

// nothing to add

}

}

So this is a Silverlight app? If so, did you host it on the same web site as where the images originate, for security reasons? The BeatPaths sample has an explanatory note.

Hi,

Thanks for the hint.
Now both imaged has been dispalyed on nodes.