CODEWITHSUNDEEP
c#visual-studioxamlwindows-phone-8windows-phone-8.1
Noober
Noober

Reputation: 1626

Connecting centre of ellipses with lines

I am trying to connect centre of ellipses with lines. THis is what I have- enter image description here

Here is the XAML code-

<Grid x:Name="Main" Background="#FFF9F9F9">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="8*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>



    <Grid x:Name="Start" Grid.Row="0" Background="#FF0D3A7C">         
    </Grid>
    <Grid x:Name="End" Grid.Row="2" Background="#FF0D3A7C">            
    </Grid>

    <Grid x:Name="Game" Grid.Row="1" Background="#FF0D3A7C">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Ellipse Fill="#FFF4F4F5"  Grid.Row="0" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="0" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="0" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="1" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="1" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="1" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="2" Grid.Column="0" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="2" Grid.Column="1" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>
        <Ellipse Fill="#FFF4F4F5"  Grid.Row="2" Grid.Column="2" Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>      
    </Grid>

</Grid>

Now I want to connect a line or checkbox from centre of each ellipse to all the ellipses using C#. Basically I will have a button and upon clicking it, I want all the lines to appear. I am new to app development and am not sure how to go about it.

Edit- Basically I want to connect the centres of each nodes to all the rest. THis is similar to the following figure where I have done it for the first node manually-

enter image description here

Upvotes: 0

Views: 127

Answers (1)

KarmaEDV
KarmaEDV

Reputation: 1691

Assuming that the number of ellipsis stays the same and that you know which one is which where. Also, this is a quick & dirty explanation.

Start by giving each ellipsis a name

<Ellipse Name="ETopLeft" Fill="#FFF4F4F5" Grid.Row="0" Grid.Column="0"
Margin="20,20,20,20" Stroke="Black" RenderTransformOrigin="0.474,5.849"/>

In the Code Behind get the current X/Y position of all ellipsis at runtime with this and add half the lenght/height to get all centers

Point posETopLeft = ETopLeft.TransformToAncestor(MainWindow)
                          .Transform(new Point(0, 0));
posETopLeft.X += (ETopLeft.Width / 2)
posETopLeft.Y += (ETopLeft.Height / 2)

Now add lines dynamically to the form, rinse and repeat according to your logic/requirements.

var myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.Black;

myLine.X1 = CenterPointETopLeft.X;
myLine.X2 = CenterPointETopMiddle.X;
myLine.Y1 = CenterPointETopLeft.Y;
myLine.Y2 = CenterPointETopMiddle.Y;

Canvas.Children.Add(myLine);

This is not everything, and you'll end up with many repetition, but I think it'll be a good exercise for you to figure out how to make it really work and more elegant.

Upvotes: 1

Related Questions