MIX08最新播报：

很多人都看过微软在Silverlight 2中支持的SeaDragon技术了，现在这项技术的正式名称是DeepZoom。

如果想看看实际上线的应用，那么hardrock的网站是个不错的例子。 http://memorabilia.hardrock.com/ 需要安装Silverlight 2。

安装Deep Zoom Composer工具需要.NET FRAMEWORK 3.5。

Download the Deep Zoom Composer

http://www.msdnwebcast.com.cn/SpecialShow.aspx 

这是我用中文做的教程,全部是高清晰度的截屏录像.

http://blogs.msdn.com/delay/archive/2007/05/01/the...

Source code click here to download the complete source code for this demo application

今天开会时, Tim Sneath(blog http://blogs.msdn.com/tims)介绍了很多成功的WPF应用，其中有个Family.show是用来画家谱的工具。你可以在www.vertigo.com/lab 找到这个应用。

看了这个网站，才发现原来这家公司帮微软做过很多应用范例，包括几年前我们曾经用过的ASP.NET Portal Starter Kit等。值得学习。

真是无语。。。。大家想必都看到新闻了。作为一位linux销售代表，我不知道他是否有勇气干脆说“free service”。好好做销售好了，何必这样炒作。

看来以后做活动、做讲座还要配保安才行，这倒是有可能让微软这种公司的支出上再多出一笔“场地安全”费。。。。

www.microsoft.com/silverlight 欢迎大家评测!

我正跟Blueidea站长“蓝色理想”在他长沙的办公室里，他认为只要策略正确，这个技术的潜力还是很大的。他说，他一定能做更好的例子出来。当然，也有几个担心：对平台的需求、插件本身的市场占有率等等。

不过我相信，随着SilverLight的正式发布，中国会有越来越多象“蓝色理想”一样的技术+设计爱好者投入到对其的研究中。随着越来越多的例子出现，越来越多的用户会感受到新技术带来的用户体验的突破。

引用一句“蓝色理想”的话：“只要对我们会员有价值的，我们就会去做”。虽然SilverLight不是一个绑定在微软操作平台上的技术，而是跨操作系统、跨浏览器的技术平台，微软终于还是把它推出来了。这本身就是一个巨大的进步！

新鲜出炉的WPF/E内容，尽在：

http://msdn2.microsoft.com/en-us/library/bb188266.aspx

终于找到一个方法，可以把Video的倒影做出来，而且是动态的。方法很简单，通常用代码实现的话，就是在XAML中做一个VisualBrush。语法如下：

<VisualBrush x:Key="ReflectionBrush" Visual= "{Binding ElementName=Grid}"/>

其中，Binding ElementName=Grid指明了这个VisualBrush绑定的对象，也就是要产生倒影的对象。不仅仅是Video，可以是很多控件的组合，然后放在一个Grid下面。

用工具来定义一个VisualBrush就更加简单了，只要在Objects and Timeline中选中这个Grid，然后到菜单中Tools->Make Brush Resource->Make VisualBrush Resource...，就可以了。定一个名字给这个Brush，就叫ReflectionBrush好了。

然后再在Grid的下方画一个Rectangle，给这个Rectangle应用ReflectionBrush到Fill属性。如图：

剩下的就很简单了，就是对这个Rectangle做一些渐变效果和ScaleTransform （将Y设为-1）。

最终效果，栩栩如生，截图：（我在网上找了一个液晶电视图片，然后把Video叠加在这个图片上）

Alpha Video又称透明视频处理，我尝试了一下用Expression Blend来做这个效果。比如这张截图，就是一个湖泊的背景上，叠加了一个视频文件。现在的Opacity值大约是10%。

这个特效常常用来做淡入效果的视频播放。比如，你可以录制一个timeline，初始关键帧时，MediaElement的Opacity设置为0，然后在5秒处，将Opacity值设置为100，那么这段视频在播放时可以做到从完全透明进入完全不透明的状态。

那么，如果我想做一个特效，比如以一张城市街道的照片为背景，然后叠加一个反复播放的Video，这个Video可以是下雨的效果，也可以是下雪的效果，然后设成半透明，那么就可以让这个城市想下雨就下雨，想下雪就下雪了。就是不知道谁有兴趣实现一下。

反射效果(又称"Wet table湿桌子"效果,Reflections) 看起来很优雅;  可以用来展示深度效果。例如，反射效果可以将白色平面背景变成平滑而有光泽的白色镜面。这里，我将带你看看如何用 ScaleTransform 和 opacity mask 在 WPF/E 中创建反射效果。

你将在以下图片的基础上创建反射效果。

完成后的效果如下所示。

1. 下载这个zip文件并打开它: reflection_examples.zip。 找到 reflection_examples\reflection_example 子目录。它包含4个文件: aghost.js, gear_large.png, reflection.html, and reflection.xaml。（若是不清楚这几个文件的更能，请参考WPF/E SDK帮助文档）

2. 打开 reflection.xaml， 找到这段.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   </Canvas>

   在浏览器中打开 reflection.html 来运行这个例子。应该看到如下输出。

   

3. 创建一个复制的图片来用作反射效果.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   </Canvas>

4. 反转这个反射图，让它上下颠倒，创建 ScaleTransform 并设置 ScaleY 属性为 -1.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   </Canvas>

   运行这个例子，注意这个反转的图片几乎在Canvas外面了.

   

5. 将这个反转图片移动到原始图片的下方。 最直接的方法是调整第二个图片的 Canvas.Top 属性.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   </Canvas>

   现在这段XAML的输出如下.

   

6. 现在做一些处理，用 opacity mask 做出反射图片的淡出效果.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   </Canvas>

   输出如下, 第二个图片现在淡出到背景色.

   

7. 给反射效果加些扭曲变形， 更改 ScaleTransform 中 ScaleY 的值，从 -1 改到 -0.75.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   </Canvas>

   现在输出如下，注意反射图像的位置需要调整.

   

8. 移动反射图像的位置.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="228">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   </Canvas>

   输出如下，反射图像来到正确的位置上.

   

9. 最后可以做点修饰，更改 opacity 至 0.75，让它的淡出效果更强烈些.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="228"
   Opacity="0.75">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </Image.RenderTransform>
       <Image.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
           <GradientStop Offset="0.0" Color="#00000000" />
           <GradientStop Offset="1.0" Color="#FF000000" />
         </LinearGradientBrush>
       </Image.OpacityMask>
     </Image>
   </Canvas>

   完成.

   

-m jacobs  

原文见：http://blogs.msdn.com/wpfedevcon/archive/2007/01/0...

从一个比较有趣的例子开始，英文原文见Expression Blend -> Help ->Welcome Screen -> User Guide -> Data -> Create an RSS news Reader

创建数据连结

1. 点 New Project （ File 菜单）, 然后点 Standard Application (.exe).
2. 在 Project面板的Data下面，点 +XML Source按钮
3. 输入Joycode作为 Connection Name 并输入 “http://www.joycode.com/MainFeed.aspx” 作为 URL for XML data, 然后点 OK.
4. 如果你连在Internet上, 你将看到如下图所示的 Data。（但是，注意这里由于没有机会写代码，所以用的是同步方式载入数据，有可能很慢，界面处于不响应状态 - 亲身体会）

创建UI和绑定

1. 展开rss > channel , 然后把description拖拽到artboard上（就是XAML的design视图上）。选择弹出窗口上的 Label并点Create Data Binding 对话框里的OK。
2. 如果你的机器连在Internet上，你会看到“博客堂”三个字。
3. 同样的, 展开 rss > channel, 拖拽 link 到artboard上。选择 Label 并接受缺省设置。
4. 现在创立一个Grid 面板，并覆盖刚才两个控件下方的部分。选中 Grid 面板并找到Data Context 属性，（在Properties 面板中的 Common Properties中）。
5. 点Data context property的 New 按钮边上的属性标记（小黑框）并在弹出菜单中选择 Data Binding.
6. 在 Create Data Binding 对话框中, 选中 Data Field tab (缺省), 选中Joycode，然后在右边面板中展开 rss > channel ，并选择 item(Array)。 点 Finish。
7. 双击Grid 面板激活它, 然后创建一个 ListBox 并让它占据Grid面板的左半边。
8. 选中 ListBox, 然后找到Properties 面板中的ItemsSource属性。
9. 点 ItemsSource 属性右边的小黑框，然后点弹出菜单中的 Data Binding。
10. 选中 Explicit Data Context tab, 然后展开 rss > channel 并选择 item(Array)。 点 Define Data Template 按钮并在Create Data Template对话框中选择第三个选项 New Data Template。 清除 item 的check box, 勾上title 边上的check box, 然后 OK。 此时如果你连接在internet上，你的标题清单应该出现在listbox里面。
11. 插入一个TextBlock并占据Grid的右半边，找到Properties面板中的 Text property。
12. 点 Text properties 右边的小黑框，并选择 Data Binding。
13. 在 Create Data Binding 对话框中，选中 Explicit Data Context tab, 展开 rss > channel > item(Array), 选中 description 然后点 Finish。 如果你连在internet上，你的TextBlock中应该显示出某个标题的正文。
14. 按 F5 运行你的应用，你可以改变 ListBox 中的选项来查看不同的文章。

很难看的界面，而且载入时需要等待一会儿。不过，不需要写代码，至少设计人员可以在此基础上设计一个好看一点的界面了。

这段时间在学习Expression Blend（之前曾经叫作Expression Interactive Designer）,因为这是我将分管的一个新产品。不过由于是Beta版，所以所有的文档都还是英文的。我想，既然一样都花了时间在学习上，不如干脆也试着翻译一些东西，这样有兴趣的人也可以一起来学。水平有限，如果理解不了我的翻译，请参考产品附带的user guide。

这个产品，应该说不是仅仅给开发者用的，更多的是给界面设计（UI或者UE）用的。所以，我学习的时候，出发点是“如何不通过写代码来完成各项界面元素的设计”或者是“原型设计”。

Overview

Microsoft? Expression Blend? BETA—一个全新的，全功能的职业设计工具，用于创造基于Microsoft Windows平台的丰富、复杂的应用界面。 使用 Expression Blend, 可以提供更出色的应用软件并提升客户的体验和满意度。Expression Blend 包括了与 Microsoft Visual Studio? 2005 的集成性，让设计者（designers）和开发者（developers）能够更紧密地作为一个团队一起协作！

Expression Blend 包含:

• 全套矢量图形工具，包括文本和三维工具
• 易用的可视化界面，（dockable panels， on-object context menus）
• 健壮的动画、三维和媒体集成（animation, 3D, and media integration）
• Advanced, flexible, and reusable customization and skinning options for a variety of common controls
• 与数据源、外部资源的强大集成
• 实时设计和markup视图 （Design and XAML view） 

针对的客户化需求（Target customization needs）

• Themes
• Branding
• Custom controls
• 3D
• Animations
• Dynamic behaviors
• Direct manipulation
• Browsers

针对的应用类型（Target application types）

• 生产力应用Productivity applications - productivity, efficiency for broader customer base; line of business applications such as Microsoft Office
• 消费者应用consumer applications - media player, security tools, gadgets
• 游戏games - entertainment, immersive; simple desktop games or online games
• kiosks - get information, product directory, airport, museum
• 专业IT人员工具IT pro utilities - track small jobs with tools such as bug tracking tools to improve efficiency given specific needs that might not be scalable

最佳实践Best practices

一些好的设计之所以好，是因为提高了可用性。这里有些例子：使用Expression Blend 和 .NET Framework 3.0来提高可用性：

• 真实世界的建模。你可以使用可视化交互使某个特定的控件与其在真实世界的对照物看上去相似并有类似的行为。这项技术在使用者对真实世界的对象很熟悉时特别管用。比如，象计算器这样的简单工具，因为模拟了真实世界的对照物而非常好用。
• 演示，而不是解释。你可以用动画来演示“关系”、“因果”和“效果”。这项技术可以代替文字解释，让使用者更容易理解。比如，给小孩演示书的控件如何翻页比普通的切换页面更容易被理解。（真的吗？小孩这么白痴？还是我们白痴，所以认为小孩理解不了？这不是一个好例子-这句是我加的。）
• （大概的意思就是“一看就会，不需要特别的解释”，太难翻译了）Improve affordance. Affordance is a property of an object that suggests how the object is used (as opposed to using a label to explain it). You can use custom control visuals and animations to suggest how nonstandard controls are used.
• Use natural mapping. Natural mapping is a clear relationship between what the user wants to do and how to do it. You can use custom appearances and interactions to create natural mappings when the standard common controls won’t do.
• 不需特定的知识。 You can use custom interactions to limit the number of ways to perform an operation and the amount of knowledge required to perform a task.
• 改进反馈。你可以用客户化的控件外观或者动画，来告诉使用者某些事情是否正在被正确的执行，并展示出相应的进程（例如，花哨的状态栏/状态条，反正时时刻刻都不要人觉得死机了 - 我加的） For example, the Address bar in Internet Explorer in Windows Vista shows the progress for loading the page in the background.
• 让对象更容易交互。 Fitts定律（Fitts’ law）证明鼠标点一个东西的难度，同与目标的距离成正比，同目标的大小成反比。例如，当鼠标距离近时，你可以用动画效果让一个对象变大，鼠标远时变小，这样可以让对象更容易被点中，并可以在对象较小时节约屏幕。
• 注意力。你可以通过排版和客户化的外观来突出屏幕上的关键元素，并让其他非关键元素被使用者忽视。（想办法突出重点，减少“噪声”- 我加的）

If designing for Windows Vista, consider adhering to the Windows Vista User Experience Guidelines to establish a high-quality, consistent baseline for all Windows Vista-based applications, no matter how they are implemented.

Steve Krug的一本好书。很简单，很有趣，大约3个钟头可以翻一遍。这本书讲的是一个浅显的问题--什么是好的用户体验？

作为开发人员，多数情况下，以考虑是否完成老板布置的任务为主，主要精力放在如何高效、可靠的完成代码和测试，以保证软件的各项功能正常运作。可是，我们是否忽略了软件最主要的属性--“让人使用”了呢？我们是否关心过我们的软件是否容易使用？

举个简单的例子，就以joycode这个网站来说，当我第一次使用时，不论阅读还是写作，我是否能够很快找到相关功能的入口？对我来说，使用这个界面，有多容易，有多少东西需要记忆？我们在设计它的时候，到底是以“我”作为开发人员的出发点来堆砌功能模块，还是以“客户”为出发点根据易用性来设计？这也许不是一个很好的例子，因为这里的人大多都是技术热衷者，易用性不是一个问题。但是如果要以其他软件为例子，我想每个人都可以很快找到自己生活中曾经看到过的坏例子。

我家楼下的停车库管理软件就是一个极其愚蠢的例子。我的停车IC卡到期了，需要延长有效期，可是这个软件的操作让人百思不得其解。需要重新登录以获取相应权限，但反复试验、猜测，还是找不到该功能入口。。。。让我看着着急，说我来吧，可是同样不得其门而入。最后，来了一个明显接受过特殊技能培训的人，经过十几步操作才搞定。这个use case怎么做的？。。。

所以，用这个名字。希望时时刻刻提醒自己。技术是手段，不是目的。