ComponentOne Studio® for Silverlight，五步实现一个RIA系统主页面

基于“五步实现系统主页面”系列文章思路，本文实现了一个SilverLight版RIA系统主页面的简单原型：

Silverlight虽然风头不劲，然作为技术人员学习技术，是一个很好的入手点：XAML、MVVM的设计思想即考虑到了Web的强大特性，又考虑到了Winform下做软件系统的高产出率。且说，在目前如火如荼的WPF、Windows Phone开发大潮中，SilverLight的技术完全可以大行其道。

工欲善其事，必先利其器。要做一个RIA系统, 首先得选择一套完备的Silverlight套件包。本文选择是Component公司出的 Silverlight套件，如同宣传的：如此时尚、如此智能、如此Silverlight 业界领先的Silverlight控件集。

看多官方提供的demo演示后，确信其具备完成一个RIA系统的主要控件。

开发环境：

1. Window 7 64位英文系统

2. Visual Studio 2012 SP3 英文版 (C#.net)?? .NetFramework 4.0? (注： Visual Studio 2010可用源码)

3. ComponentOne Studio? for Silverlight 业界领先的Silverlight控件集

最近使用Window 8系统，其metro 磁贴风格非常不错，所幸C1控件提供了C1Tiles控件，可方便的完成磁贴风格，故本系统围绕metro磁贴设计：

C1TreeView实现组织结构图
C1FlexGrid实现员工列表数据
C1Chart呈现订单图表
C1Chart3D呈现一个3D的图表样例
C1CoverFlow呈现系统滚动的图集

注：

1. C1DockTabControl实现主界面分块，已备系统升级扩展，如停靠日志功能、左侧停靠导航树、右侧属性等。

2. C1WrapPanel控件用来作为磁贴控件C1Tile、C1SlideTile、C1FlipTile的容器，可自适应不同屏幕尺寸。

Step 1： C1TreeView用来实现组织结构图

远远看去，和Windows Exploer一样。其实是用xaml写死的，具体见源码工程。

实现文字和图片的xaml代码。

  1:                   <c1:C1TreeViewItem>

  2:                     <c1:C1TreeViewItem.Header>

  3:                         <StackPanel Orientation="Horizontal">

  4:                             <Image Style="{StaticResource TreeIcon}" Source="Images/Resources/explorer/User.png" />

  5:                             <TextBlock Style="{StaticResource TreeText}" Text="User" />

  6:                         </StackPanel>

  7:                     </c1:C1TreeViewItem.Header>

  8:                 </c1:C1TreeViewItem>

Step 2： C1FlexGrid实现员工列表数据

C1FlexGrid的强大功能，在这个示例中仅仅展示了一部分：如可对列头实现竖呈现的。可对左上角空白栏呈现背景，这里呈现的是“IP”字母，背景是灰色的。? 还可有多个列头(HeadHeader)、多个行头（RowHeader）。

  1:         private void InitTopCells()

  2:         {

  3:             _flex.CellFactory = new CustomCellFactory();

  4:             _flex.ColumnHeaders.Rows[0].Height = 120;

  5:             _flex.TopLeftCells[0, 0] = "IP";

6:

  7:             // get grid's row headers

  8:             GridPanel rh = _flex.RowHeaders;

9:

 10:             // add a new fixed column to the grid

 11:             rh.Columns.Add(new Column());

12:

 13:             _flex.ColumnHeaders.Rows.Add(new Row());

 15:             // set the width and content of the row headers

 16:             for (int c = 0; c < rh.Columns.Count; c++)

 17:             {

 18:                 // width of this column

 19:                 rh.Columns[c].Width = new GridLength(60);

 20:                 for (int r = 0; r < rh.Rows.Count; r++)

 21:                 {

 22:                     // content of this cell

 23:                     rh[r, c] = string.Format("hdr {0},{1}", r, c);

 24:                 }

 25:             }

 26:         }

Step 3： C1Chart呈现订单图表

图表控件，选择是C1Chart，其内置12种主题、超过50种图表类型、灵活的数据绑定方式（MVVM）、运行时的互操作能力等等，再这里不一一赘述。

对图例的CheckBox，还颇费了一些心思，看代码：

  1: <c1:C1Chart x:Name="c1Chart1" c1:C1NagScreen.Nag="True"  >

  2:             <c1:C1ChartLegend  Background="DarkCyan" c1:C1NagScreen.Nag="True">

  3:                 <c1:C1ChartLegend.Template>

  4:                     <ControlTemplate>

  5:                         <StackPanel >

  6:                         <CheckBox IsChecked="true" Unchecked="CheckBox_Checked" Checked="CheckBox_Checked" Content="{Binding Path=LableName}">

  7:                         </CheckBox>

  8:                             <CheckBox IsChecked="true" Unchecked="CheckBox1_Checked" Checked="CheckBox1_Checked" Content="{Binding ElementName=c1Chart1, Path=Data.Children[1].Label}">

  9:                         </CheckBox>

 10:                         </StackPanel>

 11:                     </ControlTemplate>

 12:                 </c1:C1ChartLegend.Template>

 13:             </c1:C1ChartLegend>

 14:         </c1:C1Chart>

Step 4： C1Chart3D呈现一个3D的图表样例

3D图表非常炫，本文仅仅用默认系统示例呈现，更多内容，还需要在实际项目中探索，尤其是3D模型的考虑等。

  1:            c1Chart3D1.Children.Clear();

  2:             // create 2D array 10x10

  3:             int xlen = 10, ylen = 10;

  4:             var zdata = new double[xlen, ylen];

  5:             double stepx = 2.0 / (xlen - 1);

  6:             double stepy = 2.0 / (ylen - 1);

7:

  8:             // calculate function for all points in the range

  9:             for (int ix = 0; ix < xlen; ix++)

 10:             {

 11:                 for (int iy = 0; iy < ylen; iy++)

 12:                 {

 13:                     double x = -1.0 + ix * stepx; //  -1 <= x <= 1

 14:                     double y = -1.0 + iy * stepy; //  -1 <= x <= 1

 15:                     zdata[ix, iy] = x * x - y * y;

 16:                 }

 17:             }

18:

 19:             // create data series

 20:             var ds = new GridDataSeries();

 21:             ds.Start = new Point(-1, -1); // start for x,y

 22:             ds.Step = new Point(stepx, stepy); // step for x,y

 23:             ds.ZData = zdata; // z-values

24:

 25:             // add series to the chart

 26:             c1Chart3D1.Children.Add(ds);

Step 5： C1CoverFlow呈现系统滚动的图集

CoverFlow风格，是apple引入的：当初使用IPad的时候，确实被震撼了，故示例用于呈现公司的实景照片。话说照片照得不错，天真的很蓝。

  1:       private void loadImage()

  2:         {

  3:             List<string> urlList = new List<string>();

  4:             urlList.Add("/SL_5_demo;component/Images/c02-2.jpg");

  5:             urlList.Add("/SL_5_demo;component/Images/1.jpg");

  6:             urlList.Add("/SL_5_demo;component/Images/2.jpg");

  7:             urlList.Add("/SL_5_demo;component/Images/3.jpg");

  8:             urlList.Add("/SL_5_demo;component/Images/4.jpg");

9:

10:

11:

 12:             foreach (string item in urlList)

 13:             {

 14:                 coverFlow.Items.Add(new Grid

 15:                 {

 16:                     Children =

 17:                     {

 18:                         new Image

 19:                         {

 20:                             Source = new BitmapImage(new Uri(item, UriKind.Relative))

 21:                         }

 22:                     }

 23:                 });

 24:             }

25:

 26:         }

代码下载：

Silverlight 5_C#__demo_C1Chart_C1FlexGrid.rar

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台，并完美集成于 Visual Studio 的第三方控件集，包含 300 多种 .NET开发控件，提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能，被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务，并由技术支持工程师为您1对1解答。>> 发帖提问