WOW, The Web : Silverlight 2手把手系列教程

Silverlight 2 手把手(之六) 使用故事版实现定时器

jijia — Wed, 30 Apr 2008 04:28:00 GMT

在 Silverlight 2 手把手(之五) 中，我向大家介绍了如何使用 DispatcherTimer 对象实现定时器。下面我将就如何使用 Silverlight 的故事版建立一个定时器。

同样的，我们使用刚才建立的 XAML 文件

1. 建立一个 Storyboard myTimer

你可以使用 Blend 或者 Visual Studio 在 XAML 中建立一个空的故事版，需要给的 3 个参数分别是 x:name, Duration 和 Completed 的绑定事件

   1: <UserControl.Resources>

   2:     <Storyboard x:Name="myTimer" Duration="00:00:01" Completed="myTimer_Completed" />

   3: </UserControl.Resources>

2. 写入鼠标左键点击事件

定义按钮的两个状态机的文字以及对故事版的控制

   1: bool myState = true;

2:

   3: private void myBtn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

   4: {

   5:     if (myState)

   6:     {

   7:         myBtn.Content = "Stop";

   8:         myTimer.Begin();

   9:     }

10:

  11:     else

  12:     {

  13:         myBtn.Content = "Start";

  14:         myTimer.Stop();

  15:     }

  16:     myState = !myState;

  17: }

18:

3. 定义myTimer 的 Completed 事件

   1: int i = 0;

   2: void myTimer_Completed(object sender, EventArgs e)

   3: {

   4:     myText.Text = i++.ToString();

   5:     myTimer.Begin();

   6: }

这个例子的源码你可以从这里下载：

Silverlight 2 手把手(之四) 创建 Silverlight 2 控件

jijia — Wed, 16 Apr 2008 10:21:00 GMT

Silverlight 2 拥有更多的控件支持。你也可以自己定义控件，引用到你的项目中。

在 Silverlight 现有的控件中并没有正圆的这样一个控件，下面就如何实现一个正圆的控件步骤做一下简单描述，具体信息你可以参考后面的参考代码获得：

1. 首先在项目中添加新的 Item：

2. 在 x:Class="Control.Circle" 中置入现有椭圆控件：

   1: <Grid x:Name="LayoutRoot" Background="White">

   2:        <Ellipse x:Name="myEll"></Ellipse>

   3:    </Grid>

3. 定义正圆半径和填充颜色值：

   1: public Double Radius

   2:         {

   3:             get

   4:             {

   5:                 return myEll.Height /2 ;

   6:             }

   7:             set

   8:             {

   9:                 myEll.Height = value * 2;

  10:                 myEll.Width = value * 2;

  11:             }

  12:         }

  13:         public SolidColorBrush Fill

  14:         {

  15:             get

  16:             {

  17:                 return (SolidColorBrush)myEll.Fill;

  18:             }

  19:             set

  20:             {

  21:                 myEll.Fill = (SolidColorBrush)value;

  22:             }

  23:         }

4. 使用clr-namespace 定义控件命名空间：

   1: xmlns:lm="clr-namespace:Control"

5. 使用控件

   1: <UserControl x:Class="Control.Page"

   2:     xmlns="http://schemas.microsoft.com/client/2007"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:lm="clr-namespace:Control"

   5:     Width="400" Height="300">

   6:     <Grid x:Name="LayoutRoot" Background="White">

   7:         <lm:Circle Radius="40" Fill="black"></lm:Circle>

   8:     </Grid>

   9: </UserControl>

本文代码下载：

注：本文主要参考了 Laurence Moroney 先生在 MIX08 期间的图书《First Look, Silverlight 2》

在今年晚些时候 Laurence 的图书也会有中文版上市，我会在博客中给大家更多信息。

Silverlight 2 手把手(之三) 跟踪调试 Silverlight 2 应用

jijia — Wed, 16 Apr 2008 04:59:00 GMT

Silverlight 2 引用了强大的 .NET 支持，你可以很方便的跟踪和调试你的 Silverlight 2 应用程序。以下是两种最常用的调试和跟踪方式，你可以根据不同的场景进行使用。

一、使用 Debug.WriteLine 跟踪 Silverlight 2 应用

使用 Debug.WriteLine 这个方法跟踪 Silverlight 2 应用。

Debug.WriteLine Method

Namespace: System.Diagnostics
Assembly: System (in System.dll)

应用场景：这个方法主要面向开发人员。可以使开发者在做简单跟踪的时候不设置断点，跟踪对象，提高调试效率。结果可以在 output 窗口中获得跟踪结果：

二、使用 Managed HTML Bridge 跟踪 Silverlight 2 应用

使用 HtmlPage.Window.Alert() 方法来跟踪 Silverlight 2 应用。

需要引用 System.Windows.Browser; 命名空间

应用场景：这个方法面向开发和设计人员。在项目调试中，开发者可以将某一个事件调用的方法绑定到浏览器中，这样，设计师不需要知道断点、VS Output 窗口里面发生了什么，设计师可以直观的看到界面或者时间线出发的效果。

Technorati 标签: Silverlight

Silverlight 2 手把手(之二) 托管自己的 Silverlight 2 应用

jijia — Thu, 10 Apr 2008 08:24:00 GMT

Silverlight Steaming 是微软 Live 平台中的免费发布视频以及托管 Silverlight 应用的产品。今年 MIX08 大会上微软发布了 Silverlight Streaming 的 Beta 版本，Silverlight Streaming 有以下特点：

