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

Custom connector is inconsistent with connection line

1 Answer 65 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Li
Top achievements
Rank 1
Li asked on 18 Apr 2020, 01:35 PM

Hello, I used UniformGrid in custom shape1 to add an indefinite number of custom shape2, and then added several connectors in shape1. However, the position displayed by the connector and the position of the connection line are inconsistent, what should I do, thank you.

 

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>

shape1 code:

private void Residential1_Loaded(object sender, RoutedEventArgs e)
       {
 
           ugLeft = this.ChildrenOfType<UniformGrid>().FirstOrDefault();
           ugRight = this.ChildrenOfType<UniformGrid>().LastOrDefault();
           sp = this.ChildrenOfType<StackPanel>().FirstOrDefault();
 
           //ugRight.MinWidth = ugLeft.MinWidth = (this.Width - sp.ActualWidth) / 2;
 
           //var avgWidth = (this.ActualWidth - spWidth) / (count1 + count2);//100
 
           //var avgWidth1 = (this.Width / 2 - spWidth / 2) / count1;
           //var avgWidth2 = (this.Width / 2 - spWidth / 2) / count2;
 
           this.Connectors.Clear();
 
           //var connector = new RadDiagramConnector() { Offset = new Point(0.5, 0.98), Name = $"connector1{this.Id.Replace("-", "")}{1}" };
           //this.Connectors.Add(connector);
 
           for (int i = 0; i < count1; i++)
           {
               var ajs = new AdjacentSpace6();
               ajs.Loaded += Ajs_Loaded;
               ajs.Tag = $"cl{this.Id.Replace("-", "")}-{i}";
               ugLeft.Children.Add(ajs);
               //var offsetx = (avgWidth1 / 2 + i * avgWidth1) / this.Width;
               //var connector = new RadDiagramConnector() { Offset = new Point(offsetx, 0.98), Name = $"connector1{this.Id.Replace("-", "")}{i}" };
               //this.Connectors.Add(connector);
 
 
           }
 
 
 
           //for (int i = 0; i < count2; i++)
           //{
           //    var ajs1 = new AdjacentSpace6();
           //    ug1.Children.Add(ajs1);
           //    var offsetx = (ug.Width + sp.Width + (avgWidth2 / 2 + i * avgWidth2)) / this.Width;
           //    var connector1 = new RadDiagramConnector() { Offset = new Point(offsetx, 0.98), Name = $"connector2{this.Id.Replace("-", "")}{i}" };
           //    this.Connectors.Add(connector1);
           //}
 
       }
 
       private void Ajs_Loaded(object sender, RoutedEventArgs e)
       {
           var ajs = sender as AdjacentSpace6;
           UniformGrid ug = null;
           double offset = 0d;
           if (ajs.Tag.ToString().StartsWith("cl"))
           {
               ug = ugLeft;
           }
           else
           {
               ug = ugRight;
           }
           var avgWidth1 = (this.Width / 2 - sp.ActualWidth / 2) / count1;
           int index = int.Parse(ajs.Tag.ToString().Split('-')[1]);
           offset = (avgWidth1 / 2 + index * avgWidth1) / this.Width;
           var connector = new RadDiagramConnector() { Offset = new Point(offset, 0.98), Name = ajs.Tag.ToString().Replace("-", "") };
           this.Connectors.Add(connector);
 
 
       }

1 Answer, 1 is accepted

Sort by
0
Li
Top achievements
Rank 1
answered on 19 Apr 2020, 06:39 AM
I solved it,  just put the ConnectorsControl in  top of the root Grid....
Tags
Diagram
Asked by
Li
Top achievements
Rank 1
Answers by
Li
Top achievements
Rank 1
Share this question
or