扬帆☆启航

【原文地址】Silverlight Tutorial Part 8: Creating a Digg Desktop Application using WPF
【原文发表日期】 Friday, February 22, 2008 5:46 AM

这是8个系列教程的第八部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。

使用WPF创建一个Digg桌面应用

这最后一个教程的目的与前面7个有点不同。我们实际上不将在本教程里在Silverlight中运行代码，而是将使用WPF和.NET 3.5。我们将拿我们编写的，在浏览器中运行于Silverlight中的现有的Digg应用代码，重用它来以Windows桌面应用的方式运行。

随Silverlight发布的是一套与.NET 框架完整版本相兼容的API子集。这么做的目的就是允许开发人员学习一个共同的编程模型和工具集，能够在RIA web应用，丰富的Windows桌面应用和Office解决方案之间重用学到的技能，代码和内容。

下面是我采取的步骤，来重用我们现有的Digg Silverlight应用代码（运行于浏览器中），来建造一个Windows桌面应用的版本（运行于浏览器外）。

第一步：创建一个新的WPF桌面应用

我们先开始使用VS 2008创建一个新的WPF桌面应用。我们将之命名为“DiggDesktopSample”：

这会在VS中创建一个项目，内含2个文件，一个App.xaml，一个 Window.xaml：

注意，这个项目的结构与我们在本系列教程的第一篇里创建的Silverlight应用的结构非常类似（拥有一个App.xaml 文件，一个 Page.xaml 文件）。

第二步：把现有的Digg应用的代码拷贝进WPF应用中

我们将把现有的DiggApplication Silverlight代码拷贝/粘贴进我们的新DiggDesktopSample Windows项目中：

目前在Beta1版本中，这个拷贝/粘贴是个手工步骤，我们最终将有一个自动化的方式来在不同项目类型间移动代码。

第三步：修正几个问题

我需要做2个改动，才能使我们现有的Digg例程代码被成功编译：

1) Silverlight Beta1 XAML定义的命名空间 xmlns:URL与完整的WPF桌面版本不同。我需要改动我拷贝进新项目的XAML文件指向完整WPF的定义。这是在发布前我们还正在研究的东西。

2) 我需要把<&lt;WaterMarkTextBox>控件改成<TextBox>，把 <HyperlinkButton> 控件改成<TextBlock>。这2个控件是Silverlight Beta1 版本中新有的，不存在于完整的WPF版本中（但我们会在将来添加它们）。但我不用改动跟这些控件相关的任何代码，也不用改动网络调用，LINQ to XML, 或数据绑定代码。

做完这些小改动后，项目就可以干净地编译了。

第四步：把Digg应用宿主与桌面窗口中

然后我打开桌面项目中的Windows1.xaml 文件（它是在应用启动时装载的默认窗口）。

我把窗体的标题改成“Digg Desktop Version”，扩大了窗口默认的宽度和高度。

然后我把来自前面的Digg Silverlight 项目中的Page.xaml 用户控件加到窗口中作为根控件。这在窗口装载时，会载入该控件并使之可见。我不用改动Page类的代码，或者对其中的东西改名。因为是从UserControl继承而来，它是完全可以宿主于任何WPF窗口或控件中的。

我改动的最后一样东西是因为Digg REST API 服务器会试着检测是否是非浏览器/服务器在访问它，有时会在这些情形下给予一个拒绝访问的回复（大概是防止自动脚本访问他们的服务）而导致的一个问题。我通过让网络访问经过一个代理URL解决了这个问题（没有代码变动，只是URL改动）。

第五步： 运行应用

然后，我能够运行我们新的DIgg桌面应用。所有的功能都跟Silverlight的版本一样工作，应用的行为也完全一样：

在从列表中选择一个故事后，细节用户控件显示为：

浏览器版本和桌面版本间有几个细微的样式区别。这主要是因为WPF在默认情形下继承了基于当前用户选择的操作系统主题的默认样式（字体，颜色，卷动条等等），而Silverlight 则有一个我们在所有操作系统上都使用的默认主题。如果我们要使得桌面版本和浏览器版本绝对一致，我们可以在我们的样式和控件模板中更明确地指定，否则的话，桌面版本会基于用户的OS主题做稍微的变动。

