Silverlight 4 学习（二）

概述五、实例 1、把上一提到的工具分别安装好后，就可以开始创建Silverlight 项目了，下边就从一下最简单的项目入手学习一下，实例实现的是DataGrid数据绑定及一些简单效果。 2、打开vs2010--文件--新建--项目  在d出来的界面中选择右边的Silverlight 应用程序，更改项目名称后单击确定，如下图所示： 3、选择 ASP.NET网站 后点击确定，如下图所示： 4、整个解决方案

五、实例

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

2、打开vs2010--文件--新建--项目  在d出来的界面中选择右边的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在工具箱位置如下图所示：

（2）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<TrainingCourses> ListTrainingCourses()
        {
            int i = 0;
          List<TrainingCourses> lTrainingCourses = new List<TrainingCourses>();
          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应用及原理",Details = "Socket应用及原理。。。。。",ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { name = "编程规范",Details = "编程规范。。。。。",ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { name = "多线程 *** 作",Details = "多线程 *** 作。。。。。",ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { name = "硬件及串口知识",Details = "硬件及串口知识。。。。。",ID = i++ });
          lTrainingCourses.Add(new TrainingCourses() { name = "产品集中培训",Details = "产品集中培训。。。。。",ID = i++ });
            return lTrainingCourses;
        }

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

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

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

 

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

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

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

  <GrID x:name="LayoutRoot" Background="#FFE6FFFF">
        <sdk:DataGrID x:name="dgList" autoGenerateColumns="False">
            <sdk:DataGrID.Columns>
                <sdk:DataGrIDTextColumn header="课程编号" Binding="{Binding ID}" />
                <sdk:DataGrIDTextColumn header="课程名称" Binding="{Binding name}"/>                      
                <sdk:DataGrIDTemplateColumn header="起始日期">
                    <sdk:DataGrIDTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding BeginTime,StringFormat=yyyy-MM-dd}"  />
                        </DataTemplate>
                    </sdk:DataGrIDTemplateColumn.CellTemplate>
                    <sdk:DataGrIDTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <sdk:DatePicker SelectedDate="{Binding BeginTime,Mode=TwoWay}" displayDateEnd="{Binding EndTime}"/>
                        </DataTemplate>
                    </sdk:DataGrIDTemplateColumn.CellEditingTemplate>
                </sdk:DataGrIDTemplateColumn>
                <sdk:DataGrIDTemplateColumn header="结束日期">
                    <sdk:DataGrIDTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding EndTime,StringFormat=yyyy-MM-dd}" />
                        </DataTemplate>
                    </sdk:DataGrIDTemplateColumn.CellTemplate>
                    <sdk:DataGrIDTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <sdk:DatePicker SelectedDate="{Binding BeginTime,Mode=TwoWay}" displayDateEnd="{Binding EndTime}"/>
                        </DataTemplate>
                    </sdk:DataGrIDTemplateColumn.CellEditingTemplate>
                </sdk:DataGrIDTemplateColumn>
                <sdk:DataGrIDTextColumn header="课程信息" Binding="{Binding Details}"/>             
            </sdk:DataGrID.Columns>
        </sdk:DataGrID>
    </GrID>
    （3）按CTrl+F5运行结果如下图所示：

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

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

  （1）     将MainPage.xaml 里的 GrID代码   </sdk:DataGrID> 上边加上如下代码：

<!-- 用于显示相应的行的详细数据的模板 -->
            <sdk:DataGrID.RowDetailstemplate>
                <DataTemplate>
                    <StackPanel margin="5" Background="#FFE6FFFF" Height="150">                      
                        <TextBlock Text="{Binding name}" margin="2"  />
                        <TextBlock Text="{Binding BeginTime}" margin="2"  />
                        <TextBlock Text="{Binding EndTime}" margin="2"  />
                        <TextBlock Text="{Binding Details}" margin="2"  />
                    </StackPanel>
                </DataTemplate>
            </sdk:DataGrID.RowDetailstemplate>

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

六、小结

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

 

本文链接地址为：http://blog.csdn.net/iscree/article/details/6625834

总结

以上是内存溢出为你收集整理的Silverlight 4 学习（二）全部内容，希望文章能够帮你解决Silverlight 4 学习（二）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。