silverlight开发入门（二）

chinaloft

浏览: 379249 次
性别:
来自: 北京

最近访客更多访客>>

congxz

215197583

dckill

MoCon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

silverlight研究

Silverlight Blend 浏览器应用服务器 ASP.net

silverlight开发入门（二）：实例讲解

接着第一章，我们进行实例的讲解。
【http://www.newflash3d.com---flash3D先锋队：北京贝武易科技公司】
有疑问请联系我QQ:363596350
进入Visual studio 2008后，出现的第一个是欢迎页面。

我们通过按Create Project来生成新的项目

在弹出的窗口中选silverlight项目

项目名称为：SilverlightApplication2（因为开始我们练习的时候建过一个1项目，所以这里为2）
项目默认存取的路径为：C:\Documents and Settings\Administrator\My Documents\Visual Studio 2008\Projects
当然我们也可以自己设置这些，我们选默认的就ok了。
默认的生成一个新的ASP.NET服务器来调试程序

我们看看SilverlightApplication2的文件结构

　下面一节包含了该Silverlight工程里的基本文件的讲解：

　　SilverlightApplication2TestPage.html

　　这是一个测试页，用来测试Silverlight程序。它包含了Silverlight控件并引用了两个JavaScript文件：Silverlight.js和TestPage.html.js。下面是SilverlightApplication2TestPage.html的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>SilverlightApplication2</title>

    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    #silverlightControlHost {
	    height: 100%;
    }
    </style>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
        
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            } 
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;
            
            var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {           
                if (args.lineNumber != 0)
                {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>

<body>
    <!-- Runtime errors from Silverlight will be displayed here.
	This will contain debugging information and should be removed or hidden when debugging is completed -->
	<div id='errorLocation' style="font-size: small;color: Gray;"></div>

    <div id="silverlightControlHost">
		<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
			<param name="source" value="ClientBin/SilverlightApplication2.xap"/>
			<param name="onerror" value="onSilverlightError" />
			<param name="background" value="white" />
			<param name="minRuntimeVersion" value="2.0.31005.0" />
			<param name="autoUpgrade" value="true" />
			<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
     			<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
			</a>
		</object>
		<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
</body>
</html>

VS2008可以分离视图里展示页面，这是VS2008的新特性。使用分离视图，你可以在浏览HTML代码时同时预览它在浏览器中的效果。如图

分离后的设计和代码视图

Page.xaml

　　这个文件包含了你的Silverlight应用程序的用户界面。下面列出了VS2008创建的缺省内容

<UserControl x:Class="SilverlightApplication2.Page"
    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>

如果我们把Background="White" 改为 Background="Red">，我们会实时的看到我们的画布变为红色的。

Silverlight.js

　　这是微软提供的创建所有的必要的部分用来确保目标浏览器可以运行Silverlight程序。通过将此文件包含在你的应用程序中，目标Web浏览器将会在未安装Silverlight运行时的情况下要求安装必须的运行时(每个Silverlight程序必须包含这个文件)。在使用许可的规定下，你不得修改这个文件。在运行多个Silverlight程序的Web服务器上，你可以只放置一个该文件的拷贝，并且将所有包含Silverlight内容的页面指向这个页面。

使用XAML创建用户界面

　　VS2008具备支持XAML内容的IntelliSense。这使得界面开发更有效率了，但是当前这里所用的VS2008版本没有一个XAML内容的查看器。这就是说，每次开发时必须运行一遍来查看其内容。

　　好消息是你可以使用微软的另外一个工具——Expression Blend来创建XAML界面。微软Expression Blend是一个专业级的设计工具，用来为Windows程序设计专业级的用户界面。最新的Blend版本，Expression Blend 2 August Preview，允许你创建基于Silverlight的程序。

　　使用Expression Blend2打开Page.xml，右击选择Open in Expression Blend…图所示

可视化编辑组件的的Expression Blend 2界面。

现在我们为这个页面增加一些控件。首先，创建一个圆角按钮，如图6所示。有了这个按钮，你可以在上面增加一些文字描述信息。

按＋号，生成新的故事板。

继续

这里我们刚才新建的按钮就有了时间轴的概念了，也就是它可以进行动画了。

我们可以简单的调节一些动画，这里就不用讲了，简单的调调。

我们切换到代码的形式看看。

<UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
	<UserControl.Resources>
		<Storyboard x:Name="Storyboard1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-33"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="113.213" KeySpline="0,0,0.75,1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.3000000" Value="161" KeySpline="0.25,0,1,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-20"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01.2000000" Value="14.91" KeySpline="0,0,0.75,1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.3000000" Value="114" KeySpline="0.25,0,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Red">

    	<Button Height="51" Margin="56,80,193,0" VerticalAlignment="Top" Content="我的按钮" RenderTransformOrigin="0.5,0.5" x:Name="button">
    		<Button.RenderTransform>
    			<TransformGroup>
    				<ScaleTransform/>
    				<SkewTransform/>
    				<RotateTransform/>
    				<TranslateTransform/>
    			</TransformGroup>
    		</Button.RenderTransform>
    	</Button>

    </Grid>
</UserControl>

保存文件。
回到Visual Studio 2008编辑界面，它有一个提示更新文件的界面，更新即可。

我们看到项目更新过来了，编译执行项目（到这一步，按钮实现了，但还没有动起来）。

　　你已经看到了使用VS2008创建Silverlight应用程序的过程。你使用XAML来定义Silverlight程序的用户界面，你可以使用VS2008，Expression Blend2或手写的方式来完成它。希望你从本文得到了灵感去深入了解Silverlight。