Multiple diagrams in one UserControl

I want to present two diagrams based on the same model data. Everything works when I only have one diagram in a UserControl, but when I add the second diagram, I can see the diagram render, but without any nodes, and the reference to the second one is null in the codebehind.



I set the Diagram.Model for both diagrams to the same object. Could this be the issue? Or is this scenario just not supported?

That should work just fine.

Just to confirm this, you can try modifying a sample in the demo. For example, duplicate the go:Diagram element in the StateCharter sample, give it a unique x:Name=“myDiagram2”, place it in Grid.Row=“2” and add a RowDefinition to the Grid, and add the following initialization statement:
myDiagram2.Model = model;

You’ll find that you can move or add or delete or rename nodes or links and see the same results in the other Diagram.

Are there any trace messages in the Visual Studio Output window?

i’ve set a breakpoint in the InitializeComponet method, and all the properties of the component after initialization are set to license key errors.



ex: Diagram.LicenseKey has not yet been set; running with an evaluation license, please set Diagram.LicenseKey to a runtime-license key for your application, Northwoods.GoXam license error, etc.



i’m running with an eval license. is this the issue i wonder?

That shouldn’t be a problem.

Are you using Silverlight or WPF? Version? GoXam version?

I’m using Silverlight… GoXam version is 1.1.0.3, runtime version showing v2.0.50727.



I was able to verify with one of the samples that there is no issue with two diagrams sharing the same model. Anyway, the problem starts much earlier, before binding the model to the diagram, way back in InitializeComponent().



The screenshot shows the situation with the failing object’s properties. Thanks very much for your help.



thought it might be useful to see the xaml



<UserControl.Resources>





go:LinkPanel





</go:LinkPanel>

























</UserControl.Resources>









<controls:TabControl x:Name=“DiagramTabControl”>

<controls:TabItem Header=“Diagram”>



<go:Diagram AllowZoom=“True” x:Name=“FacebookUsersDiagram” Padding=“5”

HorizontalContentAlignment=“Stretch”

VerticalContentAlignment=“Stretch”

Loaded=“DiagramLoaded”

NodeTemplate="{StaticResource NodeTemplate1}"

LinkTemplate="{StaticResource LinkTemplate1}"

Background=“White” InitialStretch=“Uniform” Stretch=“UniformToFill” AllowDelete=“False” AllowEdit=“False” AllowInsert=“False” AllowResize=“False” AllowRotate=“False”

>

go:Diagram.Layout



<golayout:ForceDirectedLayout x:Name=“forceDirectedLayout” DefaultSpringLength=“40” DefaultElectricalCharge=“600” />



</go:Diagram.Layout>



go:Node









</go:Node>

</go:Diagram>



</controls:TabItem>

<controls:TabItem Header=“Friends Feed”>

<data:DataGrid x:Name=“FriendsFeedDataGrid” Width=“840” Height=“400” AutoGenerateColumns=“False” GridLinesVisibility=“All”>

<data:DataGrid.Columns>

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>













</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTemplateColumn Header=“Message”>

<data:DataGridTemplateColumn.CellTemplate>







</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

</data:DataGrid>

</controls:TabItem>

<controls:TabItem Header=“Import Wizard”>



<cfr:Wizard x:Name=“Wiz” ActiveStepIndex=“0” Margin=“40” Header=“Import Wizard” SideBarButtonClicked=“Wizard_SideBarButtonClicked” ActiveStepChanged=“Wizard_ActiveStepChanged” ActiveStepChanging=“Wizard_ActiveStepChanging” FinishButtonClicked=“Wizard_FinishButtonClicked” NextButtonClicked=“Wizard_NextButtonClicked” PreviousButtonClicked=“Wizard_PreviousButtonClicked” >

cfr:Wizard.Steps

<cfr:WizardStep StepType=“Auto” Title=“Import Group” >













<go:Diagram AllowZoom=“True” x:Name=“ImportWizardVisualization” Padding=“5” Loaded=“ImportWizardDiagram_Loaded”

HorizontalContentAlignment=“Stretch”

VerticalContentAlignment=“Stretch”

NodeTemplate="{StaticResource NodeTemplate1}"

LinkTemplate="{StaticResource LinkTemplate1}"

Background=“White” InitialStretch=“Uniform” Stretch=“UniformToFill” AllowDelete=“False” AllowEdit=“False” AllowInsert=“False”

AllowResize=“False” AllowRotate=“False”>

go:Diagram.Layout

<golayout:ForceDirectedLayout x:Name=“ImportWizardForceDirectedLayout” DefaultSpringLength=“40” DefaultElectricalCharge=“100” />

</go:Diagram.Layout>

go:Node







</go:Node>

</go:Diagram>





</cfr:WizardStep>

<cfr:WizardStep StepType=“Auto” Title=“Import Selected Profiles” >







</cfr:WizardStep>

<cfr:WizardStep StepType=“Auto” Title=“Choose Owner Profile” >







</cfr:WizardStep>

<cfr:WizardStep StepType=“Auto” Title=“4. Verify” >







</cfr:WizardStep>

</cfr:Wizard.Steps>

</cfr:Wizard>

</controls:TabItem>

</controls:TabControl>















<Grid.RowDefinitions>







</Grid.RowDefinitions>















<data:DataGrid IsReadOnly=“True” AutoGenerateColumns=“False” HorizontalScrollBarVisibility=“Auto” SelectionMode=“Extended” VerticalScrollBarVisibility=“Auto” x:Name=“theDataGrid”>

<data:DataGrid.Columns>

<data:DataGridTemplateColumn>

<data:DataGridTemplateColumn.CellTemplate>







</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTemplateColumn Header=“Picture” >

<data:DataGridTemplateColumn.CellTemplate>







</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>



<data:DataGridTextColumn Header=“Name” Binding="{Binding FacebookUsername}"/>



</data:DataGrid.Columns>

</data:DataGrid>













<go:Overview x:Name=“DiagramOverview” Height=“200” Width=“250” />





































<controlsToolkit:BusyIndicator x:Name=“DiagramLoadBusyIndicator” BusyContent=“Please wait while we contact Facebook…” Margin=“24,-180,-24,180” FontSize=“14.667” />

First, your ImportWizardVisualization variable is null at the time you try to reference one of its properties (Model, in this case).

Second, you are looking at internal static members of the Diagram class, which has nothing to do with your situation.

You need to debug the code to see why ImportWizardVisualization is null.

But let me guess – it’s because it’s inside a TabItem that hasn’t been realized yet. Until the “Import Wizard” tab is chosen, the controls in it won’t have been created yet.

so yes, turns out the issue here was as follows:



InitializeComponent() uses FindControl() to initialize codebehind references to objects defined in xaml, and FindControl() does not find objects located within templated control child hierarchies.



there are a few solutions available, but the bottom line is that you have to initialize your templated child (in this case my go:diagram) on your own.



the method i chose was to listen to the <go:diagram Loaded=""/> event, which i defined as such



private void ImportWizardDiagram_Loaded(object sender, RoutedEventArgs e)

{

ImportWizardVisualization = (Northwoods.GoXam.Diagram)sender;

ImportWizardVisualization.Model = FacebookUsersDiagram.Model;

}



this is a naive implementation just to prove the concept, but it works. tweaks will have to involve dealing with propagating changes to the model, which will occur outside this event handler.



thanks for all your help Walter.

best regards