silverlight起步（二）——第一个silverligth

把所有的配置完成后，就可以进行sl开发了。

新建立silverlight项目，在建立的过程中，会弹出选项建立引用此silverlight项目的web项目。确定后，建立完毕。

我现在建立的sl项目名称为：SLApp

此项目下自动生成一些文件，其中的两个文件：

App.xaml

     App.xaml.cs 

MainPage.xaml

     MainPage.xaml.cs 

发现与aspx文件规则很相似。

 

其中的App.xaml文件用于应用程序声明共享的资源，隐藏的代码文件中可以处理像gllbal.asax文件功能相似的事情。例如：Application_Startup事件 

另一个文件MainPage.xaml文件是一个默认的xaml文件，是一个开始页面。 

加载这个MainPage.xaml控件的方法是：

App.xaml.cs中的：

private void Application_Startup(object sender, StartupEventArgs e)
{
     this.RootVisual = new MainPage();
}

 现在做一个简单的长方形。

（一）   在sl项目中添加sl用户控件，名字为SelfRectangle.xaml

现在xaml文件暂时叫做视图文件，cs文件叫代码文件。

添加了用户控件后，视图文件结构为：

<UserControl x:Class="SLApp.SelfRectangle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
    </Grid>
</UserControl>

 这里边包括两个结点：

·UserControl，根元素，做为视图文件中最高级别的元素。所有的UI元素都要在这里边

·Grid，布局面板控件，这种布局面板控件有三种，这是其中的一种。所有的UI元素都要放到布局中。

现在添加一个长方形，即在Grid结点内添加：

<Rectangle Fill="Red" Width="100px" Height="100px"></Rectangle>

其中的属性很好理解：填充色：Red，长宽

同时，把Grid的属性也定义一下，现在变成： 

<UserControl x:Class="SLApp.SelfRectangle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Blue">
        <Grid.RowDefinitions>
            <RowDefinition Height="120"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Red" Width="100" Height="100" Grid.Row="0" Grid.Column="0"></Rectangle>
    </Grid>
</UserControl>

（二）   设置这个控件为默认的引用控件

在App的代码文件中更改：

private void Application_Startup(object sender, StartupEventArgs e)
{
     this.RootVisual = new SelfRectangle();
}

（三）   在网站项目中添加新页RectangleTest.aspx

引入silverlight控件，aspx文件变成了： 

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Silverlight ID="slRectangle" runat="server" 
             Source="~/clientbin/SLApp.xap"></asp:Silverlight>
    </div>
</form>

这里只贴出了form之间的代码部分。

说明，asp:Silverlight可能不存在引用。这个方法大家都知道：

1 添加System.Web.Silverlight.dll引用

2 在web项目中的Web.config文件中添加asac控件的注册，即：

<controls>
        <add tagPrefix="asp" 
             namespace="System.Web.UI.SilverlightControls" 
             assembly="System.Web.Silverlight"/>
</controls>

引用中的Source属性，引用的是SLApp.xap文件。

在web项目中，有ClientBin目录，其中有SLApp.xap文件。它与建立的Silverlight项目名称相同，但扩展名不同，这里是xap（读zap），是一种压缩文件。可以通过解压缩工具打开。它就是silverlight项目生成后，bin中的打包文件，包括dll文件和其它文件。

（四）   生成silverlight项目并预览RectangleTest.aspx文件

可以看到效果。 

同样，Hello!的制作。

<dataInput:Label Name="lmsg" Content="Hello!"></dataInput:Label>

总结：

建立第一个SL，其实步骤很简单。安装完Silverlight3.0后，在创建项目时，会有silverlight模板，这里就不贴图了。

1 建立Silverlight应用程序

2 在建立的过程中，添加引用此Silverlight项目的网站，这个会弹出窗口，选择就可以了

3 创建完成后，会有两个项目：一个silverligh项目，一个网站

4 然后就按照步骤做就可以了