gpt4 book ai didi

c# - 在 Silverlight 中生成类似 UML 的框图

转载 作者:行者123 更新时间:2023-11-30 15:41:18 26 4
gpt4 key购买 nike

我需要在 Silverlight 中动态创建具有连接组件的类似 UML 的框图。这个怎么做?为此应该使用什么控件?需要为 block 中的某些项目添加显示/隐藏切换。

最佳答案

您可以将 ItemsControl 与 Canvas 一起使用。

namespace SlBug1
{
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

public partial class UML : UserControl
{
public UML()
{
InitializeComponent();

SetupData();

this.DataContext = this;
}

public object Classes { get; set; }
public object Arrows { get; set; }

#region Set up data

public void SetupData()
{

var arrows = new List<Arrow>(

new Arrow[] {
new Arrow(50, 250, 200, 250),
new Arrow(50, 50, 200, 220)
}
);

this.Arrows = arrows;

var classes = new List<Class>(
new Class[]
{
new Class { Name = "Line", Methods= new string[] { "Draw", "setColor"} , X=10, Y=11, IsExpanded=true},
new Class { Name = "Rectangle", Methods = new string[] { "Draw", "setColor", "setFill"}, X=200, Y=200, IsExpanded=true},
new Class { Name = "Circle", Methods = new string[] {"Draw", "setColor", "setFill", "setRadius"}, X=10, Y=200, IsExpanded=false},
});

this.Classes = classes;

}

#endregion

}

public class Class
{
public string Name { get; set; }
public IEnumerable<string> Methods { get; set; }

public double X { get; set; }
public double Y { get; set; }
public bool IsExpanded { get; set; }
}

public class Arrow
{
public Arrow(double X1, double Y1, double X2, double Y2)
{
this.X1 = X1; this.Y1 = Y1;
this.X2 = X2; this.Y2 = Y2;
}

public double X1 { get; set; }
public double Y1 { get; set; }
public double X2 { get; set; }
public double Y2 { get; set; }
public double LX1 { get { return (14 * X2 + X1) / 15; } }
public double RX1 { get { return (14 * X2 + X1) / 15; } }
public double LY1 { get { return (14 * Y2 + Y1) / 15 - 10; } }
public double RY1 { get { return (14 * Y2 + Y1) / 15 + 10; } }
}
}

<UserControl x:Class="SlBug1.UML"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">

<Canvas>
<ItemsControl x:Name="ArrowsCanvas" ItemsSource="{Binding Arrows}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Line X1="{Binding X1}" X2="{Binding X2}"
Y1="{Binding Y1}" Y2="{Binding Y2}" Stroke="Black" />
<Line X1="{Binding LX1}" X2="{Binding X2}"
Y1="{Binding LY1}" Y2="{Binding Y2}" Stroke="Black" />
<Line X1="{Binding RX1}" X2="{Binding X2}"
Y1="{Binding RY1}" Y2="{Binding Y2}" Stroke="Black" />
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl x:Name="UmlCanvas" ItemsSource="{Binding Classes}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- Hack: http://forums.silverlight.net/post/370493.aspx -->
<Canvas>
<Border Background="LightBlue"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
BorderBrush="Black" BorderThickness="2" >
<StackPanel>
<TextBlock Text="{Binding Name}" FontSize="16" />
<ItemsControl
ItemsSource="{Binding Methods}"
Margin="10,10,0,0"/>
</StackPanel>
</Border>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</Grid>
</UserControl>

最终结果是这样的:

UML diagram - pardon me for the brain-dead inheritance

关于c# - 在 Silverlight 中生成类似 UML 的框图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8528087/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com