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

我需要在Silverlight中动态创建带有连接组件的类似UML的框图。如何做到这一点？应该对此使用什么控制？需要为块中的某些项目添加显示/隐藏切换。

请参阅此处的文章：

---

它讨论了java/WPF图表选项。我认为我在那篇文章（）中建议的链接是你起步的有力竞争者。祝你好运。

为什么不使用css+javascript呢？如果我没有弄错的话，您可以在silverlight中生成/嵌入html。

我发现这是一款非常不错的产品。它不便宜，但构造非常好，可以很好地处理此任务。它还包括内置的布局包，这样可以使您的图表看起来漂亮

---

编辑：它有30天的试用期。在线查看ER图示例——它可能与您想要的非常接近。

尝试使用。这个客户端是WPF，但我认为您可以根据自己的需要调整它

我们在MindFusion中广泛使用这种应用程序。它工作非常好，价格合理。

您可以将ItemsControl与画布一起使用

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>

名称空间SlBug1
{
使用System.Collections.Generic；
使用System.Windows.Controls；
使用System.Windows.Media；
使用System.Windows.Shapes；
公共部分类UML:UserControl
{
公共UML（）
{
初始化组件（）；
SetupData（）；
this.DataContext=this；
}
公共对象类{get；set；}
公共对象箭头{get；set；}
#区域设置数据
公共数据（）
{
var arrows=新列表(
新箭头[]{
新箭头（50250200250），
新箭头（50、50、200、220）
}
);
这个。箭头=箭头；
变量类=新列表(
新类别[]
{
新类{Name=“Line”，Methods=newstring[]{“Draw”，“setColor”}，X=10，Y=11，IsExpanded=true}，
新类{Name=“Rectangle”，Methods=newstring[]{“Draw”，“setColor”，“setFill”}，X=200，Y=200，IsExpanded=true}，
新类{Name=“Circle”，Methods=newstring[]{“Draw”，“setColor”，“setFill”，“setRadius”}，X=10，Y=200，IsExpanded=false}，
});
这个。类=类；
}
#端区
}
公共课
{
公共字符串名称{get；set；}
公共IEnumerable方法{get；set；}
公共双X{get；set；}
公共双Y{get；set；}
公共布尔展开{get；set；}
}
公共类箭头
{
公共箭头（双X1、双Y1、双X2、双Y2）
{
this.X1=X1；this.Y1=Y1；
this.X2=X2；this.Y2=Y2；
}
公共双X1{get；set；}
公共双Y1{get；set；}
公共双X2{get；set；}
公共双Y2{get；set；}
公共双LX1{get{return（14*X2+X1）/15；}
公共双RX1{get{return（14*X2+X1）/15；}
公共双LY1{get{return（14*Y2+Y1）/15-10；}
公共双RY1{get{return（14*Y2+Y1）/15+10；}
}
}

最终结果如下所示：

检查本产品

---

希望它能满足您的要求。

这不是一项简单的任务——看这里：但是，除了显示/隐藏切换之外，我的数字是相当静态的。作为旁白，虽然SL功能强大，但并不完全跨平台，需要安装插件。Google docs不需要插件，可以在所有浏览器和平台上运行，他们最近发布了一个类似powerpoint的演示工具，它的功能与上面链接的SL图表中显示的功能类似。无法在基于Silverlight 4浏览器的应用程序中显示HTML。至少使用Blend SDK中的箭头。没有必要重写arrow类。