Problem when using bi-directional MVVM

[dilsah]

I am using MVVM in my project. Everything seems to be fine but when i move the diagram shapes, the connectors does not work properly. I've attached the screenshots of my problem. 1st picture is when drop the shapes into the diagram and the 2nd picture is when i move the shapes. The connectors does not come with the shape.

In the project i created my own Shape(inherits RadDiagramShape) and Link(inherits RadDiagramConnection and ILink<Shape>) and GraphSource(inherits IObservableGraphSource) classes.

This is how my GraphSource class looks like :

        private ObservableCollection<Shape> _items = new ObservableCollection<Shape>();
        public IEnumerable Items
        {
            get
            {
                return _items;
            }
        }

        private ObservableCollection<Link> _links = new ObservableCollection<Link>();
        public IEnumerable<ILink> Links
        {
            get
            {
                return _links;
            }
        }

        public void AddLink(ILink link)
        {
            _links.Add((Link) link);
        }

        public void AddNode(object node)
        {
            _items.Add((Shape)node);
        }

        public ILink CreateLink(object source, object target)
        {
            return new Link() { Source = (Shape)source, Target = (Shape)target };
        }
//The problem is in the source shape, not in the target shape.

        public object CreateNode(IShape shape)
        {
            return new Shape() { ShapeType = (shape as Shape).ShapeType };
        }

        public bool RemoveLink(ILink link)
        {
            return _links.Remove((Link)link);
        }

        public bool RemoveNode(object node)
        {
            return _items.Remove((Shape)node);
        }

The xaml file where the diagram and shapes are located :


                    <Grid Grid.Row="1" Grid.Column="1"
                            Background="{Binding SelectedColor, ElementName=BackgroundColorEditor, Converter={StaticResource colorToBrushConverter}}">
                        <telerik:RadDiagram x:Name="diagram" MinWidth="500" Margin="-1 -1 0 0"
                                GraphSource="{Binding GraphSource}"
                                ConnectionStyle="{StaticResource ConnectionStyle}"
                                extensions:DiagramExtensionProperties.ShouldDetachConnections="True"
                                IsBackgroundSurfaceVisible="{Binding IsGridVisible, Mode=TwoWay}"
                                IsSnapToGridEnabled="{Binding IsSnapEnabled, Mode=TwoWay}"
                                primitives:GraphPaper.CellSize="{Binding CellSize}"
                                primitives:GraphPaper.LineStroke="{Binding SelectedColor, ElementName=GridColorEditor, Converter={StaticResource colorToBrushConverter}}"
                                ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                                ScrollViewer.VerticalScrollBarVisibility="Hidden" SnapX="{Binding SnapX, Mode=TwoWay}"
                                SnapY="{Binding SnapY, Mode=TwoWay}" Zoom="{Binding ZoomLevel, Mode=TwoWay}">
                            <primitives:ItemInformationAdorner.AdditionalContent>
                                <this:SettingsPane />
                            </primitives:ItemInformationAdorner.AdditionalContent>
                        </telerik:RadDiagram>
                    </Grid>

                    <extensions:RadDiagramToolbox x:Name="toolbox" HorizontalAlignment="Right" Margin="0 0 -1 -1"
                            Width="330" Grid.Row="1" Grid.Column="1" ItemsSource="{Binding GalleryItems}"
                            ItemTemplate="{StaticResource ToolboxTemplate}" Title="Gallery"
                            Header="{Binding SelectedItem.Header, RelativeSource={RelativeSource Self}}"
                            Visibility="{Binding IsChecked, ElementName=toolboxButton, Converter={StaticResource BooleanToVisibilityConverter}}" />

And finally the ViewModel :

        private GraphSource _graphSource = null;

        public GraphSource GraphSource
        {
            get 
            {
                if (_graphSource == null)
                    _graphSource = new GraphSource();
                return _graphSource; 
            }
            set 
            {
                if (_graphSource != value)
                {
                    _graphSource = value;
                    RaisePropertyChanged(() => GraphSource);
                }
            }
        }

        private IEnumerable _galleryItems = null;
        public IEnumerable GalleryItems
        {
            get
            {
                if (_galleryItems == null)
                    _LoadItems();
                return _galleryItems;
            }
        }

        private void _LoadItems()
        {
            HierarchicalGalleryItemsCollection items = new HierarchicalGalleryItemsCollection();
            items.Clear();
            Gallery galery = new Gallery(){ Header = "Shapes" };
            galery.Items.Add(new GalleryItem("My Shape", new Shape() { ShapeType = ShapeType.MyShape }));
            items.Add(galery);
            _galleryItems = items;
}

[Alex Fidanov]

Hello,

 If you are using MVVM approach, you should not be creating visual objects (in your case Shape which inherits RadDiagramShape) in your view models. I am attaching a very simple mvvm implementation with the RadDiagram control and creating connections work as expected. If you are still experiencing this issue, please send us a small project that reproduces this issue as private correspondence.

Greetings,
Alex Fidanov
the Telerik team

[Girish]

Hi,
I am using MVVM as mentioned in WPF, however I need to create Shape objects derived from RadDiagramShape ( to apply Styles and differentiate one shape object from another).
How do I go about it?
When I tried using the way given in the documentation, the CreateLink becomes a big issue. It is invoked everytime I try to drop my connection.[I try to pull connection out form one object and drop on another].
If this is a limitationon the Diagram, kindly let me know.
(I am using Q3)

[Zarko]

Hi Girish,
If you just want different styles on your Shapes you could use the ShapeStyleSelector of the RadDiagram (it work like every styleSelector). If you want to inherit our RadDiagramShape you'll also have to inherit the Diagram and override its GetShapeContainerForItemOverride method.
The CreateLink method should be called every time you create a new Link and that's normal.
I've attached a sample project with MVVM and custom RadDiagramShape so could you please examine it and if you have further questions feel free to ask.

Kind regards,
Zarko
the Telerik team