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つの長方形の形状を追加し、それらを線で接続するためにトリングすることです(フローチャートのように)。私のコードのどこが悪いのか提案してください。