DataTemplateDictionary Question

jsummerour · July 6, 2010, 4:41pm

So, I want to use a DataTemplateDictionary for both Nodes and Links for my GoXam Diagram.

However, I have the templates that make up the complete DataTemplateDictionary defined in separate files (a few templates for each kind of node):

I defined the DataTemplateDictionary and bring the templates into the ResourceDictionary as shown below:

[code]<ResourceDictionary>

<go:DataTemplateDictionary x:Key=“NodeTemplateDictionary”/>

<go:DataTemplateDictionary x:Key=“LinkTemplateDictionary”/>

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source=“BasicNodes/BasicStyles.xaml” />
<ResourceDictionary Source=“BasicNodes/InputOutputBarStyles.xaml”/>
<ResourceDictionary Source=“BasicNodes/BasicLinkStyles.xaml”/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

[/code]

And my diagram can see the templates just fine (because I use them in a Palette). So, I know they’re getting pulled in correctly.

However, when go to drag a node from the Palette to the Diagram, the only thing I see left on the diagram is the following string:

“Northwoods.GoXam.PartManager+PartBinding”

It’s like it can’t resolve the template from within the DataTemplateDictionary. I know the templates within the dictionary work, because I can see them just fine when I don’t use the dictionary, and set the NodeTemplate explicitly on the Diagram.

Here is my Diagram xaml:

[code]<go:Diagram
GridVisible=“False”

x:Name=“myDiagram”
AllowDrop=“True”
BorderThickness=“1”
HorizontalContentAlignment=“Center”
VerticalContentAlignment=“Center”
NodeTemplateDictionary="{DynamicResource NodeTemplateDictionary}"
LinkTemplateDictionary="{DynamicResource LinkTemplateDictionary}">
</go:Diagram>[/code]

Also, I add the templates to the DataTemplateDictionary from within the code behind as shown:

public MainWindow() { this.InitializeComponent(); var model = new GraphLinksModel<NodeBase, String, String, LinkBase>(); // Build up the DataTemplate dictionary dynamically: var nodetemplates = Diagram.FindResource<DataTemplateDictionary>(this, "NodeTemplateDictionary"); nodetemplates.Add("Input", Diagram.FindResource<DataTemplate>(myDiagram, "InputBarTemplate")); nodetemplates.Add("Output", Diagram.FindResource<DataTemplate>(myDiagram, "OutputBarTemplate")); nodetemplates.Add("BasicPaletteNode", Diagram.FindResource<DataTemplate>(myDiagram, "BasicPaletteNodeTemplate")); nodetemplates.Add("BasicNode", Diagram.FindResource<DataTemplate>(myDiagram, "BasicNodeTemplate")); ... }

So, does anyone have any idea why the nodes can’t resolve the correct template in my situation? I know I must be missing something silly.

I think GoXam is incredibly well written, has an easy to use API, and seems very stable. I’m glad I found it! As soon as I can resolve this problem I will be rockin-n-rollin’!

Thanks guys!

Jason

jsummerour · July 6, 2010, 4:49pm

So, I guess my overarching question is, how do you properly create a DataTemplateDictionary with styles defined in separate files? :)

Thanks again!

Jason

walter · July 6, 2010, 8:51pm

Since there was no FindResource method in Silverlight 2, we implemented one. And we decided to make it public.

Then Silverlight 3 added merged resources, but we forgot to update the FindResource method. Sorry about that.

Here you go:

[code] public static T FindResource(FrameworkElement start, String name) where T : class {
FrameworkElement fe = start;
while (fe != null) {
T result = LookupResource(fe.Resources, name);
if (result != null) return result;

    fe = fe.Parent as FrameworkElement;
  }
  if (Application.Current != null) {
    T result = LookupResource<T>(Application.Current.Resources, name);
    return result;
  }
  return null;
}

private static T LookupResource<T>(ResourceDictionary rd, String name) where T : class {
  if (rd == null) return null;

  T result = rd[name] as T;
  if (result != null) return result;

  var merged = rd.MergedDictionaries;
  if (merged != null) {
    foreach (ResourceDictionary md in merged.Reverse()) {
      result = LookupResource<T>(md, name);
      if (result != null) return result;
    }
  }
  return null;
}[/code]

I hope this works for you.

Note: the WPF version of this static method just calls FrameworkElement.TryFindResource.

jsummerour · July 6, 2010, 10:37pm

Hi Walter! I appreciate the prompt reply.

So, I added these static methods to my MainWindow class, and updated the calls to FindResources as shown:

var nodetemplates = FindResource<DataTemplateDictionary>(myDiagram, "NodeTemplateDictionary"); nodetemplates.Add("BasicNode", FindResource<DataTemplate>(myDiagram, "BasicNodeTemplate")); nodetemplates.Add("FileNode", FindResource<DataTemplate>(myDiagram, "FileNodeTemplate"));

Whereas before, I was calling Diagram.FindResource(…)

Unfortunately, I’m seeing the same behavior.

