c# - Silverlight で 2 つのオブジェクトを結ぶ線を作成する

Question

これらのエンティティ ボックスを接続するにはどうすればよいですか?

ボックスはボタンをクリックして作成され、ドラッグできます。今はそれらを線か何かで結びたいと思っています。

Answer 1

これは簡単で汚い実装です：

接続を表すクラス:

public partial class Connection
{
    public MyBox Box1 { get; set; }
    public MyBox Box2 { get; set; }
    public Line Line { get; set; }
}

新しい接続を作成するために、ソース、宛先、ボタンの名前という基本的なフォームを使用しました。

<StackPanel Orientation="Horizontal" Grid.Row="3">
    <TextBox Width="100" Text="{Binding From,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" />
    <TextBlock Text=" ----> " />
    <TextBox Width="100" Text="{Binding To,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" />
    <Button Content="Connect" Click="Button_Click_2" />
</StackPanel>

ハンドラーは次のとおりです。

public string From { get; set; }
public string To { get; set; }

private IList<Connection> connections = new List<Connection>();
private void Button_Click_2(object sender, RoutedEventArgs e)
{
    MyBox box1 = boxes.Single(b => b.Header == From);
    MyBox box2 = boxes.Single(b => b.Header == To);

    Connection conn = new Connection { Box1 = box1, Box2 = box2, Line = new Line { StrokeThickness = 1, Stroke = Brushes.Black } };
    connections.Add(conn);

    RefreshLinesPositions();

    panel.Children.Add(conn.Line);
}

そして RefreshLinesPositions コード:

private void RefreshLinesPositions()
{
    foreach (Connection conn in connections)
    {
        Point p1 = conn.Box1.TranslatePoint(new Point(0, 0), panel);
        Point p2 = conn.Box2.TranslatePoint(new Point(0, 0), panel);

        double t1 = p1.Y;
        double b1 = p1.Y + conn.Box1.ActualHeight;
        double l1 = p1.X;
        double r1 = p1.X + conn.Box1.ActualWidth;

        double t2 = p2.Y;
        double b2 = p2.Y + conn.Box2.ActualHeight;
        double l2 = p2.X;
        double r2 = p2.X + conn.Box2.ActualWidth;

        if (r1 < l2)
        {
            conn.Line.X1 = r1;
            conn.Line.Y1 = t1 + (b1 - t1) / 2;
            conn.Line.X2 = l2;
            conn.Line.Y2 = t2 + (b2 - t2) / 2;

            conn.Line.Visibility = Visibility.Visible;
        }
        else if (r2 < l1)
        {
            conn.Line.X1 = r2;
            conn.Line.Y1 = t2 + (b2 - t2) / 2;
            conn.Line.X2 = l1;
            conn.Line.Y2 = t1 + (b1 - t1) / 2;

            conn.Line.Visibility = Visibility.Visible;
        }
        else if (b1 < t2)
        {
            conn.Line.X1 = l1 + (r1 - l1) / 2;
            conn.Line.Y1 = b1;
            conn.Line.X2 = l2 + (r2 - l2) / 2;
            conn.Line.Y2 = t2;

            conn.Line.Visibility = Visibility.Visible;
        }
        else if (b2 < t1)
        {
            conn.Line.X1 = l1 + (r1 - l1) / 2;
            conn.Line.Y1 = t1;
            conn.Line.X2 = l2 + (r2 - l2) / 2;
            conn.Line.Y2 = b2;

            conn.Line.Visibility = Visibility.Visible;
        }
        else
        {
            conn.Line.Visibility = System.Windows.Visibility.Collapsed;
        }
    }

そして、ボックスが移動するたびに RefreshLinesPositions を呼び出します。

private void Box_MouseMove(object sender, MouseEventArgs e)
{
    if (draggedBox != null)
    {
        ...

        RefreshLinesPositions();
    }
}

編集：ノード用

新しいRefreshLinesPositionバージョン:

private void RefreshLinesPositions()
{
    foreach (Connection conn in connections)
    {
        Point p1 = conn.Box1.TranslatePoint(new Point(0, 0), panel);
        Point p2 = conn.Box2.TranslatePoint(new Point(0, 0), panel);

        double t1 = p1.Y;
        double b1 = p1.Y + conn.Box1.ActualHeight;
        double l1 = p1.X;
        double r1 = p1.X + conn.Box1.ActualWidth;

        double t2 = p2.Y;
        double b2 = p2.Y + conn.Box2.ActualHeight;
        double l2 = p2.X;
        double r2 = p2.X + conn.Box2.ActualWidth;

        if (r1 < l2)
        {
            conn.Line.X1 = r1;
            conn.Line.Y1 = t1 + (b1 - t1) / 2;
            conn.Line.X2 = l2;
            conn.Line.Y2 = t2 + (b2 - t2) / 2;

            conn.Line.Visibility = Visibility.Visible;

            conn.Node1.Text.RenderTransform = new TranslateTransform(r1, t1 + (b1 - t1) / 2);
            conn.Node2.Text.RenderTransform = new TranslateTransform(l2 - conn.Node2.Text.ActualWidth, t2 + (b2 - t2) / 2);
        }
        else if (r2 < l1)
        {
            conn.Line.X1 = l1;
            conn.Line.Y1 = t1 + (b1 - t1) / 2;
            conn.Line.X2 = r2;
            conn.Line.Y2 = t2 + (b2 - t2) / 2;

            conn.Line.Visibility = Visibility.Visible;

            conn.Node1.Text.RenderTransform = new TranslateTransform(l1 - conn.Node1.Text.ActualWidth, t1 + (b1 - t1) / 2);
            conn.Node2.Text.RenderTransform = new TranslateTransform(r2, t2 + (b2 - t2) / 2);
        }
        else if (b1 < t2)
        {
            conn.Line.X1 = l1 + (r1 - l1) / 2;
            conn.Line.Y1 = b1;
            conn.Line.X2 = l2 + (r2 - l2) / 2;
            conn.Line.Y2 = t2;

            conn.Line.Visibility = Visibility.Visible;

            conn.Node1.Text.RenderTransform = new TranslateTransform(l1 + (r1 - l1) / 2, b1);
            conn.Node2.Text.RenderTransform = new TranslateTransform(l2 + (r2 - l2) / 2, t2 - conn.Node2.Text.ActualHeight);
        }
        else if (b2 < t1)
        {
            conn.Line.X1 = l1 + (r1 - l1) / 2;
            conn.Line.Y1 = t1;
            conn.Line.X2 = l2 + (r2 - l2) / 2;
            conn.Line.Y2 = b2;

            conn.Line.Visibility = Visibility.Visible;

            conn.Node1.Text.RenderTransform = new TranslateTransform(l1 + (r1 - l1) / 2, t1 - conn.Node1.Text.ActualHeight);
            conn.Node2.Text.RenderTransform = new TranslateTransform(l2 + (r2 - l2) / 2, b2);
        }
        else
        {
            conn.Line.Visibility = System.Windows.Visibility.Collapsed;
        }
    }
}

新しいイベント ハンドラー:

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    MyBox box1 = boxes.Single(b => b.Header == From);
    MyBox box2 = boxes.Single(b => b.Header == To);

    Connection conn = new Connection
    {
        Box1 = box1,
        Box2 = box2,
        Line = new Line { StrokeThickness = 1, Stroke = Brushes.Black },
        Node1 = new Node { Text = new TextBox() },
        Node2 = new Node { Text = new TextBox() }
    };
    connections.Add(conn);

    panel.Children.Add(conn.Line);

    panel.Children.Add(conn.Node1.Text);
    panel.Children.Add(conn.Node2.Text);

    RefreshLinesPositions();
}

