Silverlight 4 学习（二）

五、实例

1、把上一提到的工具分别安装好后，就可以开始创建Silverlight 项目了，下边就从一下最简单的项目入手学习一下，实例实现的是DataGrid数据绑定及一些简单效果。

2、打开vs2010--文件--新建--项目  在弹出来的界面中选择右边的Silverlight 应用程序，更改项目名称后单击确定，如下图所示：

3、选择 ASP.NET网站 后点击确定，如下图所示：

4、整个解决方案的架构如下：

（1）编译前 根目录下的文件ClientBin文件夹是空的，直接运行一下程序(Ctrl+F5)后ClientBin文件夹下多了一个名为SilverlightTest1.xap的文件里边存好多资信息，这样构成了完整的解决方案。

（2）各文件意思

.xap文件：是一个标准的.NET程序集，在编译的时候所有的XAML标识和资源文件如图片等都会包含在里面，采用了标准的Zip压缩算法，以减少客户端下载的文件体积。

silverlight.js文件：提供一些 JavaScript 帮助器函数，这些函数用于将 Silverlight 插件嵌入某一网页和用于自定义 Silverlight 安装体验。

.aspx和.html文件：于C#.Net不同的是，网页所呈现的内容不是写在这里的，而是通过.xap文件将编写好的.xaml文件嵌入到他们的页面里边。

web.config：站点配置文件。

5、打开MainPage.xaml文件，在设计试图里直接拖拽一个DataGrid，如下图所示，这一操作也可以在ExpressionStudi0中完成，还可以在代码区直接写代码实现。

（1）DataGrid在工具箱位置如下图所示：

6、先做简单的数据绑定

（1）数据结构定意

 //数据结构
        public class TrainingCourses
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public DateTime BeginTime { get; set; }
            public DateTime EndTime { get; set; }
            public string Details { get; set; }
        }

（2）构造临时数据（这里是随便定意的）

 //构造临时数据     
        public List listTrainingCourses()
        {
            int i = 0;
          List lTrainingCourses = new List();
          lTrainingCourses.Add(new TrainingCourses() { Name = "主程序架构", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "主程序架构。。。。。", ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { Name = "Socket应用及原理", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "Socket应用及原理。。。。。", ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { Name = "编程规范", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "编程规范。。。。。", ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { Name = "多线程操作", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "多线程操作。。。。。", ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { Name = "硬件及串口知识", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "硬件及串口知识。。。。。", ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { Name = "产品集中培训", BeginTime = DateTime.Now.AddDays(i), EndTime = DateTime.Now.AddDays(i + 1), Details = "产品集中培训。。。。。", ID = i++ });
            return lTrainingCourses;
        }

（3）数据绑定（没有做什么外理，写在初始化方法 InitializeComponent();后就行）

         //数据绑定
            try
            {
                dgList.ItemsSource = listTrainingCourses();
            }
            catch (Exception)
            {
                throw;
            }

（4）按CTrl+F5运行结果如下图所示：

7、可以看出日期显示太细，更改太麻烦，现在做一点小小的改进

（1）打开vs2010--项目--添加引用  在弹出来的界面中选择.NET中的System.Windows.Controls，如下图所示：

（2）将MainPage.xaml 里的 Grid代码更改为下边代码（代码意思后边有机会细说一下）：

 
       
           
               
                                      
               
                   
                       
                           
                       
                   
                   
                       
                           
                       
                   
               
               
                   
                       
                           
                       
                   
                   
                       
                           
                       
                   
               
                             
           
       
   
    （3）按CTrl+F5运行结果如下图所示：

双击日期内容外点右边小方格显示日历（记得以前是用js实现这个效果的），如下图所示：

8、下边再做一点小处理，就是点一行时，显示一行的信息。

  （1）     将MainPage.xaml 里的 Grid代码    上边加上如下代码：

（2）点击某一行时效果如下所示：

六、小结

学习了两天Silverlight，挻好玩的，至少知道了页面好多功能以前都要调长篇js才能实现，比如子页面的冻结，以前做的时候引了不少js呢，现在一句话就完成了，可惜没有深入学习一下，以后有机会再说吧，现在要先把它放一放。。。。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！