31、创建Silverlight Web部件：详细指南

omega

于 2025-08-14 12:04:12 发布

阅读量32

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握SharePoint开发利器文章标签： Silverlight SharePoint Web部件

本文链接：https://blog.youkuaiyun.com/omega/article/details/150836726

掌握SharePoint开发利器专栏收录该内容

43 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

创建Silverlight Web部件：详细指南

1. 了解Silverlight和SharePoint支持情况

Silverlight是一个强大的开发平台，可用于为Web、桌面和移动应用程序创建引人入胜的交互式用户体验，无论在线还是离线。它具有浏览器独立性，通过浏览器插件跨平台和跨设备执行。若想了解更多信息，可访问官方Silverlight开发者中心：http://silverlight.net 。

在Web部件中使用Silverlight，能构建强大而丰富的互联网应用程序（RIA），结合动画、视频、布局、矢量图形、透视3D、特效和Deep Zoom等功能，为SharePoint用户带来出色体验。

SharePoint通过在网页中添加脚本或标记来支持Silverlight。可以开发托管Silverlight的应用程序页面、Web部件页面和Web部件，甚至SharePoint本身的一些功能也是用Silverlight实现的。此外，SharePoint自带一个Silverlight Web部件，可用于托管自定义Silverlight应用程序，只需将其指向包含Silverlight控件的包即可。

2. 准备工作

在开始创建Silverlight Web部件之前，需要在开发机器上下载并安装Silverlight Toolkit，因为后续要使用其中的饼图控件。该工具包可从http://silverlight.codeplex.com/releases 下载。

3. 创建Visual Studio解决方案

打开Visual Studio ：以提升模式打开Visual Studio，选择“新建项目”。
选择项目模板 ：在“新建项目”对话框中，选择“SharePoint”，然后选择“2010”，并选择“空SharePoint项目”模板。将新项目命名为“SL-SummaryTaskWebPart”，点击“确定”。在弹出的自定义向导中，保留默认设置，点击“完成”。此方法适用于沙盒解决方案和农场解决方案。

4. 创建新的Silverlight应用程序

添加新项目 ：在解决方案资源管理器中，右键单击解决方案节点“SLSummaryTaskWebpart”，选择“添加”，然后选择“新项目…”。在“新项目”对话框的模板部分选择“Silverlight”，并选择“Silverlight应用程序”。将项目命名为“TaskGroupsPieChart”，点击“确定”。
配置新Silverlight应用程序 ：在弹出的“新Silverlight应用程序”对话框中，取消选中“在新网站中托管Silverlight应用程序”，因为将在SharePoint Silverlight Web部件中测试和调试该应用程序。确保将Silverlight版本设置为“Silverlight 3”。

创建完成后，会显示Silverlight设计器（也称为XAML编辑器），同时在解决方案资源管理器中会看到添加了两个XAML文件：“App.xaml”和“MainPage.xaml”。“App.xaml”类似于控制台应用程序中的“Main”方法，用于启动应用程序并创建新的“MainPage”对象；“MainPage.xaml”是编写实现代码的地方。

5. 准备开发环境

添加饼图控件到工具箱 ：右键单击工具箱中的Silverlight控件栏，选择“选择项…”。在“选择项”对话框中，选择“Silverlight组件”选项卡，向下滚动直到找到“PieSeries”条目，它代表由“Chart”控件渲染的饼图数据。勾选该条目，点击“确定”将“PieSeries”添加到工具箱。使用此控件前，必须安装Silverlight Toolkit。
添加对SharePoint Silverlight客户端对象模型的引用 ：右键单击“TaskGroupsPieChart”项目中的“引用”文件夹，选择“添加引用”。在对话框中选择“浏览”选项卡，浏览到“{SharePointRoot}\Template\Layouts\ClientBin”目录，选择“Microsoft.SharePoint.Client.Silverlight.dll”和“Microsoft.SharePoint.Client.Silverlight.Runtime.dll”程序集，点击“确定”。
添加使用指令 ：在“MainPage.xaml.cs”中添加以下使用指令：

