Silverlight OrgChart Web 部件

• 下载 OrgChartWebPart.zip - 1.5 MB

引言

本文介绍了一种使用 Silverlight 技术生成组织结构图的简单方法。

背景

该项目的目标是创建一个 Silverlight 控件，以组织结构图的形式展示公司员工。该控件适用于任何规模的公司，包括小型和中型企业。由于图表控件“固定”在 SharePoint 服务器上，因此该图表控件被包装成一个可参数化的 ASP.NET 网页部件。

本文描述了另一种绘制组织结构的方法。市面上有许多绘制组织结构的共享软件或免费软件，但它们通常使用 Canvas 作为主控件。对于 ASP.NET 应用程序，这是成功绘制结构的唯一方法。我的方法更简单，并且完全独立于任何第三方绘图库。首先，图表控件是使用 StackPanel 控件创建的，而不是 Canvas。与 Canvas 控件不同，StackPanel 会自动水平或垂直对齐子项。其次，自动缩放过程是通过 Silverlight 原生控件 ViewBox 来实现的。

个人声明

这是我的第一篇文章，我意识到某些算法和代码质量可能还有待提高，特别是重绘过程，它会在每次 MainStackPanel 分辨率更改后被调用。

系统要求

• SharePoint 操作系统：Windows 7, Windows 2008
• SharePoint 平台：MS SharePoint Foundation 2010
• 浏览器：最新 IE, Firefox
• 浏览器插件：Silverlight 5.0 运行时

工具和组件

• VS 2012
• Value Injecter for Silverlight (http://valueinjecter.codeplex.com/)
• Async Targeting Pack for Visual Studio 2012
• MS Silverlight 5.0 开发工具

使用代码

• 安装 MS SharePoint 2010 Foundation Server
• 安装完成后，检查主 SharePoint 网站的可用性（例如，https://）
• 如果安装过程是在 AD 环境之外执行的，请将 clientaccesspolicy.xml 文件复制到应用程序的 SharePoint 文件夹（例如，C:\inetpub\wwwroot\wss\VirtualDirectories\80）
• 打开项目 MB.OrganizationChartWebPart (VS 2012 项目)
• 在项目属性中设置网站 URL（例如，https://）属性。
• 将网页部件控件部署到主 SharePoint 网站（在项目 MB.OrgChartWebPart 上运行“部署”操作）。
• 运行主 SharePoint 网站（例如，https://）。查看左侧菜单，找到指向 OrgChartList 列表的链接，然后提供一些如下所示的数据：

  
  其中： 

  单元类型 – 单元的类型。
  
  可接受的值
  
  0 – 单元,
  1 – 子单元
  2 - 工作人员
  
  ParentEID – 根元素 ID
  EID – 元素 ID。必须是唯一的。

• 可以选择添加任何图片作为项目附件
• 创建空白网站并添加 OrgChartWebPart 网页部件

解决方案的组成部分

• MB.OrganizationChartWebPart.Web – 托管 MB.OrgChartWebPart 应用程序的 ASP.NET 网页应用程序。
• MB.OrgChartConnector – SharePoint 列表连接器项目。
• MB.OrgChartControl – Silverlight 组织结构图控件（主项目）。
• MB.SilverlightOrgChartApp – 用于托管 MB.OrgChartControl 控件的 Silverlight 应用程序（用于测试目的）。
• MB.OrgChartWebPart – Silverlight 应用程序项目，用于托管 MB.SilverlightOrgChartApp 应用程序。

类图

UML 符号中的类关系

项目详情

本章不描述任何算法细节，例如树布局绘制算法。

图表元素

如前所述，我的解决方案基于标准的 Silverlight 控件，如：StackPanels、Grids、Labels、TextBlocks，因此我的某些控件充当它们的扩展。

• ViewBox – 负责缩放图表的容器。在 MainStackPanel 分辨率发生变化时发生自动缩放。缩放选项仅适用于 Stretch 参数中提供的某些拉伸类型。
• MainStackPanel – 主 StackPanel 容器。它是 LevelStackPanel 元素的父级。项目以水平方式排列。
• LevelStackPanel – 此类型的对象在图表的每个级别上绘制。它是 GroupStackPanel 元素的容器。项目以水平方式排列。
• GroupStackPanel – StackPanel 容器。项目以水平方式排列。
• ChartBox – 自定义控件，包含员工详细信息，并确切代表 SharePoint 列表中的一个职位，该职位的 UnitType 字段值为 0。它以两种模式显示数据：*Team* 或 *Organization*。

数据树结构构建

开始构建过程时，逐个读取 SharePoint 列表中的每个项目，并创建一个结构化的树对象。树项目通过 ParentEID 字段中的父级引用（根元素除外）来组织父子关系。有关更多详细信息，请分析代码并查看 Drawing2DTreeBuilde 类（MB.OrgChartControl 项目）。

显示图表元素

根据显示模式（“分组依据”参数），树结构项按照以下规则显示：

对于 *Team* 模式

此模式用于显示小型公司或团队的组织结构图。
显示规则

• 对于 UnitType = 0 的项目，显示 ChartBox
• 任何其他 UnitType <> 0 的项目将被忽略
• ChartBox 显示 SharePoint 列表项的所有字段。
• 名称和姓氏值显示在 ChartBox 条上。

ChartBox 控件显示所有列表项数据，例如：姓名、姓氏、电子邮件等。示例如下：

对于 *Organization* 模式：此模式用于显示中型公司的组织结构图。员工被分组到不同的部门。
显示规则

• 对于 UnitType = 0 的项目，显示 ChartBox 控件，并在 ChartBox 条上显示部门字段值。
• 任何其他 UnitType <> 0 的项目被分配给相应的 ChartBox。
• 仅显示员工的姓名和姓氏数据。

ChartBox 控件按 *Division* 键显示分组数据。示例如下：

在屏幕上显示 ChartBoxes 时，进程会自动尝试正确排列 ChartBoxes。如果创建的 ChartBox 显示在屏幕范围之外，主容器（MainStackPanel）将收到一个包含范围超出详细信息的事件对象。在绘制完成后，并且选择了某些图表缩放类型（Fill、Uniform、UniformToFill）后，进程会更改主容器的分辨率并重新绘制图表（正如您可能已经注意到的，质量和性能还需要改进，但这将在下一个版本中得到改进）。有关更多详细信息，请分析代码并查看 Drawing2DVTree 类（MB.OrgChartControl 项目）。

图表布局

以下屏幕显示了图表的布局及其 StackPanels 的排列。