用线条连接椭圆中心

时间:2016-02-03 10:11:59

标签: c# visual-studio xaml windows-phone-8 windows-phone-8.1

我正在尝试用线条连接椭圆中心。这就是我所拥有的 - enter image description here

以下是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>

现在,我想使用line将每个椭圆中心的checkboxC#连接到所有省略号。基本上我会有一个按钮,点击它后,我想要显示所有的线条。我是应用程序开发的新手,我不知道如何去做。

修改 - 基本上我想将每个节点的中心连接到其余所有节点。这类似于下图,我手动为第一个节点做了 -

enter image description here

1 个答案:

答案 0 :(得分:1)

假设省略号的数量保持不变,并且您知道哪个省略号在哪里。此外,这是一个快速的&amp;肮脏的解释。

首先为每个省略号命名

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

在Code Behind中获取运行时所有省略号的当前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);

这不是一切,你最终会有很多重复,但我认为这对你来说是一个很好的练习,可以让你弄清楚如何让它真正有效,更优雅。