用线连接椭圆的中心

Question

我正在尝试将椭圆的中心与线条连接起来。这就是我所拥有的——

这是XAML代码-

<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>

现在我想使用C# 将每个椭圆中心的line 或checkbox 连接到所有椭圆。基本上我会有一个按钮，点击它后，我希望所有的行都出现。我是应用程序开发的新手，不知道如何去做。

编辑- 基本上我想将每个节点的中心连接到所有其他节点。这类似于下图，我为第一个节点手动完成了它-

Answer 1

假设省略号的数量保持不变，并且您知道哪个在哪个位置。此外，这是一个快速而肮脏的解释。

首先给每个省略号命名

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

在后面的代码中，在运行时获取所有省略号的当前 X/Y 位置，并添加一半的长度/高度以获得所有中心

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

现在根据您的逻辑/要求向表单动态添加行、冲洗和重复。

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);

这不是全部，你最终会重复很多次，但我认为这对你来说是一个很好的练习，可以让你弄清楚如何让它真正起作用并且更优雅。