结语

我们会在将来推出在Silverlight和WPF项目之间共享代码的更详细的注意事项和推荐的最佳实践指南。我认为你会发现你在建造Silverlight应用时学到的技能和知识可以很好地转移到完整的WPF的项目中去。我们也致力于一个非常高的兼容水平，能在解决方案间促进好的代码重用，促进控件，内容和代码的轻松共享和利用。

希望本文对你有所帮助，

Scott

【原文地址】Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel
【原文发表日期】 Friday, February 22, 2008 5:48 AM

这是8个系列教程的第七部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。

如何定制控件的观感（Look and Feel）

WPF和Silverlight编程模型中一个强大无比的功能，就是能够完全定制所使用的控件的观感（Look and Feel ）。这允许开发人员和设计师对控件的界面以微妙和戏剧性的方式进行精雕细琢，促成无比的灵活性以创建出恰如所愿的用户体验。

在这篇教程里，我们将看一下你可以定制控件的几种方式，然后在结尾使用这些技术对我们的Digg应用的用户界面润色一下。

定制控件的内容

在这个系列的第一部分里，我们在页面上加了一个简单的按钮控件，示范了如何把它的内容设成一个自定义的“Push Me!”文字字符串。然后我们连接了一个Click事件处理函数，在它被点击时执行一些代码：

这导致按钮在浏览器里象下面这么显示：

关于按钮控件，也许会让你感到惊奇的一件事情是，它的Content属性，不必是象“Push Me!”这样简单的字符串。实际上，我们可以把Content属性设成我们想要的任何形状或控件序列：

譬如，我们可以嵌入一个StackPanel，内含 <Image> 和 <TextBlock> 控件：

这会导致我们的按钮在运行时看上去会象下面这样。注意，它依然保留同样的功能行为（按它的话，按钮会陷下去，点击事件处理函数也会象以前一样触发）：

我们也可以使用形状控件（象下面这样的Ellipse控件）来在按钮里面创建自定义的矢量图像：

注意上面我是怎么使用一个偏移RadialGradientBrush来加一个非常好看的反射式光泽来填充Ellipse控件的：

我们甚至可以搞些古怪，在按钮内嵌入可交互的象日历这样的控件：

在上面的例子中，日历控件是完全可以交互的，意味着终端用户可以前后翻月历，在日历里选择一个日期，然后按其中的按钮，触发Click事件处理函数：（注：我不清楚这是否会是一个好的用户体验，但它确实展示了你所能做之灵活性！）

我上面概述的这些类型的内容定制场景不仅对按钮控件有效，同样地对其他继承自ContentControl基类的其他控件也工作。

使用控件模板定制控件

为Silverlight 和 WPF所用的控件模型，所允许之定制，远远超出控件内部的内容。它还允许你用你想要的任何东西完全替换控件的视觉树（visual tree），同时还保持控件的同样行为。

例如，我们不想要我们的按钮拥有一个默认的长方形的按钮的外观，而是要它们有一个象下面这样的自定义的圆形按钮外观：

我们可以这么做，在App.xaml文件中创建一个“RoundButton”样式，在其中，我们将改写按钮的Template属性，提供一个内含一个Ellipse控件和一个TextBlock的ControlTemplate来替换按钮的默认长方形外观：

然后我们可以让<Button>引用这个Style资源来使用这个“RoundButton”的观感：

在控件模板中融入内容

你也许会注意到一件事情，在上面的“RoundButton”控件模板中，按钮的大小，以及显示在其中的内容，都是写死的（总是“Push Me!”）。

好消息是，WPF 和 Silverlight也能让我们对这些设置进行定制。我们可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法 （markup extension syntax） 来绑定到控件的属性来实现。这允许我们的控件模板随着外部开发人员设置在控件的属性而改变：

注意上面，不是加 <TextBlock>控件来显示内容，而是使用<ContentPresenter>控件。那会允许我们不光让按钮显示文字字符串，而且可以显示任何自定义的内容（就象我们在本教程早先时候做的那样）。

然后，我们可以在下面的三个按钮上使用上面的Style（每个按钮都有不同的内容和属性设置）：

