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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

厅一一 2010-11-04 15:00:00 浏览699
展开阅读全文

把所有的配置完成后,就可以进行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/

转载请注明:博客园

网友评论

登录后评论
0/500
评论
厅一一
+ 关注