This is a migrated thread and some comments may be shown as answers.

Having problem with customizing ContainerShape

2 Answers 62 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jaeho
Top achievements
Rank 1
Jaeho asked on 30 Jan 2020, 12:13 AM

I am trying to create custom Shape and custom ContainerShape.
I have successfully customized Shape.
But I am having a problem with customizing ContainerShape.

Below is code snippet for Model, .xaml and .cs.
When I set targetType of <style> to either Telerik:RadDiagramShape or Telerik:RadDiagramContainerShape, things work fine.
If I set CustomShape to targetType, this also works fine.
But, if I set CustomContainerShape to targetType, an error seems to occur when graphSource.AddNode(node) is excuted and StyleSelector returns Style, with InvalidOperationException error, and program terminates.

In the below code, FlowItemNode is okay. But FlowGroupNode is causing an error.
Even when I am using FlowGroupNode, if I set targetType of <style> to Telerik:RadDiagramContainerShape, it works okay.
 
I want to use CustomContainerShape so that I can implement or customize Drag and Drop(ex: drag entered, on drag, dropped) within CustomContainerShape class.
 
What am I doing wrong and How can I achieve this?

Thanks in advance.

//Selector
Class DiagramShapeSelector : StyleSelector
{
 Public override Style SelectStyle(object item, DependencyObject container)
 {
  If(item is FlowItemNode)
  {
   Return ForShapeStyle
  }
  Else if (item if FlowGroupNode)
  {
   Return ForGroupShapeStyle
  }
 }
}


 Code
//Model for shape
public class FlowItemNode : FlowItemViewModel, IDiagramNode
{
    ......
}
 
//Model for containerShape
Public Class FlowGroupViewModel<DiagramNode> : FlowItemViewModel, IContainerItem
{
}
Public class FlowGroupNode : FlowGroupViewModel<IDiagramNode>, IDiagramNode
{
    ......
}

 xaml
<local:CustomDiagram
ShapeStyleSelector = {StaticResource DiagramShapeSelector}
……
/>
<Style x:Key="ForShapeStyle" TargetType="telerik:RadDiagramContainerShape">
    <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
</Style>
 
<Style x:Key="ForGroupShapeStyle" TargetType="diagram:CustomContainerShape">
    <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
</Style>
 .cs
//Selector
Class DiagramShapeSelector : StyleSelector
{
 Public override Style SelectStyle(object item, DependencyObject container)
 {
  If(item is FlowItemNode)
  {
   Return ForShapeStyle
  }
  Else if (item if FlowGroupNode)
  {
   Return ForGroupShapeStyle
  }
 }
}
// CustomRadDiagram
    public class CustomDiagram : RadDiagram
    {
        protected override bool IsItemItsOwnShapeContainerOverride(object item)
        {
            if (item is FlowItemNode)
            {
                return item is CustomContainerShape;
            }
            else return item is CustomShape;
        }
        protected override Telerik.Windows.Diagrams.Core.IShape GetShapeContainerForItemOverride(object item)
        {
            if (item is FlowItemNode)
            {
                return new CustomContainerShape(this);
            }
            else return new CustomShape(this);
        }
    }
 
// CustomShape
   public class CustomShape : RadDiagramShape
    {
        public CustomShape(CustomDiagram diagram)
        {
        }
    }
 
// CustomContainershape
   public class CustomConnection : RadDiagramConnection
    {
        public CustomConnection(CustomDiagram diagram)
        {
        }
    }

2 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 03 Feb 2020, 02:15 PM

Hello Jaeho,

Thank you for the provided information.

In scenarios where you want to create custom container shapes, you can override another overload of the GetShapeContainerForItemOverridem method of the RadDiagram:

protected override IContainerShape GetShapeContainerForItemOverride(IContainerItem item)

I am attaching a sample project to demonstrate this for your reference. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jaeho
Top achievements
Rank 1
answered on 04 Feb 2020, 08:38 AM

Dear Vladimir,

Your sample project was very helpful.

It's working great.

Thanks,

Tags
Diagram
Asked by
Jaeho
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Jaeho
Top achievements
Rank 1
Share this question
or