向 Silverlight2.0 出发（二）

安装好 Silverlight2.0 开发环境以后，开始试着写老掉牙的Hello Word。

一、新建Sil项目：
新建项目：SilverlightApplication1，以 WebApplication 应用程序方式新建 ，当然喜欢 Web Site 方式的也可以用站点方式。
新建项目后开发界面如图：

 

图中看到项目下主要分为 SilverlightApplication1 与 SilverlightApplication1Web 文件夹，前者放置与sil相关的xaml文件；后者放置承载sil动画项目的asp.net工程相关文件，有熟悉的 App_Data 数据源文件夹、Default.aspx 默认页等，并且目录下多出一个 ClientBin 文件夹，顾名思义为放置供客户端Sil编译器调用的bin文件的文件夹。另外还有两个"工程名+TestPage"为名的 html 和 aspx 文件，html 文件通过 Object 标签展现 Silverlight 插件，aspx则负责通过与下载服务器 ClientBin 文件中的 xap 文件与服务器 Silverlight 应用程序的类文件进行通信。

 

不用写什么代码，运行 SilverlightApplication1 ，然后终止掉，会看到本来空无一物的ClientBin下多出了一个 SilverlightApplication1.xap（项目名.xap） 文件，这个文件其实是供客户端在打开 SilverlightApplication1TestPage.html 时下载的xap文件。它使用了zip压缩算法将程序引用到的 .net 程序集与sil需要的xaml文件都统一打包了。

 

二、书写 Hello Word
在开发Sil时，与Sil相关的界面设计与后台代码大多都集中在 SilverlightApplication1 文件夹下，可以看到配置每一份sil UI界面的xaml文件都跟随着一份 .net 代码文件，与aspx/cs or vb文件的关系非常相似。
创建程序时VS2008自动创建了一份默认的Sil界面配置文件：Page.xaml文件。

以视图设计器方式打开page.xaml ，VS2008默认打开方式是上视图下代码的拆分模式，仿佛回到了DW的asp时代。

vs2008创建page.xaml时，顺带自动生成了以下代码：

 

 

1. <UserControl x:Class="SilverlightApplication1.Page"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="uc1" >
4.     <Grid x:Name="LayoutRoot" Background="#46461F" >        
5.     </Grid>
6. </UserControl>

<UserControl x:Class="SilverlightApplication1.Page"
表示创建容器UserControl，容器命名为UserControl，是由 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 决定的，而x:class 表示sil程序与服务器通信的 .net 文件名，x:class="命名控件.后台代码文件名"
<Grid x:Name="LayoutRoot" Background="#46461F" >
表示在容器中生成表格，此表格没有指定行列，默认为1行1列，默认为上下居中排列，表格的背景色为"#46461F"。

 

接下来，在自动生成的<Grid....></Grid>中加入按钮button。
<Button x:Name="mybutton" Content="按   下" Width="250" Height="50" FontSize="24" Foreground="Red" Click="root_Click" />
其实sil极像Flex，但其中标签属性却感觉比Flex更接近HTML和CSS属性，让人上手很快。这段意为：按钮的引用名为mybutton,text为按下，宽250高50，字体大小为24，字体颜色为红色，当点击时，与之对应的 .net后台方法名为root_click。
写完后，打开与page.xaml对应的page.vb（或cs），看到vs已经自动在vb文件中生成了空过程：root_Click

1.     Private Sub root_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
2.         
3.     End Sub

在过程中写入代码，把过程丰富：

1. Partial Public Class Page
2.     Inherits UserControl
4.     Private isbool As Boolean = False
6.     Public Sub New()
7.         InitializeComponent()
8.         Me.mybutton.Cursor = Cursors.Hand
9.     End Sub
11.     Private Sub root_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
12.         If isbool = False Then
13.             Me.mybutton.Content = "后    退"
14.             Me.mybutton.Foreground = New SolidColorBrush(Colors.Green)
15.             isbool = True
16.         Else
17.             Me.mybutton.Content = "点 击 我"
18.             Me.mybutton.Foreground = New SolidColorBrush(Colors.Red)
19.             isbool = False
20.         End If
21.     End Sub
22. End Class

运行后可以看到效果。

为了显示HelloWord，得把xaml标记改造一下。

1. <UserControl x:Class="SilverlightApplication1.Page"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="uc1" >
4.     <Grid x:Name="LayoutRoot" Background="#46461F" >
5.         <Grid.RowDefinitions>
6.             <RowDefinition />
7.             <RowDefinition Height="50" />
8.             <RowDefinition Height="50" />
9.             <RowDefinition />
10.         </Grid.RowDefinitions>
11.         <Button x:Name="mybutton" Grid.Row="1" Content="按   下" Width="250" Height="50" FontSize="24" Foreground="Red" Click="root_Click" />
12.         <TextBlock x:Name="mytext" Grid.Row="2" Text="" Width="250" Height="50" FontSize="24" Foreground="Red" TextAlignment="Center" />
13.     </Grid>
14. </UserControl>

<TextBlock x:Name="mytext" Grid.Row="2" Text="" Width="250" Height="50" FontSize="24" Foreground="Red" TextAlignment="Center" />
是一个标记，类似于VB中的label。表示在容器中生成名为mytext、放置于第2行、没有text文本、宽250高50、字体大小24、字体颜色为红色、上下左右文本居中显示的文本显示控件。

<Grid.RowDefinitions>
 <RowDefinition />
 ....
</Grid.RowDefinitions>

一连写了4个row，表示在LayoutRoot表格中有4行，其中第1、2行因为要放置按钮与字体标记，因此高与btuuon/textblock相同为50，这样一来，0行与3行因为没有设定高度默认为把剩余高度各占50％，会把1、2行挤在中间达到居中的目的。
button、textblock中多出了 Grid.Row="?" 的属性，表示当前控件应该放在第?行中。

 

最后在后台page.vb中加入代码：

1. Partial Public Class Page
2.     Inherits UserControl
4.     Private isbool As Boolean = False
6.     Public Sub New()
7.         InitializeComponent()
8.         Me.mybutton.Cursor = Cursors.Hand
9.     End Sub
11.     Private Sub root_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
12.         If isbool = False Then
13.             Me.mybutton.Content = "后    退"
14.             Me.mybutton.Foreground = New SolidColorBrush(Colors.Green)
15.             Me.mytext.Text = "Hello Word"
16.             isbool = True
17.         Else
18.             Me.mybutton.Content = "按    下"
19.             Me.mybutton.Foreground = New SolidColorBrush(Colors.Red)
20.             Me.mytext.Text = ""
21.             isbool = False
22.         End If
23.     End Sub
24. End Class

编译后运行，可以看到按下button后，textblock显示hello word，再按下回复初始状态。