转：C#程序员如何在Visual Studio Orcas中建立和运行Silverlight项目

初识Orcas Beta 1中的Silverlight 和 C# (SixSix翻译） 
英文原版地址
http://blogs.msdn.com/charlie/archive/2007/05/21/silverlight-and-c-in-orcas-beta-1.aspx

本文讲述的是作为C#程序员，如何在Visual Studio Orcas中建立和运行Silverlight项目.

最好的开始方式是确认你已经安装了 Visual Studio Orcas. 我更喜欢使用 Orcas betas的VPC 版本, 当然你也可以选择其他。如果你安装了VPC ，从Beta 1开始是很重要的，下载和安装其他需要的东东也很重要。

这是你需要下载和安装的东东:

Orcas Beta 1 
Silverlight 1.1 Alpha for Windows 
Silverlight Tools Alpha for Visual Studio 
Expression Blend 2 Free Trial 
你会发现下载the Silverlight SDK 是很有帮助的，它包含了有用的文档和示例。
第一个Silverlight项目
你可以直接从 Visual Studio 中建立项目或者使用Expression Blend来创建。.Visual Studio 和 Expression Blend 需要协作工作，你可以轻松地在他们之间切换。在这篇文章中，我将示范如何使用 Visual Studio来创建。

在Visual Studio中打开 File | New Project 。选择 Project types 中的 Silverlight ,选择Templates下的Silverlight project . .OK。一个Silverlight应用程序就创建好了。


图1: 在Visual Studio中创建Silverlight应用程序

你现在可以看到 Visual Studio中的Silverlight工程，就像图2所示一样,


图2: Visual Studio中的默认Silverlight 应用程序 (点击放大.)

你在编辑框中看到的XML代码叫做XAML，是定义你的应用程序界面的。XAML的读音是"zammel".你现在通过可以编辑XML来定义界面——当然，这是一个痛苦和艰难的过程。所幸，你可以Solution Explorer中右击Page.xml  ,在弹出菜单中选择"Open In Expression Blend"。你的项目就会被Expression Blend打开，如图3.


图 3: Expression Blend中的默认Silverlight应用程序. (点击放大.)

图3的右边是文件列表。Expression Blend的这个部分和Visual Studio里的Solution Explorer扮演着同样的角色。这两个应用程序共享着同样的项目资源，因此它们使用Visual Studio或Expression Blend打开都一样。换句话说，Expression Blend所创建的Silverlight程序可以用Visual Studio 打开，反之亦然。你的程序会自动生成一些代码，无论你使用的是Visual Studio还是Expression Blend创建它。 

图3中的白色部分叫Canvas, 你可以使用这一部分来创建你的界面。你也许想使用Expression Blend 左边的工具栏来开始。特别注意Shape tool，图4中的第二个，和text tool，第4中的第最后一个。


图 4:Expression blend中的 Shape tool 和Text tool   可以创建最简单的界面. 

右击shape tool ，在弹出菜单中选择Ellipse . 拖动ellipse 到Canvas 中部，改变它的大小。

在 Expression Blend 右侧选择Properties ，为你的形状设置颜色。.

拖动一个 Text block 到你的形状中部。.输入蚊子，, 选择Properties ，设置字体和颜色。

注意，Expression Blend 左侧的Objects 和Timeline 部分。 你可以选择Canvas, the Ellipse, 或Text block. 你可以通过右边的Properties改变你所选择对象的属性。

当你完成的时候，也许你会看到类似图 4的景象,希望你做得更漂亮～.


图 4: 一个 Ellipse 和一个 Text Tool 在白色的Canvas上. 左边,  Canvas被选择,；右边，是你所选择的Canvas的属性。（点击放大图片.）

在Expression Blend里，你可以按 F5启动项目。当然，你可能更愿意在Visual Studio中看到项目的效果。你可以简单的使用Alt-Tab ，切换回Visual Studio。你会被提示你的项目已经被更新的。按OK，此时你在Expression Blend中创建的代码就被现实到了Visual Studio里。如Listing 1.

Listing 1: The code generated in Expression Blend is visible near the bottom of this listing.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="parentCanvas" 
Loaded="Page_Loaded" 
x:Class="SilverlightProject3.Page;assembly=ClientBin/SilverlightProject3.dll"
Width="640"
Height="480"
Background="White"
> 

<Ellipse Fill="#FF6071B9" Stroke="#FF000000" Width="374" Height="280" Canvas.Left="145" Canvas.Top="63"/>
<TextBlock Width="303" Height="104.97" Canvas.Left="181" Canvas.Top="152" FontFamily="Comic Sans MS" FontSize="22"
FontWeight="Bold" Foreground="#FF2C30EB" Text="Those who are free of resentful thoughts surely find peace." TextWrapping="Wrap"/> 