5


-"
    .
1 4
-*  1
  
>+/  5
   4

第一条指令用于访问SharePoint客户端对象模型，第二条指令用于为“TaskGroup”对象创建“ObservableCollection”对象。
- 添加新类 ：在“TaskGroupsPieChart”项目中添加一个新类，命名为“TaskGroup”，并添加相应代码。

6. 创建饼图控件

设计UI ：双击“MainPage.xaml”打开Silverlight设计器。在工具箱中找到“Chart”控件，将其拖到设计器表面。通过拖动调整“Chart”控件的大小，在“属性”窗口中将图表名称更改为“ctTaskGroupsChart”，并将其“Title”属性设置为“TaskGroups”。
修改XAML ：在设计器底部的XAML部分，找到 <chartingToolkit:Chart…> 元素，删除该元素开始标签和结束标签之间的所有内容。然后从工具箱中将“PieSeries”控件拖动到XAML编辑器中，放在 <chartingToolkit:Chart> 标签内。以下是修改后的图表XAML代码：

"
%

8 1"

R
V
")  $   
5"
CNCNN
("   %"8I

1"

%  %"8I


H 
") %
7FDLR    CD
"
%

8 . -   
   !
!"
%

8 1"

配置PieSeries控件属性 ：将光标放在 <chartingToolkit:PieSeries/> 行上，打开“PieSeries”控件的“属性”窗口。点击图标按类别对属性进行排序。以下是需要为“PieSeries”控件的相应属性分配的值：
| 属性 | 值 |
| ---- | ---- |
| DependentValuePath | TaskCount（将使用“TaskGroup”类的“TaskCount”属性作为依赖值） |
| AnimationSequence | FirstToLast（按从第一个到最后一个的顺序添加饼图段） |
| IndependentValuePath | TaskState（将使用“TaskGroup”类的“TaskState”属性作为独立值） |
| IsSelectionEnabled | 选中（在鼠标悬停在饼图上时提供漂亮的动画效果） |
| ItemBinding | Binding…（点击“ItemBinding”单元格中的小图标，在上下文菜单中选择“应用数据绑定”，会弹出一个菜单对话框，可关闭它） |

7. 实现代码

以下是“MainPage”类的代码：

+"
""5"."   6   
1



:

"    $& 1
  

(
-"
   %"84

"    $& 1
  

&.

%"84

"    $& 1
  

1
    %"84

"    $& 1
  

7"%"84

"    $& 1
  

3    

    %"84
+>+   
"+    1
  
%"8I

"8

$4

+5"."   ;<
:
&"V  1

   ;<4
I  %"8I

;<4
=

"    
I    %"8I

;<
:
1    1
  
  1    1
  1

    4
$"8$
  7    +$I   M*% ;%"8<4
1"W 
*"W    
*   91"W    
*;<4
"W 
*H    9X
H  9W    
*7    
    20  # ("   O-"O!A
H"    %*    O1
  O(
A
-"
   !H"  !2!7    
    !W    
*!H   94

(
-"
   %"8"8$I & ;"W   
*<4
1"W 
*"W    
*C  91"W    
*;<4
"W 
*CH   9X
H   9W    
*7    
    20  # ("   O-"O!A
H" %*    O1
  O&A
.


    !H" !2!7    
    !W    
*!H   94

&.

%"8"8$I & ;"W   
*C<4
1"W  
*"W    
*F  91"W    
*;<4
"W  
*FH   9X
H   9W    
*7    
    20  # ("   O-"O!A
H" %*    O1
  O1
    !H"  A
!2!7  
    !W    
*!H   94

1
    %"8"8$I & ;"W   
*F<4
1"W  
*"W    
*'  91"W    
*;<4
"W  
*'H   9X
H   9W    
*7    
    20  # ("   O-"O!A
H" %*    O1
  O7"

   
   A
   !H"   !2!7    
    !W    
*!H   94

7"%"8"8$I & ;"W   
*'<4
1"W  
*"W    
*D  91"W    
*;<4
"W  
*DH   9X
H   9W    
*7    
    20  # ("   O-"O!A
H" %*    O1
  O3    

    !H"  !2A
!7  
    !W    
*!H   94

3    

    %"8"8$I & ;"W   
*D<4

  $
";
(
-"
   %"8<4

  $
";
&.

%"8<4

  $
";
1
    %"8<4

  $
";
7"%"8<4

  $
";
3    

    %"8<4

      W  
*)*;1  # 2  -         N
1   # 2  0"  <4
=
+
M3""%
1"
;<
:
;"8

$Q``"8

$1
<
:
%"8I

1"
3""1
  "8

$4
=
=

"    
1  # 2  -         ;
+/        
N
1    # 2  -          )
"
<
:
"8

$ 9>+   
"+    1
  
%"8I

;<4
"8

$);   9%"8I


;(
-"
   N
(
-"
   %"81
<<4
"8

$)
;   9%"8I

;&


    N
&.

%"81
<<4
"8

$);   9%"8I


;1
    N
1
    %"81
<<4
"8

$);   9%"8I


;7"N
7"%"81
<<4
"8

$);   9%"8I


;3     

    N
3    

    %"81
<<4
3"  
M  &
8   ;M3""%
1"
<4
=

"    
1  # 2  0"  ;
+/        
N
1    # 2  0"   )
"
<
:
+#   1
  
    2  " 4
=
=

与之前的Web部件实现相比，主要区别在于使用了Silverlight客户端对象模型提供的对象，使用“ListItemCollection”代替了服务器对象模型中的“SPListItemCollection”，并添加了代码来创建“TaskGroup”的“ObservableCollection”。同时，所有使用SharePoint Silverlight客户端对象模型的查询都需要异步进行，因此要使用“ExecuteQueryAsync”方法，该方法接受两个委托作为参数：“ClientRequestSucceeded”和“ClientRequestFailed”。

如果查询请求失败，将调用“ClientRequestFailed”处理程序，并向用户显示带有详细错误消息的消息框；如果请求成功，“ClientRequestSucceeded”事件将触发，会将包含状态和任务计数的新“TaskGroup”对象添加到“taskgroupList”中。最后，通过调用“BeginInvoke”方法，使用创建UI的线程的“Dispatcher”对象回调到UI线程。

当UI线程重新获得控制权时，将执行“BindDataToChart”方法，该方法将“TaskGroup”对象的集合绑定到图表控件。

下半部分

8. 部署Silverlight Web部件到SharePoint

构建项目生成.XAP文件 ：构建“TaskGroupsPieChart”项目，会生成一个.XAP文件，该文件将被SharePoint Silverlight Web部件使用。.XAP文件是Silverlight应用程序的可执行文件，包含一个名为“AppManifest.xaml”的.XAML文件和应用程序引用的.DLL文件，它是一个压缩的ZIP文件，可以通过将文件扩展名重命名为.ZIP并使用ZIP工具打开来查看其内容。
创建文档库存储.XAP文件 ：建议将所有.XAP文件存储在一个文档库中，该文档库可以是现有的，也可以是专门用于存储Silverlight应用程序的新文档库，并且可以将其设置为隐藏，以便普通SharePoint用户无法看到。
- 打开SharePoint主页，选择“网站操作”菜单中的“新建文档库”。
- 在出现的“创建”对话框中，将新文档库命名为“SLApps”，保留“导航”和“文档历史记录”设置为默认值。
- 由于没有.XAP文件的模板，在“文档模板”下拉列表中选择“无”。

9. 使用SharePoint模块部署.XAP文件

添加模块 ：右键单击项目“SLSummaryTaskWebPart”，选择“添加”，然后选择“新项目”。在“新项目”对话框中选择“模块”，将其命名为“PieChartModule”，点击“添加”。Visual Studio会将该模块（包括一个示例文件）添加到项目中，可删除该示例文件，Visual Studio会自动更新“Elements.xml”文件，使其不再引用已删除的示例文件。
配置项目输出引用 ：
- 选择SharePoint项目项文件夹“PieChartModule”，在“属性”窗口中找到“项目输出引用”属性，点击其旁边的省略号按钮。
- 在弹出的“项目输出引用”对话框中，点击“添加”按钮。默认情况下，Visual Studio会将当前项目添加到成员列表中。在右侧网格中找到“项目名称”属性，从下拉列表中选择“TaskGroupPieChart”。
- 将“部署类型”属性更改为“ElementFile”，然后点击“确定”。
手动更新Elements.xml文件 ：需要对“Elements.xml”文件进行一些额外的手动更新，更新后的文件如下：

   

    

      !!   "



!"
    
!
5
 ("    .    1"
5
 6
-$)
0    .".   1"
5
 K%"8I

.   1"
"
6
%"8I

.   1"
"
%*  I
"+   &$+
"
*!
!5
 
!

具体更新内容如下：
- 为“Module”元素添加“Url”属性，指定将.XAP文件添加到哪个文档库，这里指定为刚刚创建的用于存储.XAP文件的文档库。
- 从“File”元素的“Url”属性中删除“PieChartModule/”，因为不需要完整路径，只需指定.XAP文件的名称。
- 添加“Type”属性，并将其值设置为“GhostableInLibrary”，告诉SharePoint为.XAP文件创建一个列表项。

10. 测试和调试

启用Silverlight调试 ：右键单击项目“SLSummaryTaskWebPart”，选择“属性”。在Visual Studio的“属性”页面中选择“SharePoint”选项卡，在“编辑配置”区域中选中“启用Silverlight调试（而非脚本调试）”。
设置断点并调试 ：在“TaskGroupsPieChart”项目的“MainPage”类的“ClientRequestSucceeded”事件处理程序中设置断点，按下“F5”。浏览器打开后，导航到“SLApps”文档库，验证.XAP文件是否已正确部署。

11. 创建Silverlight Web部件并指向.XAP文件

添加Silverlight Web部件 ：创建或使用之前创建的测试Web部件页面，切换到编辑模式。在“插入Web部件”部分，选择“媒体和内容”类别，然后选择“SilverlightWebPart”。点击“添加”按钮，会弹出一个对话框，要求输入.XAP文件的URL。输入“/SLApps/TaskGroupsPieChart.xap”，点击“确定”。
调试和查看效果 ：添加Web部件后，会命中断点，可以继续调试代码。调试完成后，可以清除断点或停止调试，刷新页面以查看整个饼图的Silverlight动画效果。与Web部件和可视化Web部件项目不同，调试后不需要再次部署解决方案，因为停止调试时不会收回.XAP文件。

12. 另一种创建Silverlight Web部件的方法

除了使用SharePoint自带的通用Silverlight Web部件，还可以创建自定义Web部件来托管.XAP文件。这种方法的优点是可以编写代码自动选择所需的.XAP文件，并根据需要调整Web部件的大小。

综上所述，通过以上步骤可以成功创建、部署和调试一个Silverlight Web部件，为SharePoint用户提供更丰富的交互体验。整个过程的流程图如下：

graph TD;
    A[准备工作] --> B[创建Visual Studio解决方案];
    B --> C[创建新的Silverlight应用程序];
    C --> D[准备开发环境];
    D --> E[创建饼图控件];
    E --> F[实现代码];
    F --> G[部署Silverlight Web部件到SharePoint];
    G --> H[测试和调试];
    H --> I[创建Silverlight Web部件并指向.XAP文件];
    I --> J[选择创建方式（通用或自定义）];

通过这个详细的指南，你可以逐步完成Silverlight Web部件的创建和部署，为SharePoint应用增添更多的交互性和视觉效果。希望这些步骤和代码示例能帮助你顺利实现目标。