DiagramNodeTool template

Hi

Could you tell me how can I create and bind a template for DiagramNodeTool?

I tried to do it on my own this way but it does not seem to work:

  <ms:DiagramToolBox Style="{StaticResource ResourceKey=DiagramToolBoxStyle}" DockPanel.Dock="Left" Width="150" MouseMove="SurfaceOrToolbox_MouseMove">
            <ms:DiagramToolBox.Resources>
                 <CollectionViewSource x:Key="ActionToolsView" Source="{Binding Source={StaticResource ResourceKey=ActionTools}}">
                    <CollectionViewSource.SortDescriptions>                                                                                                                             <ObjectDataProvider x:Key="ActionTools" ObjectType="{x:Type local:ActionToolsProvider}" MethodName="GetActionTools"></ObjectDataProvider>
                        <ComponentModel:SortDescription PropertyName="GroupID" Direction="Ascending" />
                        <ComponentModel:SortDescription PropertyName="DisplayName" Direction="Ascending" />
                    </CollectionViewSource.SortDescriptions>
                </CollectionViewSource>
                <DataTemplate x:Key="DiagramActionToolTemplate" DataType="ActionTool">
                       <ms:DiagramNodeTool Margin="10,10,10,0" Width="85" Builder="{ms:BuilderType local:ActionBuilder}"
                            PreviewMouseDown="ActionBuilderMouseDown">
                            <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
                            <Rectangle HorizontalAlignment="Right" Width="80" Height="20" />
                            <WrapPanel  HorizontalAlignment="Center" VerticalAlignment="Center" >
                                <Image Width="15" Height="15" Margin="0,0,5,0" Tag="{Binding Path=ID}" Initialized="Image_Initialized"/>
                                <Label Width="80" FontSize="9" HorizontalAlignment="Right" VerticalAlignment="Center" Content="{Binding Path=DisplayName}"/>
                            </WrapPanel>
                        </Grid>
                    </ms:DiagramNodeTool>
                </DataTemplate>
            </ms:DiagramToolBox.Resources>
            <ms:DiagramToolBoxGroup Name="DiagramActionsToolBoxGroup" Header="{x:Static p:Resources.cActions}"
                                    ItemsSource="{Binding Source={StaticResource ActionTools}}"
                                    ItemTemplate="{DynamicResource DiagramActionToolTemplate}"
                                    Loaded="DiagramToolBoxGroup_Loaded">
            </ms:DiagramToolBoxGroup>
        </ms:DiagramToolBox>

I get the collection from ObjectDataProvider method, but does not look like I want it to look like in my DataTemplate.

Thanks in advance for any tips

Przemo

Hello Przemo

Could you please send us a sample of what you have so far so I can more easily solve this issue. You can attach a zip file to a forum post by going to the options tab, or you could send it to jason@mindscape.co.nz.

Cheers
 - Jason 

 I've attached a zip file with 4 files inside:

ActionTool.cs - a class which inheritates from ActionNodeTool and has some properties of my own which I want to use through binding when I insert every action tool in a DiagramToolBoxGroup

ActionToolsProvider.cs - only one method in here which I use to get all ActionTools (it works fine, I think)

DiagramDesigner.xaml - here I insert DiagramToolBox with two Groups, one of which I want to fill 'by hand' and the other using dataBinding and the template which you can see in DiagramToolBox.Resources

DiagramDesigner.xaml.cs - in this file the only methods that I use are 3 at the end. The only important one is the last one which refreshes DiagramToolBox collection through binding. But it also works fine - I get all of the elements that I want but for some reason they do not inheritate the DataTemplate which I set (at least I think that I do it) in second DiagramToolBoxGroup (ItemTemplate="{DynamicResource DiagramActionToolTemplate}").

Where am I doing something wrong? Any ideas?

Here is an example with a ListBox on which everything that I've done so far is based -> http://msdn.microsoft.com/en-us/magazine/cc163299.aspx 

Cheers
 Przemo 

Hello Przemo

Thanks for the code, it helped a lot. From what I can see, the main problem is that the generic style for DiagramToolBoxGroup was ignoring the ItemTemplate property. I have fixed this at our end and an update will be available through the nightly builds from tomorrow the 9th of August.

Also, your ActionTool does not need to extend the DiagramNodeTool class. The DataTemplate that you are applying to the ActionTool objects contains the DiagramNodeTool that will be displayed. So ActionTool only needs to be an object that simply holds the data that you need for the bindings.

Let me know if there are still issues after you install tomorrows nightly builds.

 Hi

So what about this build from 9th of August? :P

Cheers

Our upload process had a bit of a hiccup that night.  If you check back now you should see a 10 August build.

I'm really grateful for your help so far, but there still remains one small (at least I think it's small) issue.

I want to load small icons to my toolbox items Contents and also to their CursorVisuals. I've attached a DiagramDesigner.xaml file in wich in line 160 begins my template. As you can see there, I set Tag property of two images (one in CursorVisual, the other in Content)  to the same property (ImageIndex) of my ActionTool class. Then I use this Tag property in method Image_Initialized which is connected with both images Initialized events. I've also attached DiagramDesigner.xaml.cs file so that you can check this method (it starts in line 520).

Everything works fine in Contents part but in CursorVisuals part my Tag property is always 'null' and therefore I always get the same image in dragged rectangle (you can see that in prtscr.png).

Can you help me with this problem?

Cheers,

Przemo

Hello Przemo

As far as I can tell, bindings will not work within the cursor visual. I think this is partly because the cursor visual is not added to the visual tree when the tool is loaded, and partly because it is added to the adorner layer.

Here is what I suggest for the cursor visual:

 - Set the Tag property of the DiagramNodeTool using the same binding.
 - Attach an event handler to the DiagramNodeTool.Loaded event.
 - In the loaded event handler, you can cast the sender into a DiagramNodeTool.
 - From here you can get the Tag property of the tool which will be the image index.
 - Now build up the cursor visual in C#. Your cursor visual simply has a Grid, Rectangle and Image, so this should be fairly easy.
 - Here you can use the image index to set the source of the image you build. This will be the same logic you currently have.
 - Then set the CursorVisual property of the DiagramNodeTool at the end of this method.
 - Now you can remove the CursorVisual from the xaml.

I have tested this approach and found that the Tag property was set correctly and setting the CursorVisual in C# worked well.

For the normal tool content, you can either continue using your current approach, or you could also build this in C# in the same loaded event hander. Which ever works best for you.

Let us know how it goes
 - Jason 

 It's ok, thanks a lot :)