</Canvas> 

你可以按F5 启动该项目。一个浏览器启动，你会在浏览器中看到你的项目，如图5所示。 


图 5: 在浏览器中显示的 Silverlight 项目. (点击放大.)

增加一个 Event Handler
让我们写一些代码，以便我们取得当用户点击text block内文字时的Event Handdler。I在Text Block部分中，添加如下的代码的XML代码。

x:Name="MyText" 

完成后，应该如下所示：:

<TextBlock x:Name="MyText" Width="303" Height="104.97" Canvas.Left="181" Canvas.Top="152" FontFamily="Comic Sans MS" FontSize="22" FontWeight="Bold" Foreground="#FF2C30EB" Text="Those who are free of resentful thoughts surely find peace." TextWrapping="Wrap"/>

在 Solution Explorer中点击Page.xml 左边的加号. 这个操作使你进入 Page.xaml.cs. 你可以在这个文件中写c#代码。

编辑Page.xaml.cs 中的Page_Loaded 方法 。像这样:

1:  namespace SilverlightProject3  
2:  {  
3:      public partial class Page : Canvas   
4:      {   
5:          public void Page_Loaded(object o, EventArgs e)   
6:          {   
7:              // Required to initialize variables   
8:              InitializeComponent();   
9:     
10:              MyText.MouseLeftButtonDown +=   
11:          }  
12:      }  
13:  }

当你键入 += operator的时候,按一次控件，然后按两下Tab. 代码会自动插入到你文件里面。如果没有成功，删除+=,再试一次。当你完成后，代码看上去会像这样： 

1:  namespace SilverlightProject3   
2:  {   
3:      public partial class Page : Canvas   
4:      {   
5:          public void Page_Loaded(object o, EventArgs e)   
6:          {   
7:              // Required to initialize variables   
8:              InitializeComponent();   
9:     
10:              MyText.MouseLeftButtonDown += new MouseEventHandler(MyText_MouseLeftButtonDown);  11:          }  
12:     
13:          void MyText_MouseLeftButtonDown(object sender, MouseEventArgs e)  
14:          {  
15:              throw new Exception("The method or operation is not implemented.");  
16:          }  
17:      }  
18:  } Modify line 15, and replace it so that the event handler looks like this:

1:  void MyText_MouseLeftButtonDown(object sender, MouseEventArgs e)   
2:  {   
3:     MyText.Text = "What you think you become.";   
4:  }

运行应用程序。. 在Ellipse中点击，文字会改变，如图6


图 6: event handler改变ellipse中的蚊子。比较图6和图5. 

Summary
在这篇文章中，你学到了写Silverlight应用程序最基本的只是。你看到如何创建在Visual Studio中创建应用程序，然后用Expression Blend加载它。然后你使用Blend中的工具创建用户界面，接下来回到Visual Studio里，你学习到了如何添加简单的Event Handler。 

来自：http://silverlight.cn/blogs/sixsix/archive/2007/05/23/orcas-beta-1-silverlight-c-sixsix.aspx

17 个解决方案

#1

好帖，谢谢楼主，mark！

#2

c#荒废很久啦

#3

好帖

#4

路过

#5

49076904欢迎AS程序高手和游戏开发者加入,菜鸟勿捞

#6

友情UP一下

#7

顶

#8

等我慢慢看来~

#9

支持！

#10

呵呵,楼主...

#11

good

#12

happy happy 

欢迎大伙来Ｃ# / .Net  7729746 交流社团 聊技术，项目合作。

Blogs　http://zhoufleru.cnblogs.com   

#13

真遗憾，这破机子跑不起来VisualStudio2008，只能看看，不过还是顶下

#14

该回复于2008-05-05 14:25:00被版主删除

#15

∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞

力争成为中国最大的架构师群联盟，架构师技术交流群：59049268正式开放！！！

已经上传的*软件产品的架构分析,本群资料仅供研究学习，不得商用！！！
google 、
eBay、
Youtube、
淘宝等
......
技术文章包括：
《自己动手写操作系统》
《搜索引擎-原理、技术与系统》
《企业应用架构模式》
......
重要的RUP实例
设计模式精解
......
资料陆续上传中
∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞∽∝∞

#16

写得好写得好！
------------------
IOAS：易学易用、灵活*、个人免费使用的办公系统速成工具。
详情请访问：www.ioas.net
------------------

#17

这个东西能不能做流媒体?