ノードを表すためにこれを使用しました：

public partial class Node
{
    public string Title { get; set; }
    public TextBox Text { get; set; }
}

Answer 2

1. 各ボックスの位置を取得する必要があります。
2. Pathボックスの間にa を描画します。
3. ボックスのドラッグ/ドロップで再描画...

2 つの単純なサンプルRectangle:

XAML :

<Canvas x:Name="Root">
    <Rectangle
        x:Name="rect1"
        Fill="Aqua"
        Width="20"
        Height="20"
        Canvas.Left="24"
        Canvas.Top="44" />
    <Rectangle
        x:Name="rect2"
        Fill="Red"
        Width="20"
        Height="20"
        Canvas.Left="119"
        Canvas.Top="73" />
</Canvas>

C#:

ConnectBoxes(Root, rect1, rect2);
....

public void ConnectBoxes(Canvas container, Rectangle boxeSrc, Rectangle boxeDest)
{
    var transform1 = boxeSrc.TransformToVisual(container);
    var transform2 = boxeDest.TransformToVisual(container);

    var lineGeometry = new LineGeometry()
    {
        StartPoint = transform1.Transform(
            new Point(boxeSrc.ActualWidth / 2, boxeSrc.ActualHeight / 2.0)
        ),
        EndPoint = transform2.Transform(
            new Point(boxeDest.ActualWidth / 2.0, boxeDest.ActualHeight / 2.0)
        )
    };
    container.Children.Add(new Path()
    {
        Data = lineGeometry,
        Fill = new SolidColorBrush(Colors.Brown),
        Stroke = new SolidColorBrush(Colors.Brown),

    });
}