上面的按钮然后就会象下面这样显示（对了，缩小的日历控件还支持翻页和日期选择！）：

如果我们想进一步，我们还可以往ControlTemplate中加故事板动画（来处理象“hover（悬浮）”,"focus（得到焦点）","pushed（按下）"这样的按钮状态）。这个能力允许我们创建非常优美的用户交互场景，同时还能促成HTML中不能实现的场景。

在应用中操作控件的开发人员可以对所有这些样式和控件交互定制保持一无所知，他们还可以依然如故地处理控件的事件和操作控件的对象模型，而让设计师另外使用样式和模板对控件的观感进行精雕细琢和定制。

对我们的Digg应用进行润色（Polishing up）

至此，我们讨论了控件模板工作原理的一些基础知识，让我们来在几个地方用它们来给我们的Digg应用的UI加些点缀。

目前，应用中一个明显需要一些加工的地方是我们用户控件的“Close”（关闭）按钮：

好消息是，这对我们（或者跟我们协作的设计师）来说很容易修正。我们可以在App.xaml文件中的 "CloseButton" 样式中加一个ControlTemplate，加一些自定义的矢量形状来提供一个比较好看的关闭按钮（注：比我更称职的设计师大概还会加悬浮和动画行为到矢量图像形状上去，让它更好看些）：

重新运行我们的应用的话，按钮看上去象下图：

我们应用中我认为应该润色的第二个地方是ListBox的外圈界面。如果你仔细看的话，你可以看到Beta1版本中的ListBox有一个嵌套的边框，作为它的默认外观（注：我们还没最后决定要发布的默认皮肤，所以在最终版之前，这非常有可能会改变）：

我们可以除去这个，通过定制它的控件模板来给与ListBox一个平的边框（flat border）。下面是一个以自定义模板样式化了的，有平的边框的ListBox ：

注意我们是如何除去ListBox的边框控件的，我们只用了Silverlight中的<ScrollViewer>控件（该控件允许其中任何内容做卷动），将一个<ItemsPresenter/>控件嵌入其中，该控件负责ListBox中实际条目的显示（它使用了我们在第四部分中创建的 <DataTemplate> 来显示这些条目）。

下面是它现在给与我们的List更为平直的外观：

比较酷的是，为了做这些观感的改动，我们不用更改应用中的任何代码，或者修改实际的控件的XAML标识。这种代码、设计的分离能在Silverlight和WPF应用中促进开发人员和设计师之间的流畅的工作流程。Expression Blend 和所有的 Expression Studio产品把这些控件设计功能提到了又一个高度，将提供方便这种定制的丰富的设计师工具集。

下一步

至此，我们完成了Digg应用在Silverlight中的实现。

最后一步，是实现一个桌面应用的版本。好消息是，做起来并不难，因为Silverlight是完整WPF和.NET框架的一个子集，所以概念，代码和内容都很容易转移过去的。

想看是如何实现的，让我们跳到下一个教程：《使用WPF创建一个Digg桌面应用》。

【原文地址】Silverlight Tutorial Part 6: Using User Controls to Implement Master/Detail Scenarios
【原文发表日期】 Friday, February 22, 2008 5:50 AM

这是8个系列教程的第六部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。

理解用户控件

Silverlight和WPF的一个根本性的设计目标是允许开发人员能够轻松地把UI功能封装成可重用的控件。开发人员可以通过从一个现有的Control类（或Control基类或象TextBox, Button等这样的控件）继承而来实现新的自定义控件。或者，他们也可以创建可重用的用户控件，这既方便使用XAML标识文件来组成一个控件的UI，而且实现起来也容易。

对我们的Digg应用，我们想要实现一个主从表场景，在其中，应用允许终端用户搜索一个主题，填充一个跟该主题相关的故事的列表，然后允许他们从中选择一个故事来调出细节。例如，从列表中选择一个下述故事：

会调出这个故事的细节视图：

我们将建造一个StoryDetailsView用户控件来实现这个细节视图，在从ListBox中选出一个故事时，我们将显示这个视图。

创建StoryDetailsView 用户控件

