Create a custom instance from icons in RadDiagramToolBox

[Alaa]

I'm using RadDiagram for making a designer in our system.
I have three parts in my screen, (RadDiagram, RadDiagramToolBox and ToolBar).

What I have to display in my RadDiagramToolBox are icons (images for my custom shapes) For a reason, my custom shapes can not inherit from RadDiagramShape, That's Why the RadDiagram didn't accept my custom shapes and I made MyDesigner which is inhering from RadDiagram, and override the this.Drop += MyDesigner_Drop;

To do this I used this hierarchy http://www.telerik.com/forums/raddiagramtoolbox-xaml-example#IUr1zXo3zUq-9NytMbeamw '
as the following:
        <telerik:RadDiagramToolbox Grid.Column="0" Grid.RowSpan="3"
                                   Header="{Binding SelectedItem.Header, RelativeSource={RelativeSource Self}}"
                                   Visibility="{Binding IsChecked, ElementName=toolboxButton, Converter={StaticResource BooleanToVisibilityConverter}}">
            <telerik:RadDiagramToolboxGroup Header=" Charts ">
        
                <telerik:RadDiagramToolboxItem Name="TimeChartIcon" Background="Transparent">
                    <telerik:RadDiagramShape Name="TimeChartIcon1" Background="Transparent" BorderBrush="Transparent">
                        <Image Source="/Fathom.TestDiagram;component/Images/TimeChartIcon.png"                    
                               Stretch="UniformToFill"
                               Name="TimeChartIcon2"/>
                    </telerik:RadDiagramShape>
                </telerik:RadDiagramToolboxItem>

      <telerik:RadDiagramToolboxItem Background="Transparent">
                <telerik:RadDiagramShape Name="ValueChartIcon" Background="Transparent" BorderBrush="Transparent">
                        <Image Source="/Fathom.TestDiagram;component/Images/ValueChartIcon.png"                    
                               Stretch="Fill"/>
                    </telerik:RadDiagramShape>
                </telerik:RadDiagramToolboxItem>
   </telerik:RadDiagramToolboxGroup>
            
            <telerik:RadDiagramToolboxGroup Header=" Others "/>
        </telerik:RadDiagramToolbox>

and in MyDesigner_Drag I used this http://www.telerik.com/forums/raddiagramtoolbox-drag-drop#trdWTLlUNEKga8H6yFFsqQ
and I added these lines of code after Admin Tina's codes:
              

                    droppedShape.Background = Brushes.Transparent;                  <br>                    droppedShape.Position = e.GetPosition(this);<br>                    droppedShape.BorderBrush = Brushes.Transparent;<br>                    droppedShape.BorderThickness = new Thickness(2);<br>                    droppedShape.Padding = new Thickness(0);<br>                    this.Items.Add(droppedShape);

What I got is, I can drag the RadDiagramShape  which contains an image  from RadDiagrmToolBox and dropped it as a RadDiagramShape contains the same image inside a RadDiagramShape. (How I could have the image in the new dropped instance?)
But What I want is, I want to check inside the MyDesigner_Drag event any info leads me to know the custom shape that the user has dragged and dropped to create an instance from it. Like (Name or Content->Image source)
I could see that item.Content is an image but I couldn't access to Name or Image Source and I couldn't see the name or source of the image that I hard-coded in Xaml code in debug mode!!

I really need your help.
Thank You.

[Petar Mladenov]

Hi Alaa,

Please check out our Diagram CustomSettingsPane example in our XAML SDK GitHub Repository. In it, both Diagram and the DiagramToolBox are bound to ViewModels.
In the ItemSerializing event handler:

private void DefaultSerializationService_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
        {
            if (e.Entity != null && e.Entity is RadDiagramShape)
            {
                var shape = e.Entity as RadDiagramShape;
                if (shape.Geometry != null)
                {
                    e.SerializationInfo["MyGeometry"] = (e.Entity as RadDiagramShape).Geometry.ToString();
                }
            }
        }

we serialize (save) the geometry of the Shape. In GraphSource.DeserializeNode we load the Geometry:

public override ShapeViewModel DeserializeNode(IShape shape, SerializationInfo info)
        {
            ShapeViewModel model = new ShapeViewModel()
            {
                 Geometry = GeometryParser.GetGeometry(info["MyGeometry"].ToString())
            };
            return model;
        }

You can use the same approach - find the Image,inside the shape, get its ImgSource, save it and load it in DeserializeNode. You can have Uri / String property in the ViewModel and your Templates can contain Image whose Source property is bound to the property of the ViewModel.

I hope this can help you move forward.

Regards,
Petar Mladenov
Telerik

 

 

[Alaa]

Thanks, this is what I did.

        void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
        {
            var shape = e.Entity as RadDiagramShape;
            if (shape != null)
            {
                var myShape = shape.DataContext as GalleryItem;
                if (myShape != null)
                    e.SerializationInfo["DataContent"] = myShape.Header;
            }
        }

        private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
        {
            var shape = e.Shape as RadDiagramShape;
            if (shape != null)
            {
                shape.Content = e.SerializationInfo["DataContent"].ToString();
             }
}