Create a custom instance from icons in RadDiagramToolBox

3 posts, 0 answers
  1. Alaa
    Alaa avatar
    27 posts
    Member since:
    Jun 2014

    Posted 16 Nov 2014 Link to this post

    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.

  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alaa
    Alaa avatar
    27 posts
    Member since:
    Jun 2014

    Posted 24 Nov 2014 in reply to Petar Mladenov Link to this post

    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();
                 }
    }
Back to Top