Hi,
I have recently installed GoSilverlight to analyse the feasibility for porting existing GoDiagram win based application to silverlight web based platform.
So I want to know how can I create a NodeTemplate in XAML, which should behave same as GoIconicNode? (means to support different images from resouces)
Please provide me a small sample code (easy to understand) for this, as I am new to Silverlight.
Thanks
This comes from the BeatPaths sample:
<DataTemplate x:Key="NodeTemplate">
<!-- the "Icon" gets the selection handle when the node is selected -->
<StackPanel go:Part.SelectionElementName="Icon" go:Part.SelectionAdorned="True">
<!-- the node data is just the team name string -->
<TextBlock Text="{Binding Path=Data}" HorizontalAlignment="Center" />
<!-- this creates the ImageSource by converting it from the team name -->
<Image x:Name="Icon"
Source="{Binding Path=Data,
Converter={StaticResource theTextImageSourceConverter}}"
Width="50" Height="50" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
You are going to need to learn about XAML, data binding, and models. Fortunately, from a learning perspective, you can learn that from many sources because it has nothing to do with GoXam or diagramming. In this case if you want to do things such as reposition the text label relative to the image, that’s a simple change in the XAML.
The XAML specific to diagramming consists mostly of attached properties that you put in the root element of the DataTemplate. These are attributes such as this common one:
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"I suggest you look at a lot of the XAML in the samples.
The primary attached properties that do not necessarily go on the root element of a DataTemplate are those relating to “ports”, because any FrameworkElement can be a “port”. (I.e. there’s no GoPort class.)
There are also a few GoXam-specific FrameworkElement-derived classes that you may use. For Links, you should use LinkPanel and LinkShape. For Nodes, you might use NodePanel and NodeShape, although often that is not necessary.
Hi,
I also did in the same way, but there are two issues:
Please provide me the solution using the following code:
MainPage.xaml:
<UserControl x:Class="Graph.MainPage"<?: prefix = o ns = "urn:schemas-microsoft-com:office:office" />
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:go="http://schemas.nwoods.com/GoXam">
<UserControl.Resources>
<DataTemplate x:Key="NodeTemplate">
<StackPanel go:Node.SelectionElementName="Node"
go:Node.SelectionAdorned="True"
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
go:Node.Movable="False"
go:Node.Resizable="False">
<TextBlock Text="{Binding Path=Data.Key}"/>
<Image Source="{Binding Path=Data.NodeImage}">
</Image>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="LinkTemplate">
<go:LinkShape Stroke="Black" StrokeThickness="1" />
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<go:Diagram Grid.Column="1"
x:Name="xDiagram"
BorderBrush="Blue" BorderThickness="1"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
NodeTemplate="{StaticResource NodeTemplate}"
LinkTemplate="{StaticResource LinkTemplate}"
/>
</Grid>
</UserControl>
MainPage.xaml,cs code:
public
partial class MainPage
{
public MainPage()
{
InitializeComponent();
showDiagram();
}
private void showDiagram()
{
var model = new GraphLinksModel<MyNodeData, String, String, MyLinkData>();
model.NodesSource =
new ObservableCollection<MyNodeData>()
{
new MyNodeData() {Key = "Alpha", Location = new Point(100.0, 400.0)},
new MyNodeData() {Key = "Beta", Location = new Point(1000.0, 600.0)},
new MyNodeData() {Key = "Gamma", Location = new Point(1200.0, 400.0)},
new MyNodeData() {Key = "Delta", Location = new Point(2200.0, 400.0)}
};
model.LinksSource =
new ObservableCollection<MyLinkData>()
{
new MyLinkData() { From="Alpha", To="Beta" },
new MyLinkData() { From="Beta", To="Gamma" },
new MyLinkData() { From="Gamma", To="Delta" }
};
xDiagram.Model = model;
}
public
class MyNodeData : GraphLinksModelNodeData<String>
{
public Image NodeImage
{
get
{
_image =
new Image();
//Depot.ico is an image, which I added `Images` folder under ClientBin
ImageSource source = new BitmapImage(new Uri("/Images/Depot.ico", UriKind.Relative));
_image.Source = source;
return _image;
}
}
private Image _image;
}
public class MyLinkData : GraphLinksModelLinkData<String, String>
{
}
It appears that there is a binding Type-mismatch. The value of Image.Source should be of type ImageSource, not Image which is the type of your MyNodeData.NodeImage property. You should have your data property return the BitmapImage.
What do you mean that all of the nodes and links “are moved to the top”? Are you saying that all of the nodes have the same Y coordinate position? That’s odd, because your Node.Location data binding looks OK to me.
Maybe you mean that it has scrolled down so that the Nodes with the lowest Y coordinate (400.0) are near the top edge of the viewport. That is probably happening because the Diagram.Panel.DiagramBounds do not include the point (0,0). [Check this with the debugger.]
If you always want to include the point (0, 0) in the diagram bounds, the most general solution would be to override DiagramPanel.ComputeDiagramBounds() to include that Point. But it would be easier not to have to subclass DiagramPanel.
Or you could specify the Diagram.Panel.FixedBounds (do this in a Diagram.TemplateApplied event handler). Or you could add an unbound unselectable transparent Node at that point.
Hi,
Second issue has been partially solved. I created a node at location (0,0), but how can I display in transparent mode, so that it should not be shown?
Image with node is still not displayed even after changing the code as per your previous reply:
public
class MyNodeData : GraphLinksModelNodeData<String>
{
public BitmapImage NodeImage
{
get
{
return new BitmapImage(new Uri("/Images/Depot.ico", UriKind.Relative));
}
}
}
If possible, then please run this sample at your end with any image & then reply me with correction.I guess you haven’t seen the section of the GoXamIntro talking about unbound nodes.
I haven’t tried this, but I would do something like:
<go:Diagram . . .>
. . .
<go:Node>
<Rectangle go:Node.Location="0 0" go:Part.Selectable="False" go:Part.LayoutId="None" />
</go:Node>
</go:Diagram>
Shape.Fill and Shape.Stroke default to null, causing the Rectangle not to have any appearance.
Regarding showing an image, it is a common debugging problem to try to get the references correct. The samples do demonstrate two different ways for you – loading images via the web and loading images that are embedded resources. There are many possible variations. I don’t know what is appropriate for you and I don’t know your configurations. If you are having difficulties, I suggest you search the web for clues and suggestions, since this problem is not specific to GoXam.
Hi,
It’s done.
Thanks