1. 高达 10G 的免费空间

你只需要拥有一个 Windows Live ID 就可以免费申请高达 10G 的存储空间。

2. 支持高达105M 的应用

单个应用或者视频的大小能够支持高达105M。

3. 支持高达 1.4M 的视频码流

在视频码流的支持上，Silverlight Streaming 也支持高达 1.4M/bps，给用户提供更加清晰的视频体验。

4. manifest.xml

你只需要在 Silverlight 应用中添加一个简单的 manifest.xml 文件，就可以把 Silverlight 应用免费托管到互联网上。

典型的引用 manifest.xml 的写法如下：

   1: <SilverlightApp>

   2:   <version>2.0</version>

   3:   <source>SilverlightApplication1.xap</source>

   4:   <width>400</width>

   5:   <height>300</height>

   6:   <background>white</background>

   7:   <isWindowless>false</isWindowless>

   8: </SilverlightApp>

对于 Silverlight 2 应用而言，你只需要取得编译后的 .xap 文件与 manifest.xml 打包放在一起就可以了。

5. 支持以文件方式访问、修改 Silverlight 应用

你可以通过在资源浏览器中直接访问和更改你的 Silverlight Streaming 应用。如: \\silverlight.services.live.com@SSL\DavWWWRoot\[ID]\[app name]

如何引用 Silverlight 应用

上传之后，你可以通过两种方式引用你的 Silverlight 应用。

1. iframe 形式

你可以嵌入到你的博客或任何网站上。

2. 通过引用 Live Control 在页面中嵌入 Silverlight (可以实现更好的安装体验)

相关资源：

Expression Encoder: Encoder.en.msi

Expression Encoder Silverlight Streaming 插件：SLS Publish Preview.msi

Windows Live Writer: Install_WLWriter.exe

Windows Live Writer Silverlight Streaming 插件：Insert_SLS.msi

想要赚$$$？

Silverlight Streaming 还将提供一种广告模式 Ads Pilot Program，你可以通过加入这个项目将自己上传的视频或者应用获得广告分成收益。

Silverlight 2 手把手(之一) Deep Zoom

jijia — Sun, 30 Mar 2008 13:17:00 GMT

下面的例子介绍了如何利用一刻钟的时间快速实现一个 Deep Zoom 应用，供您参考。

1. 启动 Deep Zoom Composer 预览版

2. 使用 Deep Zoom Composer 创建 SDI（Sea Dragon Index）文件集

选取使用照片

布置照片

输出 SDI 文件

输出结果

3. 使用 Visual Studio 2008 创建 Silverlight 网站应用

如果你没有安装 Silverlight 2 beta1 的插件，可以到这里下载。

4. 添加 SDI　文件集到 ClientBin 目录下

5. 使用 <MultiScaleImage> 引用 info.bin

<MultiScaleImage x:Name="DeepZoomCan" Source="[yourfolder]/info.bin" Height="294" Width="456" Canvas.Left="68" Canvas.Top="51" />

在 Page.xaml 中使用 MultiScaleImage 标签引用 DZC 打包生成的编译文件 info.bin

6. 编译，预览

7. 输入用户提示信息

您可以在 Expression Blend 2.5 3月预览版中调整文字的位置和大小，您也可以使用 VS2008，使用 <TextBlock /> 标签，调整文字信息。

8. 添加鼠标键盘响应事件

在 Page.xaml.cs 中加入对鼠标和键盘的事件响应，代码如下：

   1: namespace DeepZoomTest1   2: {   3:     public partial class Page : UserControl   4:     {   5:         Point mousePosition = new Point();   6:     7:         public Page()   8:         {   9:             InitializeComponent();  10:             InitializeMouseEvent();  11:         }  12:    13:         private void InitializeMouseEvent()  14:         {  15:             this.MouseMove += new MouseEventHandler(Page_MouseMove);  16:             this.KeyDown += new KeyEventHandler(Page_KeyDown);  17:         }  18:    19:         void Page_KeyDown(object sender, KeyEventArgs e)  20:         {  21:    22:             if (e.Key == Key.W)  23:             {  24:                 Zoom(1.2f, mousePosition);  25:    26:             }  27:    28:             else if (e.Key == Key.X)  29:             {  30:                 Zoom(0.8f, mousePosition);  31:             }  32:             else  33:             {  34:                 HtmlPage.Window.Alert("请输入 W 或者 X 进行缩放!");  35:             }  36:         }  37:    38:         void Page_MouseMove(object sender, MouseEventArgs e)  39:         {  40:             mousePosition = e.GetPosition(this);  41:         }  42:         public void Zoom(double zoom, Point pointToZoom)  43:         {  44:             Point logicalPoint = this.DeepZoomCan.ElementToLogicalPoint(pointToZoom);  45:             this.DeepZoomCan.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);  46:         }  47:     }  48: }

9. 添加对用户提示的 Alert 事件

Silverlight 2 中原生支持了对页面中的 DOM 调用！！！为了给用户更多的提示，在 Silverlight 2 中你可以添加以下键盘事件的判断，给用户更好的提示：

   1: else

   2: {

   3:     HtmlPage.Window.Alert("请输入"W"或者"X"进行缩放!");

   4: }

注意：你需要在 Silverlight 2 项目的默认引用中添加如下 namespace 的引用

   1: using System.Windows.Browser;

10. 最终效果

你可以到下面地址下载项目的源文件：

更多参考博客：

Expression 产品组博客

Dan Waters 的博客