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

How to display the customer connector of the custom shape in anothor custom shape

1 Answer 75 Views

Diagram

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

Li asked on 18 Apr 2020, 01:18 PM

Hello, I am using diagram to build a complex shape. A custom shape (Shape1) contains several custom shapes (Shape2).
I added a custom connector in Shape2. How do I display the connector of shape2 when I add shape1 to the diagram?

Shape1：

<Style TargetType="{x:Type local:Residential2}">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="500" />

<Setter Property="Height" Value="200" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="Margin" Value="0" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type local:Residential2}">

<Grid VerticalAlignment="Top" Name="root">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed"/>

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ConnectorsControl" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.Background>

<DrawingBrush Stretch="Uniform" AlignmentY="Top">

<DrawingBrush.Drawing>

<DrawingGroup>

<DrawingGroup.Children>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.102,0.750854L 468.17,0.750854">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0.5,0.75061L 216.568,0.75061">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.05,32.7709L 216.05,0.770874">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.281,32.5712L 226.959,43.2485">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 215.958,32.6797L 205.28,43.3569">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.311,38.1578L 226.988,48.8352">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 215.986,38.2665L 205.309,48.9437">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.05,60.4674L 216.05,37.5924">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 209.036,53.5631L 223.178,67.7052">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 223.178,53.5629L 209.035,67.7051">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.815,109.857L 216.815,141.857">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.584,110.057L 205.907,99.3799">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.911,109.949L 227.588,99.2714">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.555,104.47L 205.877,93.7931">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.881,104.362L 227.559,93.6846">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 216.815,82.1608L 216.815,105.036">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 207.16,72.4357L 216.804,82.08">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.55,32.5L 252.55,0.5">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.781,32.3004L 263.458,42.9777">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.457,32.4088L 241.779,43.0861">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.81,37.8871L 263.487,48.5643">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.485,37.9956L 241.808,48.6729">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.948,103.659L 252.948,37.7872">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 253.314,109.587L 253.314,141.587">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 253.083,109.786L 242.406,99.109">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 253.41,109.678L 264.088,99.0005">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 253.054,104.2L 242.377,93.5223">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 253.38,104.091L 264.058,93.4137">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 217.305,141.292L 253.505,141.292">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Grid.Background>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition Width="0.17*"></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Viewbox>

<UniformGrid Name="a" Rows="1" MinWidth="230">

</UniformGrid>

</Viewbox>

<Viewbox Width="NaN" Height="NaN" Grid.Column="2" >

<UniformGrid Name="a1" Rows="1" MinWidth="230"></UniformGrid>

</Viewbox>

<StackPanel Grid.Column="1" Name="sp" Background="AliceBlue"></StackPanel>

<primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

shape2：

<Style TargetType="{x:Type local:AdjacentSpace6}">

<Setter Property="BorderThickness" Value="4" />

<Setter Property="BorderBrush" Value="#6C666666" />

<Setter Property="Width" Value="30 " />

<Setter Property="Height" Value="196" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="Margin" Value="0" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type local:AdjacentSpace6}">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed"/>

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ConnectorsControl" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.Background>

<DrawingBrush Stretch="Uniform">

<DrawingBrush.Drawing>

<DrawingGroup>

<DrawingGroup.Children>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.2705,32.5L 11.2705,0.5">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.501,32.3002L 22.1787,42.9774">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.1772,32.4088L 0.5,43.0861">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.5303,37.8868L 22.208,48.5642">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.2061,37.9955L 0.528809,48.6727">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.2705,60.1965L 11.2705,37.3215">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 4.25586,53.2921L 18.3979,67.4342">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 18.3975,53.2921L 4.25537,67.4342">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 12.0352,109.587L 12.0352,141.587">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.8037,109.786L 1.12646,99.1089">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 12.1299,109.678L 22.8071,99.0005">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 11.7749,104.199L 1.09766,93.5221">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 12.1006,104.091L 22.7778,93.4137">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 12.0352,81.89L 12.0352,104.765">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 2.37988,72.1648L 12.0239,81.809">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Geometry="F1 M 21.1851,141.405L 3.85107,141.405L 12.5181,156.417L 21.1851,141.405 Z ">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Grid.Background>

<primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

1 Answer, 1 is accepted

answered on 22 Apr 2020, 10:03 AM

Hi Li Xin,

Thank you for the provided code snippet.

What comes up to my mind is to subscribe to the ItemsChanging event of the RadDiagram. In the event handler, you can create custom logic that checks the type of the added items. If the new item is shape1, get the shape2 from the Items collection property of the RadDiagram and populate the Connectors collection with custom connectors. The following code snippet demonstrate this approach. You can modify it to cover your scenario, but the logic should be something similar here.

private void RadDiagram_ItemsChanging(object sender, Telerik.Windows.Controls.Diagrams.DiagramItemsChangingEventArgs e)
{
    var diagram = sender as RadDiagram;
    if(e.Action== System.Collections.Specialized.NotifyCollectionChangedAction.Add)
    {
        if(e.NewItems.First() is Residential2)
        {
            var adjacentSpace6 = diagram.Items.FirstOrDefault(x => x is AdjacentSpace6);
            if(adjacentSpace6 != null)
            {
                var connector = new RadDiagramConnector() { Offset = new Point(1, 0.67), Name = "CustomConnector1", Background = Brushes.Red };
                (adjacentSpace6 as AdjacentSpace6).Connectors.Add(connector);
            }                   
        }
    }
}

Regards,
Dinko
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to display the customer connector of the custom shape in anothor custom shape

1 Answer, 1 is accepted