1

Silverlightを使用してasp.netでフローチャートのようなアプリケーションに取り組んでいます。Silvelightの初心者で、コードビハインド（c＃）でSHAPEおよびLINEオブジェクトを使用して要素（Rectangle、Ellipse、Line ..）を動的に作成します。

これらの図形は動的に生成されます。つまり、バックエンドでWebサービスを呼び出して、作成する必要のあるオブジェクト/図形の数を決定します。これが決まったら、オブジェクト/シェイプを相互に接続する必要があります。

動的に作成された図形をフローチャートのようにSilverlightの線に接続する方法。

以下の記事を読みましたが、うまくいきません。実際のHeightとactualWidthの図形の値は0 です。2つの図形を接続する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);          
    }

ボタンクリックイベントで私が行っているのは、2つの長方形の形状を追加し、それらを線で接続するためにトリングすることです（フローチャートのように）。私のコードのどこが悪いのか提案してください。

4

1 に答える 1

0

ラインを交換してみる

    connectShapes(rect1, rect2);

と

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

これが機能する正確な理由はわかりませんが、コントロールがコードから渡されたときにのみ形状がレンダリングされ、レンダリングされたときにのみプロパティActualWidthとActualHeightプロパティが有用な値を持つと思います。呼び出すDispatcher.BeginInvokeと、しばらくしてコードが呼び出されます。実際、四角形の少し後に線が描かれていることに気付くかもしれません。

このメソッドは、およびプロパティTransformToVisualとほとんど同じように動作します。形状がレンダリングされていない場合は、恒等変換が返されます。一定の幅と高さで線を描いていたとしても、左上で重なり合って描画されてしまいます。ActualWidthActualHeight

また、四角形の上に線を描画するには、線を StackPanel ではなく Canvas に追加する必要があることもわかりました。それ以外の場合、StackPanel はすぐに行でいっぱいになり、その上に多くのスペースがありました。

于 2012-12-28T23:47:43.757 に答える