silverlight开发入门（二）

最新推荐文章于 2012-06-12 13:35:24 发布

chinalofthjh

最新推荐文章于 2012-06-12 13:35:24 发布

阅读量100

点赞数

分类专栏： silverlight研究文章标签： Silverlight Blend 浏览器应用服务器 ASP.net

silverlight研究专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[b]silverlight开发入门（二）：实例讲解[/b]

接着第一章，我们进行实例的讲解。
[b]【[url]http://www.newflash3d.com[/url]---flash3D先锋队：北京贝武易科技公司】[/b]
有疑问请联系我QQ:363596350
进入Visual studio 2008后，出现的第一个是欢迎页面。
[img]/upload/attachment/68562/35e2c39f-206d-3216-bfe5-acfd33106b71.jpg[/img]
我们通过按Create Project来生成新的项目
[img]/upload/attachment/68564/a4120e95-ecb9-3b25-91a8-df2c045438c3.jpg[/img]
在弹出的窗口中选silverlight项目
[img]/upload/attachment/68566/4d3bd087-2a48-33ee-aca6-cd8bfb21ac4b.jpg[/img]
项目名称为：SilverlightApplication2（因为开始我们练习的时候建过一个1项目，所以这里为2）
项目默认存取的路径为：C:\Documents and Settings\Administrator\My Documents\Visual Studio 2008\Projects
当然我们也可以自己设置这些，我们选默认的就ok了。
默认的生成一个新的ASP.NET服务器来调试程序
[img]/upload/attachment/68570/1355e1d2-e71a-3e9a-bea2-cdf5a8439bdf.jpg[/img]
我们看看SilverlightApplication2的文件结构
[img]/upload/attachment/68578/a2cf49dd-9db2-331c-91be-89d94d4696d5.jpg[/img]

　下面一节包含了该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代码时同时预览它在浏览器中的效果。如图
[img]/upload/attachment/68593/e289df7e-1cef-330e-8ad4-ce81611d4e16.jpg[/img]
分离后的设计和代码视图
[img]/upload/attachment/68595/9eaab89e-1b70-31cc-9450-83e320098ac8.jpg[/img]

[b]Page.xaml[/b]

　　这个文件包含了你的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">，我们会实时的看到我们的画布变为红色的。
[img]/upload/attachment/68597/5d44a5f7-3a75-304d-8cff-300cdd8ee1f8.jpg[/img]

[b]Silverlight.js[/b]

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

[b]使用XAML创建用户界面[/b]

　　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…图所示
[img]/upload/attachment/68601/dadaf8b6-b07f-33cf-b2d0-fce4e4471511.jpg[/img]
可视化编辑组件的的Expression Blend 2界面。
[img]/upload/attachment/68603/3ad5aa27-fc5d-3bba-8cdd-482d6e9c3e65.jpg[/img]
现在我们为这个页面增加一些控件。首先，创建一个圆角按钮，如图6所示。有了这个按钮，你可以在上面增加一些文字描述信息。
[img]/upload/attachment/68605/76e0756b-4696-3dc2-a210-e2b723739e9c.jpg[/img]
按＋号，生成新的故事板。
[img]/upload/attachment/68609/adf7c4d7-b397-3056-b44b-79c46c0821f4.jpg[/img]
继续
[img]/upload/attachment/68611/73d2ffb2-2f3a-31b4-8ba3-f14c6595cefc.jpg[/img]
这里我们刚才新建的按钮就有了时间轴的概念了，也就是它可以进行动画了。

[img]/upload/attachment/68613/79622185-5513-3810-aaae-1e5284d90e48.jpg[/img]
我们可以简单的调节一些动画，这里就不用讲了，简单的调调。

[img]/upload/attachment/68619/a8982612-5779-3da7-bd76-0d6b1c7cf9bb.jpg[/img]
我们切换到代码的形式看看。

<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编辑界面，它有一个提示更新文件的界面，更新即可。

[img]/upload/attachment/68622/0b38028d-3d93-3020-bb8b-e5c3e2bb8152.jpg[/img]
我们看到项目更新过来了，编译执行项目（到这一步，按钮实现了，但还没有动起来）。

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

chinalofthjh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
silverlight开发入门（二）

[b]silverlight开发入门（二）：实例讲解[/b]接着第一章，我们进行实例的讲解。[b]【[url]http://www.newflash3d.com[/url]---flash3D先锋队：北京贝武易科技公司】[/b]有疑问请联系我QQ:363596350进入Visual studio 2008后，出现的第一个是欢迎页面。[img]/upload/attachme...
复制链接

扫一扫

专栏目录