我们开始在Visual Studio中的DiggSample项目上右击，选择“添加新项”，这会调出一个新项的对话框，我们将选择UserControl模板，将我们要建的新控件命名为“StoryDetailsView”：

这会往我们的DiggSample项目中添加一个以此为名的新UserControl：

使用用户控件建造一个基本模式对话框

我们将使用我们的StoryDetailsView控件有效地显示一个包含故事细节的对话框。当我们的故事细节用户控件显示时，我们将要它出现在网页的其他内容的上方，确保终端用户在关闭细节视图之前无法操作页面上的其他东西。

有几种不同的方式我们可以实现这个模式对话框似的行为。对这个特定的场景，我们将先从打开StoryDetailsView.xaml用户控件着手，往其中加入如下XAML内容：

上面第一个控件<Rectangle>是配置成Stretch以占据屏幕上剩下的空间，它的背景填充颜色是有点透明的灰色（因为它的Opactity 是 .765，你还可以看到一点它后面的东西 ）。第二个控件<Border>然后将重叠在这个Rectangle控件之上，在屏幕上占据一个固定的宽度。它具有一个蓝色的背景色，内含一个Close（关闭）按钮。

在显示时，我们的StoryDetailsView用户控件目前将显示象下面这样的UI：

我们可以在该用户控件的后台代码文件中实现“CloseBtn_Click”事件处理方法，在按下按钮时，关闭按钮的事件处理函数将把用户控件的Visibility属性设成为“Collapsed”，这会导致它从屏幕上消失，用户将返回到下面的内容：

显示我们的StoryDetailsView控件

让我们的StoryDetailsView用户控件出现在屏幕上的一个简单的方式是把它加在Page.xaml文件的底部，然后将其默认的Visibility属性设成Collapsed（意味着在应用装载时是不可见的）：

然后我们在Page.xaml的后台代码类中处理ListBox 控件的SelectionChanged事件：

当用户选择列表中的一个特定故事时，我们可以使用ListBox 的 SelectionChanged事件将 ShowDetailsView 用户控件的Visibility属性设成“Visible”：

这会导致我们的模式用户控件对话框出现，在用户点击它的“Close（关闭）”按钮时，它就会消失，用户就可以随意选择另一个故事，重复这个过程。

把故事数据传入我们的StoryDetailsView用户控件

最终我们想要我们的StoryDetailsView用户控件显示跟终端用户在故事ListBox中选择的故事有关的详细信息。

在我们的ListBox的SelectionChanged事件处理函数中（在我们的page的后台代码类中），我们可以通过ListBox的SelectedItem属性获取对应于用户所选择的ListBox中的条目行的那个DiggStory数据对象。

我们可以用来把这个 DiggStory 对象传入我们的StoryDetailsView用户控件的一个做法是，就在显示用户控件之前，把用户控件上的DataContext属性设置成所选择的DiggStory故事对象：

然后我们在我们的用户控件内编写代码，使用DataContext来显示结果，或者我们也可以使用数据绑定表达式绑定其值。

例如，我们可以象下面这样更新StoryDetailsView的XAML，使用数据绑定表达式来来显示所选故事的标题：

现在，当用户点击列表中的一个故事时：

我们ListBox的事件处理函数就会处理其选择，将用户控件的DataContext设成所选择的DiggStory对象，然后显示用户控件：

注意上面因为我们添加的数据绑定表达式的缘故，DiggStory的标题是如何出现在用户控件之中的。

完成我们的用户控件的布局

我们上面的例子演示了如何编写一个简单的主从表对话框工作流程的基本知识。我们可以往用户控件中加更多的控件，和数据绑定表达式来完成StoryDetailsView的显示：

我们可以通过更新StoryDetailsView的 <Border> 控件，使之拥有下列内容，来如上图般显示：

之后，不需要任何代码改动。因为我们使用了数据绑定来从DataContext中取得数值，我们不需要编写任何额外的代码。

下一步

至此，我们实现了我们的Digg应用的所有的核心功能以及交互性工作流程。

我们要做的最后一步是进一步细调应用的UI，特别地，我们想要对ListBox和Button按钮加点更为好看，定制的外观。

要那么做的话，让我们跳到下一个教程：《使用控件模板定制控件的观感》。