在 Silverlight 中使用线条形状连接两个动态创建的形状答案

【问题标题】：Connecting two dynamically created shapes using line shape in silverlight在 Silverlight 中使用线条形状连接两个动态创建的形状
【发布时间】：2012-12-29 07:47:43
【问题描述】：

我正在使用 silverlight 在 asp.net 中处理流程图类型的应用程序。我是 Silvelight 的初学者，在代码隐藏 (c#) 中使用 SHAPE 和 LINE 对象动态创建元素（矩形、椭圆、线..）

这些形状将动态生成，这意味着我将在后端调用 Web 服务来确定需要创建多少对象/形状。确定后，我需要将对象/形状连接在一起。

如何将动态创建的形状与 Silverlight 中的线条连接起来，就像流程图一样。

我阅读了下面的文章，但它对我不起作用，形状值的实际高度和实际宽度为 0。 Connecting two shapes together, Silverlight 2

这是我的 MainPage.xaml

<UserControl x:Class="LightTest1.MainPage">

<Canvas x:Name="LayoutRoot" Background="White">
    <Canvas x:Name="MyCanvas" Background="Red"></Canvas>
    <Button x:Name="btnPush" Content="AddRectangle" Height="20" Width="80" Margin="12,268,348,12" Click="btnPush_Click"></Button>               
</Canvas>

MainPage.xaml.cs

后面的代码

    StackPanel sp1 = new StackPanel();

    public MainPage()
    {
        InitializeComponent();
        sp1.Orientation = Orientation.Vertical;
        MyCanvas.Children.Add(sp1);
    }

    Rectangle rect1;
    Rectangle rect2;
    Line line1;

    private void btnPush_Click(object sender, RoutedEventArgs e)
    {
        rect1 = new Rectangle()
        {
            Height = 30,
            Width = 30,
            StrokeThickness = 3,
            Stroke = new SolidColorBrush(Colors.Red),
        };
        sp1.Children.Add(rect1);           

        rect2 = new Rectangle()
        {
            Height = 30,
            Width = 30,
            StrokeThickness = 3,
            Stroke = new SolidColorBrush(Colors.Red),
        };
        sp1.Children.Add(rect2);

        connectShapes(rect1, rect2);
    }

    private void connectShapes(Shape s1, Shape s2)
    {
        var transform1 = s1.TransformToVisual(s1.Parent as UIElement);
        var transform2 = s2.TransformToVisual(s2.Parent as UIElement);

        var lineGeometry = new LineGeometry()
          {
              StartPoint = transform1.Transform(new Point(1, s1.ActualHeight / 2.0)),
              EndPoint = transform2.Transform(new Point(s2.ActualWidth, s2.ActualHeight / 2.0))
          }; 

        var path = new Path()
        {
            Data = lineGeometry,
            Stroke = new SolidColorBrush(Colors.Green),
        };
        sp1.Children.Add(path);          
    }

我在按钮单击事件中所做的只是添加两个矩形形状并用一条线将它们连接起来（如流程图）。请提出我的代码有什么问题..

【问题讨论】：

标签： silverlight shapes

【解决方案1】：

换行试试

    connectShapes(rect1, rect2);

与

    Dispatcher.BeginInvoke(() => connectShapes(rect1, rect2));

我不确定这行得通的确切原因，但我相信只有在控制权从您的代码中传递出来时才会呈现形状，并且只有在它们被呈现后，ActualWidth 和 ActualHeight 属性才会有有用的价值。稍后调用Dispatcher.BeginInvoke 调用您的代码；事实上，您可能会注意到在矩形之后稍稍绘制了线条。

TransformToVisual 方法的行为方式与ActualWidth 和ActualHeight 属性的行为方式大致相同。如果形状没有被渲染，它将返回一个身份转换。即使你的线条是用确定的宽度和高度绘制的，它们最终也会在左上角相互重叠地绘制。

我还发现我需要将线条添加到 Canvas，而不是 StackPanel，以便将它们绘制在矩形上。否则 StackPanel 很快就会被上面有很多空间的线条填满。

【讨论】：