How to Specify What Shape ViewModel is Instantiated on Toolbox Drag & Drop

2 posts, 1 answers
  1. Michael
    Michael avatar
    26 posts
    Member since:
    Oct 2014

    Posted 15 Jan 2015 Link to this post


    I have a diagram to which is bound an implementation of ObservableGraphSourceBase<>.  I have several implemetations of node view models which all ultimately inherit from NodeViewModelBase.  The following provides an indicator of the node and graph view models:

    public class ColorViewModel : NodeViewModelBase {
        public string Label  { get;set;}  
        public bool IsEditable {get;set;
    public class RedViewModel : ColorViewModel {    }
    public class BlueViewModel : ColorViewModel {    }
    public class RainbowViewModel : ObservableGraphSourceBase<ColorViewModel, LinkViewModelBase<ColorViewModel>> { }

    Many of the shapes in the diagram are being populated when the RainbowViewModel is populated and bound to the diagram.  So I create RedViewModel and BlueViewModel objects and bind them to the diagram and they display fine (a template and style selector are also used to select the appropriate display).  I also have a Diagram ToolBox from which the user can drag and drop additional shapes, these additional shapes are for the user to enter text (e.g. for comment boxes).  So far so good.  

    When the user drags and drops a shape from the ToolBox onto the diagram, the type of view model that is instantiated is a ColorViewModel, because this is the type of view model declared with the ObservableGraphSourceBase.  But, I only want the dragged and dropped shapes to allow for text editing.  So what I end up doing is the following: when a RedViewModel or BlueViewModel is instantiated, I set the IsIEditable flag to false.  But what I would prefer is to do is have another view model, say:

    public class CommentViewModel : ColorViewModel
         // properties to support text formatting

    But how to I enable instantiation of a CommentViewModel when a shape is dragged and dropped from the ToolBox? recall the implementation of ObservableGraphSourceBase is declared with the base view model (i.e. the RainbowViewModel). From the documentation (Custom Tool Box , about half way down), it would seem the approach is using an event handler such as 

    private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
        e.Shape.Content = new CommentViewModel();

    But is there a way to do this declaratively, and if not, is there a way to do this while still maintaining an MVVM approach?  Currently instantiation of any shape view model is being handled in the main view model and if possible I would like to maintain this.


  2. Answer
    Zarko avatar
    755 posts

    Posted 19 Jan 2015 Link to this post

    Hi Michael,
    If you're using an ObservableGraphSourceBase you can override the CreateNode method and create a CommentViewModel there:
    // This is called on paste and drop.
    public override object CreateNode(IShape shape)
        // Here you can create the view model that you want.
        NodeViewModelBase newItem = null;
        if (shape.Content != null)
            // This should be copy/paste
            newItem = base.CreateNode(shape) as NodeViewModelBase;
            newItem.Content = shape.Content;
            // This is drop
            newItem = new CommentViewModel();
            newItem.Content = "Something";
        return newItem;
    Please note that you can also use a SerializableGraphSourceBase and its Serialize and DeserializeNode methods to have a bigger(better) control over the creation and initialization of the viewModels.
    As for the Custom Tool Box article - this is an easy way to transfer information from the toolBox to the RadDiagram but you don't have to use it if you don't want to.
    I hope I was able to help you and if you have more questions please feel free to ask.


    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.

Back to Top