So, I single stepped through the code, and I can see where ultimately when you step through all of the FrameworkElements in FindResource, the MyTestApp.MainWindow.Resources.MergedDictionaries does contain the Templates. Also, once it’s gone through the code adding all of the Templates to DataTemplateDictionary, I see that it contains the correct keys (e.g. BasicNode, FileNode, etc.), and the value is set to a System.Windows.DataTemplate object. However, it’s hard to see the content of the template.

Also, I’m looking at the value of myDiagram object after I’ve added the various resources, and I see that it’s NodeTemplateDictionary contains all of the entries that were previosuly added, as well as the templates (see debug output below).

Does the template object looked populated correctly to you?

So, I dunno! :) Any suggestions? Both methods you provided are definitely getting called, as I’m stepping through them.

Thanks Walter!

walter · July 6, 2010, 11:17pm

So you are saying that the DataTemplateDictionary for nodes is apparently initialized correctly now, unlike before.

But the appearance of the nodes is still not making use of any of these templates.

If you store a DataTemplate as the DataTemplateDictionary.Default, or as the Diagram.NodeTemplate, does it get used for all kinds of node data?

If so, it appears that the PartManager isn’t figuring out which template to use. Basically it needs to get the “category” of each node data.

What does NodeBase inherit from? If it doesn’t inherit from one of our predefined node data classes, you need to set the model.NodeCategoryPath property, or override PartManager.FindCategoryForNode method if you can’t get the category string via a property.

Or else there’s a problem with the data that is being dragged from the Palette. If your node data class doesn’t inherit from one of our predefined data classes, does it implement ICloneable? That way it will get copied when it’s dropped. And is the implementation of Clone() correct?

jsummerour · July 6, 2010, 11:40pm

Hi Walter,

Yes, it does seem that the DataTemplateDictionary is initialized correctly now, but the node appearance doesn’t make use of those templates.

Yes, If I just store the template as Diagram.NodeTemplate, then the nodes show up fine on the diagram. I’m just now switching over to using NodeTemplateDictonary because my nodes will all look different.

NodeBase inherits from GraphLinksModelNodeData

public class NodeBase : GraphLinksModelNodeData<String> {

...

}

The NodeBase serves as the base node that all of my custom nodes derive from (since it has several properties that all nodes will need).

Here’s the BasicNode classes:

[Serializable]

public class BasicNodeBase : NodeBase {

...

}

[Serializable]

public class BasicNode : BasicNodeBase {

...

}

Here’s my template for BasicNode:

[code]
<DataTemplate x:Key=“BasicNodeTemplate”>
<Grid go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
go:Part.SelectionAdorned=“True”
go:Part.SelectionAdornmentTemplate="{StaticResource OuterBasicSelectionAdornmentTemplate}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=“Auto” />
<RowDefinition Height=“Auto” />
<RowDefinition Height=“Auto” />
</Grid.RowDefinitions>

<Border Grid.Column=“0” Grid.Row=“1”

Background="{Binding Path=Data.Background}"

BorderThickness=“1” BorderBrush=“Black”

CornerRadius=“3” MinWidth=“140” MaxWidth=“200”>

<TextBlock HorizontalAlignment=“Center”

Foreground="{Binding Path=Data.Foreground}"

Text="{Binding Path=Data.Name}"

go:Part.TextEditable=“True”

FontWeight=“Bold”/>

</Border>

<StackPanel Grid.Column=“0” Grid.Row=“2”

HorizontalAlignment=“Center” Orientation=“Vertical”

go:Node.PortId=“Output” go:Node.LinkableFrom=“True” go:Node.ToSpot=“BottomSide”>

</StackPanel>

</Grid>

</DataTemplate>

[/code]

Here’s where I’m creating the BasicNode collection for the pallet, which also has problems displaying nodes correctly when using the NodeTemplateDictonary property, but works fine when using the NodeTemplate property.

public static ObservableCollection<BasicNodeBase> GenBasicNodes() { ObservableCollection<BasicNodeBase> basicNodes = new ObservableCollection<BasicNodeBase>() { new BasicNode() { Key="Basic", Name="Basic", Background="#FF95CAFD", Foreground="Black" }, new LiteralNode() { Key="Literal", Name="Literal", Background="#FF95CAFD", Foreground="Black" }, new CompareNode() { Key="Compare", Name="Compare", Background="#FF95CAFD", Foreground="Black" } }; return basicNodes; }

I hope this information helps! I agree…it’s like the PartManager isn’t figuring out which template to use. Is there a limit to the amount of subclassing that can be done from the GraphLinksModelNodeData class?

I’ll keep looking on my side…

Thanks again Walter!

walter · July 7, 2010, 12:00am

Do you set the Category property for each node data? You need to set it to something like “Input” or “BasicNode” or whatever key value you use in the DataTemplateDictionary.

jsummerour · July 7, 2010, 12:08am

Bam!!! That did it! :) That makes total sense too.

Thanks Walter! :)

jsummerour · July 7, 2010, 2:37pm

And by the way, I didn’t need the FindResource() and LookupResource() methods you provided for the NodeTemplateDictionary property to work correctly.

Best Regards!

Jason