silverlight起步(二)——第一个silverligth

简介: 把所有的配置完成后,就可以进行sl开发了。 新建立silverlight项目,在建立的过程中,会弹出选项建立引用此silverlight项目的web项目。确定后,建立完毕。 我现在建立的sl项目名称为:SLApp 此项目下自动生成一些文件,其中的两个文件: App.xaml      App.xaml.cs  MainPage.xaml      MainPage.xaml.cs  发现与aspx文件规则很相似。

把所有的配置完成后,就可以进行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的属性也定义一下,现在变成: 

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
< 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文件变成了:

 

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
< 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 然后就按照步骤做就可以了

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章

热门文章

最新文章