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在工具箱位置如下图所示：

（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应用及原理", 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代码更改为下边代码（代码意思后边有机会细说一下）：

  <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.youkuaiyun.com/iscree/article/details/6625834