博客园_『听风且吟』

《Visual Studio程序员箴言》笔记

2011-03-22T02:40:00Z

还记得刚工作时看到某前辈用快捷键操作Visual Studio，赞叹不已，才发觉原来快捷键熟练了效率可以如此之高。后来，我在为一个经常使用的命令添加快捷键的时候又发现Visual Studio的快捷键实在是太多了，因为我能想到的便捷的键位组合都已经分配给已有的命令了。

这段时间不忙，就读了一遍《Visual Studio程序员箴言》，一边读一边记下了几十条小技巧，其中有些技巧确实解决了我长久以来的困扰，太赞了。

禁用空白行的复制和剪切：【工具】【选项】【文本编辑器】【所有语言】【常规】，取消勾选“没有选定内容时对空行应用剪切或者复制命令”
循环剪贴板粘贴（最多20项）：Ctrl+Shift+V
在上方插入一行：Ctrl+Enter
在下方插入一行：Ctrl+Shift+Enter
选择当前单词：Ctrl+W
删除下一个单词（删除至结尾处）：Ctrl+Delete
删除上一个单词（删除至开始处）：Ctrl+Backspace
剪切当前行：Ctrl+L
删除当前行：Ctrl+Shift+L或Shift+Delete（前提是没有选中任何文本，否则Shift+Delete只删除选中的文本）
移动或复制代码块：左键拖动代码可以移动代码；同时按Ctrl复制代码到目标位置；右键拖动代码块可以选择“移动到此处”或“复制到此处”
调换字符位置，光标后移一位：Ctrl+T
调换单词位置，与后边的单词调换：Ctrl+Shift+T
调换行位置：Alt+Shift+T
移动光标到当前视图顶部：Ctrl+PgUp
移动光标到当前视图底部：Ctrl+PgDn
隐藏滚动条：【工具】【选项】【文本编辑器】【常规】，在“显示”下，可以取消勾选“垂直滚动条”和“水平滚动条”
向前定位：Ctrl+Shift+-
向后定位：Ctrl+-
使用撤销命令向后定位：【工具】【选项】【文本编辑器】【常规】，勾选“在撤销列表中包括插入点的移动”
访问导航栏：Ctrl+F2
查看可见空白：【编辑】【高级】【查看空白】；Ctrl+R，Ctrl+W
打印：打印时可以在【文件】【打印】中选择“隐藏折叠区域”和“包括行号”；如果需要打印自定义字体，则在【工具】【选项】【环境】【字体和颜色】中选择“打印机”，然后更改；在【文件】【页面设置】中可以将文件路径打印到页眉。
块状选择文本：Shift+Alt+方向键，Alt+鼠标拖动，选中区域后输入内容，会在所有行同时输入
添加注释：Ctrl+K，Ctrl+C
取消注释：Ctrl+K，Ctrl+U
分割线：在HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\(版本号)\Text Editor中添加一个名为Guides的字符串值，值的格式为：RBG(r,b,g) n1,n2,n3,n13
设置文档格式：Ctrl+K，Ctrl+F
制表符还是空格：【工具】【选项】【文本编辑器】【语言】【制表符】，“插入空格”或者“保留制表符”；【编辑】【高级】【将选定行的空格替换为制表符】或【将选定行的制表符替换为空格】
折叠和展开当前代码段：Ctrl+M，Ctrl+M
折叠和展开整个文件：Ctrl+M，Ctrl+L
折叠和展开折叠为定义：Ctrl+M，Ctrl+O
移除未使用的using：编辑器右键菜单【组织using】【移除未使用的using】
添加、删除书签：Ctrl+K，Ctrl+K
跳转到下一书签：Ctrl+K，Ctrl+N
跳转到上一书签：Ctrl+K，Ctrl+P
删除所有书签：Ctrl+K，Ctrl+L
插入代码段：Ctrl+K，Ctrl+X；输入关键词（譬如for），然后按两下Tab
添加代码段：【工具】【代码段管理器】【添加】
渐进式搜索：Ctrl+I
搜索当前单词：选中或者光标位于当前单词，然后Ctrl+F3
IDE导航器：Ctrl+Tab
重新停靠工具窗口：双击该工具窗口标题栏
工具窗口导航器：Alt+F7
全屏：Shift+Alt+Enter，全屏时无法操作工具窗口
命令窗口执行外部程序：shell 外部层序；譬如：shell ping 192.168.1.1，还有参数可以将外部程序的输出显示在命令窗口或输出窗口中
创建命令别名：alias 新名称原命令
生成期间停止显示输出窗口：【工具】【选项】【项目和解决方案】【常规】，勾选“在生产开始时显示输出窗口”
代码块与工具箱：代码可以拖放到工具箱中，也可以从工具箱中拖放到编辑器中
任务列表：以TODO（或其他，可以定制）开始的注释
对象浏览器：Ctrl+Alt+J
创建“用完即扔”的项目：【工具】【选项】【项目和解决方案】【常规】，取消选中“创建时保存新项目”复选框
跟踪点：可以用来记录变量的值
切换断点：F9
启用或禁用断点：Ctrl+F9
设置有条件的断点：断点的右键菜单【条件】
删除所有断点：Ctrl+Shift+F9
多启动项目：解决方案属性【通用属性】【启动项目】【多启动项目】
让智能感知透明：按住Ctrl键

本文链接

HTML5学习碎片

2011-02-14T01:14:00Z

春节在家读了两本介绍HTML5的书：《HTML5 Up and Running》和《Pro HTML5 Programming》，得益于Kindle的便捷，一边读一边标注了一些内容，随感觉而标记，不成体系，所以称之为“碎片”，记录于此作为存档。

浏览器支持情况检测
- Modernizr是一个开源的JavaScript脚本库，可以用它来检查浏览器对HTML5和CSS3的支持情况。
- IE是个很有意思的浏览器，它只识别它的DOM字典里存在的标签。如果你的HTML中包含它不认识的标签，只需要用JavaScript创建一下，IE就会把该标签加到它的DOM字典中，那么也就可以识别该标签并为它应用样式了。例如，让IE支持article标签的方法是：
```
document.createElement(“article”)
```
  根据这个原理，有人写了一段脚本来让老版本的IE支持HTML5标签：
```

```
ORIGIN（源）
- HTML5通过引入origin这个概念来明确和细化了域安全性，origin是由scheme（协议）、host（域名）和port（端口）组成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
DOCTYPE
- Web页面有几种不同的渲染模式：
  - Standards mode
  - Almost Standards mode
  - Quirk mode
- DOCTYPE就是用来告诉浏览器应该用哪种模式来渲染页面，符合HTML5标准（Standards mode）的DOCTYPE很简单：
```
<!DOCTYPE HTML>
```
- 没有DOCTYPE或者声明了不同的DOCTYPE会导致浏览器以Almost Standards mode或Quirks mode来渲染页面。《HTML5 Up and Running》的作者说，目前至少有5种DOCTYPE ，它们会触发浏览器的almost standards mode和至少73种quirks mode，光IE8就支持4种呈现模式（见下图），于是作者在书中要大喊：“Kill it. Kill it with fire!”。
文档大纲
- 在HTML4中，创建文档大纲的唯一方法是使用<h1>到<h6>这几个标签，为了确保大纲只有一个根节点，页面中就不能多次使用<h1>。而在HTML5中，每个section都可以包含自己的<h1>，这并不会影响大纲结构。
<time>标签
- 用法示例：
```
<time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time>
```
- pubdate特性有两个含义，如果<time>标签位于<article>标签中，pubdate表示该article的发布日期，否则，pubdate表示整个文档的发布日期。
<canvas>标签
- 设置<canvas>标签的宽度或高度会清除它的内容，并且还会将绘图上下文中的所有属性重设为默认值。IE目前上不支持<canvas>，可以使用ExplorerCanvas这个开源的JavaScript脚本库来间接实现画布API。
- 向context.drawImage方法传递img对象可以将img表示的图片绘制在画布上，但img所引用的图片必须完全加载完毕，否则会抛出异常。
- 如果向context.drawImage方法传递video对象，那么将会在画布上绘制视频的当前帧画面。
- context.getImageData方法可以获取画布的像素数据，但如果画布上绘制了来自不同origin的图片时，调用此方法会抛出异常。
Web Storage
- Cookie的缺点：
  - 每次HTTP请求都会包含Cookie，会降低请求速度；
  - Cookie数据未加密，在不使用SSL的情况下不安全；
  - Cookie的尺寸限制为4KB
- LocalStorage和sessionStorage的数据以字符串键值对的形式储存，他们的区别如下：
  - 生存周期不同：当包含页面的选项卡或者窗口关闭后，sessionStorage中存储的数据就清空了，而LocalStorage中存储的数据依然存在；
  - 数据可见度不同：sessionStorage中存储的数据只有当前页面可以访问，而LocalStorage存储的数据对相同origin的所有页面都可见。
- Web Storage事件会在相同origin的所有页面上触发，无论该页面是否对Web Storage进行过操作，所以可以利用这些事件来进行页面之间的通信。
Offline Web Application
- Offline Web Application需要一个离线清单文件（*.manifest），该文件可以位于服务器上的任何位置，但必须以text/cache-manifest为内容类型提供。
- Offline Web Application中所有页面的<html>标签中都要添加指向该清单文件的manifest特性。
- 清单文件示例：
  CACHE MANIFEST
  FALLBACK: / /offline.html
  NETWORK: *
- 无论当前是否在线，CACHE MANIFEST中的所有资源都会被缓存起来；NETWORK节表示“白名单”，该节中的所有资源都不会被缓存下来，只能在线获取；FALLBACK则为那些无法获取的资源提供一个备用路径。
- window.applicationCache对象包含许多事件
  1. 当浏览器发现<html>标签中的manifest特性时，就会触发checking事件；
  2. 如果浏览器之前从未见过此清单文件：
    1. 触发downloading事件，然后开始下载清单中的资源。
    2. 下载过程中会触发progress事件，该事件包含了已下载文件的数量和待下载文件的数量等信息。
    3. 清单中的资源都下载完毕后，会触发cached事件，这表明该Offline Web Application已经可以在离线使用了。
  3. 如果浏览器之前访问过包含同一清单文件的页面，就会去检查该清单是否发生了变化：
    1. 如果没有变化：触发noupdate事件；
    2. 如果发生了变化：会触发downloading事件，当清单中的资源都下载完毕后，会触发updateready事件，这表明该Offline Web Application已经更新成功。但浏览器仍然在使用旧版本，想要切换到新版本，需要手工调用window.applicationCache.swapCache()方法。
  4. 期间如果发生了错误，哪怕只有一个文件下载失败这样的错误，都会导致整个缓存过程失败，并会触发error事件，最要命的是这个事件并不会告诉你具体错在哪里。
- window.applicationCache.status指示了缓存的状态：
  - 0：UNCACHED
  - 1：IDLE
  - 2：CHECKING
  - 3：DOWNLOADING
  - 4：UPDATEREADY
  - 5：OBSOLETE
- 可以调用window.applicationCache.update()方法来向浏览器请求更新缓存。
- Web Server应当通过一些HTTP headers（譬如Expires和Cache-Control）来将文件的一些信息告诉浏览器。如果浏览器通过HTTP headers发现清单文件过期，就会向服务器请求新版本并下载它。此时浏览器会将服务器上一次通过HTTP headers发送给它的last-modified时间发回给服务器，如果服务器发现发现清单文件在该日期之后并没有更改过，就会返回304状态码，表示“Note Modified”。如果发生了变化，就会返回200状态码以及新文件的内容（当然也会包含Cache-Control和新的last-modified headers）；
- 所以每次修改了需要缓存的文件之后，记着也要修改清单文件，这样服务器才会认为它更新了版本。简单的方法是在清单文件中加一行版本注释，每次修改注释中的版本号即可。
- 当浏览器以联机方式工作时，navigator.onLine的值为true。
Microdata
- Microdata用一些具有范围概念的名值对来诠释DOM。
- 在HTML5中，<meta>标签可以在任何地方使用，不局限于<head>中。
- Google Rich Snippets tool可以提取页面中的Microdata，并以“Google See”的形式展现出来。

Selector API

新增加的和CSS Selector一样的Selector API，检索更加简单：

querySelector("input.error");//返回第一个class为error的input标签

querySelectorAll("#results td");//检索id为results的标签中的所有td标签

定位
- 新增加的定位服务会返回以下几种错误：
  - PERMISSION_DENIED，错误代码为1，用户不允许浏览器访问位置信息；
  - POSITION_UNAVAILABLE，错误代码为2，获取位置失败；
  - TIMEOUT，错误代码为3，超时；
  - UNKNOWN_ERROR，错误代码为0，发生了其他错误，可以检查message特性来获取具体信息
跨源
- XMLHttpRequest Level 2允许使用Cross Origin Resource Sharing（CORS）来进行跨源的HTTP请求。请求需要包含一个Origin header，用于告诉服务器请求从何而来，此header被浏览器保护，应用的代码无法更改它的值。Origin header和以前的sic header不同之处在于后者是完整的URL。
- 除了浏览器要自动发送Origin header信息之外，服务器端也需要支持CORS。检查浏览器是否支持XMLHttpRequest Level 2的方法是检查XMLHttpRequest 是否包含withCredentials属性。
- XMLHttpRequest Level 2的progress事件包括：
  - loadstart
  - progress
  - abort
  - error
  - load
  - loadend
WebSocket
- 新增加的WebSocket API用于连接远程主机，它大幅度减少了不必要的HTTP header，从而提高连接了速度。
- ws://和wss://协议分别表示WebSocket连接和安全WebSocket连接。
- WebSocket API也需要服务器专门支持。
- 当浏览器请求WebSocket URL时，服务器会回发headers来完成WebSocket握手，WebSocket握手响应的第一行内容必须是下面的格式：
  HTTP/1.1 101 WebSocket Protocol Handshake
  完成握手后，客户端和服务器端之间就可以随时发送消息了。
- WebSocket对象包含以下事件：
  - open：当连接建立时触发
  - close：当连接关闭时触发
  - message：当收到消息时触发
FORM API
- HTML5的input标签增加了一个placeholder特性，placeholder的值只能包含文本，不可以包含HTML标签。
- input标签的list特性和datalist标签结合起来可以为input标签提供一个备选列表。
- 新增加的valueAsNumber函数可以将控件的值从文本转换为数字，而且还可以将控件的值设置为数据。
- 如果input控件设置了required特性，那么该控件必须包含值，否则包含它的Form就无法被提交。
- 所有Form控件都包含validity属性（ValidityState对象），该属性包括8种可能的验证错误：
  - valueMissing：缺少必需值（包含required特性的input标签缺少值）
  - typeMismatch：值的类型不匹配（email、url等类型校验失败）
  - patternMismatch：值的格式不匹配（input标签设置了pattern特性，但值没有匹配该pattern。开发人员可以使用pattern来更加灵活地验证Form控件的值）
  - tooLong：值超出了控件允许的长度（超出了maxLength特性的值）
  - rangeUnderflow：值小于设定的最小值（值小于min特性的值）
  - rangeOverflow：值大于设定的最大值（值大于max特性的值）
  - stepMismatch：值不符合控件的min、max和step特性综合计算的结果（比如min="0" max="100" step="5"，那么值为6时就会导致stepMismatch）
  - customError：表示又代码产生的自定义错误，调用控件的setCustomValidity(message)方法可以设置customError，向该方法传递空字符串会清空customError。
- 如果Form控件有可能进行上述任何一项验证，那么它的willValidate属性会返回true。
- 调用控件的checkValidity方法也可以进行对控件的值进行验证。无论是提交Form还是调用checkValidity方法，如果Form验证失败，都会触发invalid事件。
- 可以通过控件的validationMessage属性来访问控件的验证失败消息。想要阻止浏览器显示错误消息，可以在invalid事件中调用参数evt的preventDefault方法。
- 设置Form的noValidate特性可以使其不去验证输入的有效性，关闭验证的更简单的方法是设置提交按钮formNoValidate特性。
Web Workers
- HTML5 Web Workers为Web应用提供了后台工作的能力，使得JavaScript可以享受到多核CPU的好处。
- Web Workers不能直接访问网页和DOMAPI，这一点和Windows Forms的机制很像。
- 初始化Web Workders时需要传递JavaScript文件的URL，该文件包含了Worker要执行的代码：
```
worker = new Worker("echoWorker.js");
```
- 如果想要在JavaScript文件中引用其他JavaScript文件，可以调用importScripts方法，传递一个或多个JavaScript文件的路径。
- 实例化Web Worker之后，就可以调用postMessage API来在网页和Web Worker之间发送数据了。

总的来说，这两本书还算不错，《HTML5 Up and Running》言语风趣，捎带着谈了许多HTML的发展历程，《Pro HTML5 Programming》则侧重于JavaScript API。这两本书都有中文版，分别是《HTML5揭秘》和《HTML5高级程序设计》。

本文链接

Windows Phone 7 UI设计和交互规范随笔（2）

2011-01-22T09:02:00Z

书接上回，本文再来谈谈《Windows Phone 7设计和交互规范》中的剩余部分，包括文本、标点符号、触控、屏幕键盘、物理键盘、屏幕以及其他硬件。

文本

这份规范实在是太细致了，以至于它对Windows Phone 7应用的文本格式都做了详细的规定和建议，虽然许多内容并不是针对中文的，但了解一下也无妨。

Windows Phone 7内建的Unicode字体支持东亚语言（中韩日），开发人员也可以在应用中内置字体。字体尺寸请勿小于15pt，否则难以阅读。

应用中出现的文本应当使用自然语言，而不是机械的计算机语言。

建议使用Windows Phone 7内置的文本样式，而不是硬编码自定义样式。

如果开发英文应用，则需要注意在什么情况下需要大小写敏感。在页面标题、列表标题、列表组标题、列表项、用于执行命令的按钮、搜索框中的示例文本以及文本当中的链接里可以将单词的所有字母小写。在复选框、单选框、进度指示器、开关控件以及表示状态、通知和说明的文本中建议使用大小写敏感的单词形式。而在应用的标题和日期时间文本中建议将单词的所有字母大写。

此外，这份规范还事无巨细地提到了标点符号的正确使用方法：

【&】：可以使用

【：】：应当在引入数字或者变量时使用，譬如：“载入百分比：60% ”，不要用在控件的标签文本末尾以及组标题或列标题末尾。

【…】：应当在进度指示器的标签中使用，不要用在标题和按钮中。

【。？！】结束符号：可以用在教学性的文本中，问号也可以用在错误消息或对话框的标题中，但不要用在其他标题、按钮、复选框以及单选框的标签中。结束符号后边应当再使用空格来分隔句子。此外，应该避免在标签中使用句子。

【（）】：尽量避免使用。

触控

Windows Phone 7支持单点触控和多点触控，其中单点触控支持的手势包括：

Tap：轻触并离开屏幕

Double Tap

Pan：滑动，手指离开屏幕后结束

Flick：快速滑动，手指提起后结束

Touch and Hold：按下一段时间，用于显示上下文菜单

多点触摸支持的手势叫做Pinch and Stretch，既两指触屏，靠近或离开。

由于手指和鼠标所能达到的精确度不同，触控应用的UI设计和传统的用鼠标来控制的应用有很大差别。比如在触控应用的交互设计中，触控目标没有所谓的Hover状态；而其由于Windows Phone 7不支持导航键，所以触控目标也没有Focus状态。

为了使触控更加轻松，触控目标的边长不应该小于34像素（特殊情况也不要小于26像素），控件之间的间隔至少8像素。当触摸发生后，要立即提供可视化的反馈或者声音反馈。

此外，常用任务都应该能用单手完成，不建议将手势作为快捷方式使用。

除了触摸之外，Windows Phone7手机还支持多种输入方法：屏幕键盘、物理键盘、麦克风、手机物理按键、感应器，但并不是所有的输入方法都向开发人员开放。

屏幕键盘

屏幕键盘在竖屏时的高度为336像素，在横屏时的高度为256像素，输入建议面板的高度是65像素。

开发人员应当根据文本框的输入类型为其设置输入范围，以便Windows Phone 7弹出适当的屏幕键盘。

Windows Phone 7中的屏幕键盘类型包括：

Default：标准QWERTY布局

Text：标准布局，包括ASCII表情

Email Address：标准布局，包括.com和@键

Phone Number：经典12键布局

Web Address：标准布局，包括.com键和自定义回车键

Maps：标准布局，包括自定义回车键

Search：半透明布局，包括Search键和.com键

SMS Address：标准布局，包括可以轻易访问电话号码的布局

屏幕键盘可以自动弹出，但建议仅当页面中不多于两个文本框时才自动弹出屏幕键盘。

硬件

所有Windows Phone 7手机都配备了分辨率为800×480像素的WVGA屏幕。

屏幕有三种方向：Portrait、Landscape Left和Landscape Right，后两者为横屏。横屏时，用于显示电量和时间等信息状态栏会从32像素的高度变为72像素的宽度。屏幕在旋转时，系统会产生动画效果，开发人员不必编写自己的效果。

应用可以选择是否支持横屏或竖屏，但不能以编程的方式修改屏幕方向。由于手机可能会配备横向侧滑键盘，所以支持文字输入的应用应该总是支持横屏。

支持横屏是需要编写代码的，一旦支持横屏，就必须同时支持Landscape Left和Landscape Right两种方向。

Windows Phone 7的物理按键包括电源键（睡眠键）、音量调高键、音量调低键、拍照键、后退键、开始键和搜索键。其中开始键、电源键、音量键、拍照键和搜索键的行为是开发人员无法控制的，当用户按下这些键时，有可能导致当前应用被暂停，开发人员应当为此做好准备。

Windows Phone 7会记录应用中页面的跳转情况，并为页面保存快照，当用户按下后退键时，系统会打开上一个页面的快照，由于是快照，所以数据可能并不是最新的。开发人员可以控制后退键的行为，但后退键的本意是向后导航，所以不要将其移做他用。

崇尚简约的iOS设备没有这一按键，所以在iOS应用的UI上常常能看到一个“返回”按钮，Android虽然有物理后退键，但因为缺乏官方的有力引导，许多Android并没有好好利用好这一按键，而是去盲目的模仿iOS应用。譬如新浪微博的官方Android客户端，完全可以把“微博正文”这一栏去掉，节省空间用来展示真正的微博正文。

Windows Phone 7手机可以配备物理键盘，但只允许QWERTY、AZERTY和QWERTZ这三种布局，并且对按键做了严格的要求，除了必须的A-Z字母键之外，还必须有表情键等按键。Android并没有对物理键盘做太多规定，导致在使用物理键盘时不能方便的使用第三方输入法提供的许多功能（譬如表情）。

此外，Windows Phone 7的物理键盘不支持任何形式的导航和定位键，这一点也和Android有所不同。

开发人员可以通过API来查询物理键盘的状态。

Windows Phone 7手机内置的感应器包括：加速器、A-GPS、近距离感应器、摄像头、指南针、光线感应器，据说大多数都对开发人员开放。

其他硬件包括FM模块、蓝牙、闪光灯、对焦灯、Micro SD、Micro USB、Wi-Fi。

在硬件方面，iOS设备始终由苹果自己操刀，保守但很稳妥；Android是开源项目，并且对硬件限制很少，这种开放的好处是设备型号繁多，坏处是这些设备的硬件参差不齐、厂商的开发能力良莠不一，使得目前Android世界处于一片混乱当中、用户经常会遇到由于系统版本、分辨率、硬件性能等等带来的体验挑战。

而Windows Phone 7对硬件的各个方面都有严格的要求，这样既能保证设备的多样性，又能保证用用户体验的一致性，可以说在吸取了双方的优点的同时又摒弃了双方的缺点，这是我看好Windows Phone 7的一个原因。

本文链接

Windows Phone 7 UI设计和交互规范随笔（1）

2011-01-21T01:07:00Z

当iPhone和Android在市场上所向披靡的时候，搭载Windows Phone 7的手机也终于进入了市场。我打算写个Windows Phone 7应用试一下，就随便翻了翻Windows Phone 7的SDK，SDK写的很细致，上线也很及时，要是微软其他产品的SDK也能这样就好了。

Windows Phone 7 SDK的许多章节都提示要先阅读《UI Design and Interaction Guide for Windows Phone 7 v2.0》，这份规范非常细致，内容并不只是针对用户体验的设计，开发人员也能从中了解Windows Phone 7的一些能力以及限制。

在这几篇随笔中，我不仅会摘录一些对我而言比较重要的内容，还会适当的和Android以及iOS作比较。此外，这份规范中有许多内容其实是触摸屏用户体验的常识，我就不在随笔里赘述了。

Metro

Windows Phone 7的UI系统叫做Metro，它的设计灵感来源于公共场所的标识（譬如地铁和机场的路标），标识使用了简单易懂的图形、对比鲜明的颜色以及大号字体，所以清晰易辨，匆匆一瞥便知其意。

这就是Metro想要达到的效果，把现实世界中的大家习以为常的隐喻拿到手机界面中，我们在创建Windows Phone 7应用时应当把可用性和UI放到第一位考虑，并且要遵循Metro的设计原则：

干净、轻量、开放、快速、热情、活泼

关注内容，而不是装饰

软硬件集成，响应物理按键事件

手势操作

开始屏幕

Windows Phone 7的开始屏幕非常有特色，是由许多小方块组成的，这个小方块的名字叫做Tile，每个Tile都由背景图片、图标和标题组成。

背景图片是256dpi的jpeg或png图片，标准尺寸为172×173像素。如果图片小于标准尺寸，则会被拉伸，如果大于标准尺寸，则会从左上角开始裁减。

图标的尺寸为63×63像素，如果使用了多张图片，请注意保持风格的一致性。

如果没有指定图标和标题，则会显示系统定义的图标和项目名称，此外，还可以使用Tile Notification来更新Tile的图片、标题以及计数器，但计数器的样式是无法自定义的。

Windows Phone 7的开始屏幕上还有一种双倍宽度的Tile，比如Calendar Tile，很可惜的是，这种双倍宽度的Tile目前只对微软、手机厂商和运营商开放。

Windows Phone 7内置了Dark和Light两套背景以及10套颜色，除此之外，手机制造商和电信运营商还可能会增加主题。

系统级主题是不可定制的，但应用可以重写自己的主题。建议使用系统主题，没有特殊理由不要重写主题。如果应用定制了颜色，就请确保在该颜色各种主题下都可识别。

此外，尽量避免使用白色背景，因为它比较耗电。

通知

Windows Phone 7中的推送通知服务有3种：

Tile Notification

Toast Notification

Raw Notification

Tile Notification属于系统级通知，由可选的计数器、可选的标题和开发人员指定的背景图组成。通知会在开始屏幕的Tile上体现出来，但要小心使用，频繁的通知会耗电。

Toast Notification：同样属于系统级通知，当通知到达时，会在屏幕上方显示10秒钟，轻触就会打开发送通知的应用。通知的左侧显示应用程序图标，右侧则是标题和子标题，其中标题的字体会加粗显示。过长的文本会被阶段。Toast Notification应当主要用于点对点通讯。也应当小心使用，过多的Toast通知不仅会耗电，还会使用户恼怒。支持Toast Notification的应用必须默认将这一功能关闭，将开启权交给用户。

Raw Notification，属于应用级通知，只能出现在应用内部，由应用自己控制。

Application Bar

Application Bar是最常用任务的操作入口，有点像Windows程序的工具栏。它的高度为72像素，最多只能显示4个图形按钮。

图形按钮由文字和图标组成，二者缺一不可。图标应该使用现实世界的隐喻来设计，清晰明确，易于理解。图标的尺寸为48×48像素（其他尺寸会被缩放到此尺寸），建议使用白色作为前景色，背景色保持透明，保存为包含alpha通道的png文件。系统会根据当前主题自动着色，并为图标加上圆环，所以设计图标时不需要考虑圆环。安装了Windows Phone 7开发工具之后，可以在C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons中找到一些图表示例。

除了图形按钮之外，Application Bar还会显示一个省略号，点击省略号之后会打开Application Bar菜单。菜单为那些很难用图标描述或者不常用的功能提供入口。菜单中最多可以包含5个菜单项，每个菜单项的文字长度为14-20个英文字符，过长的文字会被截断，设计时要谨记“少即是多”，精简文字。

Application Bar的透明度可以自由调节，建议值为0、0.5和1。当透明度小于1时，Application Bar会覆盖在页面之上，等于1时，页面尺寸会变化，为Applicaiton Bar腾出空间。

对于Application Bar，规范中的建议是能不用就不用，给用户过多的选项并不见得是一件好事情。

这里再顺便提一下，Android也有类似的机制，就是菜单，而且Android手机还都配备了一个用于显示菜单的物理菜单键，这本来是一个很好的设计，但Android却没有一种机制去提示用户当前页面中包含菜单，以至于我现在尝试一个新应用，每每跳转到一个新的页面，都要试着按一下菜单键，看看有什么选项，这个体验糟透了。

控件

使用Silverlight开发Windows Phone 7应用时，可以使用内置的许多控件进行快速开发，这里简单的介绍一下部分控件。

Progress indicator是一个系统级控件，它有两种模式：

Determinate：进度条从开始增长到结束。

Indeterminate：进度条一直循环，直到任务完成。

Checkbox支持中间状态，但不建议使用，因为中间状态会使用户感到迷惑。

Hyperlink应该仅用于导航以及显示剩余文字，不应该当作Button来用。

Image控件不支持GIF，在Silverlight里就是这样的。

可以在页面中添加多个MediaElement控件，但同时只能有一个处于活动状态。不要用MediaElement控件来播放效果音或者全屏播放，有可能会中断。

MultiScaleImage控件没有内置任何手势功能，需要开发人员自己实现。

Panorama控件的背景可以是单色或者图片，尺寸介乎480×800像素到1024×800像素之间，尺寸太大的图片会影响性能。控件中每一个Section的比例都是16:9。Panorama控件的Title可以是文字，也可以是图片，但要和应用的Tile标题保持一致。Panaorma控件的Section标题可以是文字或图片。Section中的缩略图如果不加文字描述的话，可以一行放置两个，并且建议一行最多只放置两个。

Pivot控件用来显示简单类型的数据，不要将它嵌套在Pivot控件中，也不要嵌套在Panorama控件中。此外，Pivot控件的头部高度是固定不可变的。

Slider控件用来在某一范围中选择值，有横向和纵向两种方向，但建议使用横向。

按钮的文字最好是简单明确的动词。

对话框中的按钮，表示正面意义的应该位于左侧（比如“确定”、“保存”）。

在多层嵌套控件时，Canvas的性能要优于Grid。但Grid支持伸缩和旋转，而Canvas不支持。所以开发时请综合页面内容和性能加以考虑。

创建自定义控件时也要注意遵守Metro原则。

顺便谈一下设置页面，Windows Phone 7有专门的系统设置页面，但开发人员无法在系统设置中添加应用的设置页面，应用的设置页面只能添加在应用中。

设计设置页面的目标是使其保持简短清晰，避免创建多于两页的设置选项，否则用户会怀疑自己进入了另一个应用。

应用设置页面的标题必须和系统级设置页面风格一致。

从网络中获取数据的应用必须提供禁用联网的选项。

用户对设置页面的更改应该是及时生效的，也就是说要避免使用“完成”、“确定”或其他形式的确认机制。
本文链接

使用SharePoint Client OM来查询列表的注意事项（2）

2010-11-05T07:16:00Z

上一篇文章提到了使用Client OM来查询SharePoint列表时需要两次指定结果集里包含的字段，范例是C#调用托管的Client OM，本文来介绍一下如何JavaScript来调用Client OM查询列表。

先创建几个全局变量：

var tf_contex;
var tf_list;
var tf_items;

然后是一个初始化的函数：

function DoQuery() {
    tf_context = new SP.ClientContext.get_current();
    tf_list = tf_context.get_web().get_lists().getByTitle("TestList");
 
    var query = new SP.CamlQuery();
    query.set_viewXml("<View><ViewFields><FieldRef Name='Entity_SysCode'/></ViewFields><Query><Where><Contains><FieldRef Name='_x822a__x73ed_'/><Value Type='Text'>"
        + "CA1143"
        + "</Value></Contains></Where></Query></View>");
 
    tf_items = tf_list.getItems(query);
 
    tf_context.load(tf_items,"Include(Entity_SysCode,_x8f66__x8f86__x724c__x7167_,_x822a__x73ed_)");
 
    tf_context.executeQueryAsync(onListsLoaded, onQueryFailed);
}

可以发现使用JavaScript来调用Client OM和使用托管代码很像，我们依然要两次指定结果集里要包含的字段，第一次是在CamlQuery.set_viewXml方法中，第二次是在clientContext.load方法中。

最后在调用context.executeQueryAsync方法时，传递了两个方法引用，第一个会在executeQueryAsync执行成功时触发，第二个则是在发生错误时触发，这两个方法的代码如下：

function onListsLoaded() {
    var items = tf_items.getEnumerator();
    while (items.moveNext()) {
        alert(item.get_item("Entity_SysCode"));
    }
}
 
function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() +'\nStackTrace: ' + args.get_stackTrace());
}

当然，仅仅这样还是不够的，还得让页面执行上面的初始化函数，因为JavaScript Client OM定义在SP.js这个文件中，所以我们还得确保这个文件已经被加载完毕，Client OM专门提供了一个方法来做这件事情：

SP.SOD.executeOrDelayUntilScriptLoaded(DoQuery, "SP.js");

SharePoint 2010提供的Client OM是一套强大而又便利的API，使用Client OM，以前我们在SharePoint上进行的许多展示型开发，现在只需要一个存放代码的文档库，再搭配SharePoint内置的“内容编辑器”Web部件”就可以做到，再也不需要服务器的管理权限了。

本文链接

使用SharePoint Client OM来查询列表的注意事项

2010-11-02T08:01:00Z

SharePoint 2010增加了一组新的API，叫做Client Object Model。Client OM使得我们可以为SharePoint创建客户端应用，从而避免以前在服务器端部署解决方案所带来的种种不便和安全隐患。

Client OM的出现使我们能为SharePoint构建的应用变得更加丰富，我们可以使用托管代码来创建Windows Form应用程序，也可以使用JavaScript来编写Web应用程序，还可以使用Silverlight技术来设计更加绚烂的应用。

在使用Client OM查询列表时，有一些小细节需要注意。下面这段代码演示了如何使用Client OM来查询列表：

ClientContext context = new ClientContext("http://localhost"); 
List list = context.Web.Lists.GetByTitle("TestList");
CamlQuery query = new CamlQuery();
query.ViewXml = string.Format("<View><ViewFields><FieldRef Name='Entity_SysCode'/></ViewFields><Query><Where><Eq><FieldRef Name='_x822a__x73ed_'/><Value Type='Text'>{0}</Value></Eq></Where></Query></View>", "CA1143");
ListItemCollection listItems = list.GetItems(query);
context.Load(listItems,
    items => items.Include(subItem => subItem["Entity_SysCode"]));
context.ExecuteQuery();

需要注意的是代码中需要两次指定结果集里需要包含的字段，第一次是在为CamlQuery.ViewXml指定查询语句时，必须要在ViewFields节点中指定字段。第二次是在调用ClientContext.Load时，必须再一次指定结果集里需要包含的字段。此二者缺一不可，否则会抛出“给定关键字不在字典中”的异常。

此外，ClientContext.Load方法的第二个参数是一个Lambda表达式，表达式中调用了Include方法（ClientObjectQueryableExtension.Include<TSource>），这个方法是一个扩展方法，位于Microsoft.SharePoint.Client命名空间中，我遇到的很奇怪的现象是如果在引用此命名空间时使用了别名（如下面的引用方式），那么就找不到这个Include方法，不知道算谁的bug。

using Client = Microsoft.SharePoint.Client;

最后，推荐一篇介绍Client OM的技术文章，来自MSDN：《使用 SharePoint Foundation 2010 托管客户端对象模型》

本文链接

小心Windows Live Writer插件偷走你的博客密码

2010-09-14T00:49:00Z

Windows Live Writer是颇受欢迎的博客客户端，除了支持多种博客服务之外，还具备良好的扩展性，允许第三方开发插件来扩展或补充功能，我也为它开发了两个插件：用来补充Slug的SlugHelper和补充图片Exif信息的ExifInfo。

但你有没有想过，虽然这些第三方插件的确为我们提供了方便，但它们真的值得信赖吗？

最近搬家，没有网络，闲暇时便用“.NET Reflector”来查看Windows Live Writer的内部实现，期望能找到对我开发插件有帮助的API，没想到却发现了令人大吃一惊的东西，Windows Live Writer插件可以轻而易举地窃取你的博客账号和密码！

想知道是怎么做到的吗？只需要随便开发一个插件，添加对“WindowsLive.Writer.BlogClient.dll”的引用和以下的using：

using WindowsLive.Writer.BlogClient;

在适当的位置添加以下代码：

StringBuilder sb = new StringBuilder();
string[] blogIds = BlogSettings.GetBlogIds();
foreach (string blogId in blogIds)
{
BlogSettings blogSetting = BlogSettings.ForBlogId(blogId);
sb.AppendLine("blogname: " + blogSetting.BlogName);
sb.AppendLine("homepage: " + blogSetting.HomepageUrl);
sb.AppendLine("username: " + blogSetting.Credentials.Username);
sb.AppendLine("password: " + blogSetting.Credentials.Password);
sb.AppendLine("===============================================");
}

执行后查看sb.ToString()，你会看到你添加到Windows Live Writer里的所有博客信息，包括博客名称、主页地址、用户名和密码，可怕之处就在于密码是明文的。

如果插件的作者心怀不轨，他完全可以利用这些内容来控制你的博客。所以在使用第三方插件之前，最好能够确定该插件是值得信赖的。

另外，开源的插件也是个不错的选择，你可以检查插件的代码中是否包含泄露隐私的内容，并自行编译使用。

我开发的SlugHelper和ExifInfo两个插件都是开源项目，欢迎使用。

PS：以上代码在版本号为15.4.3001.809的Windows Live Writer中测试成功。

本文链接

[C#]增强响应性，用加载窗体（Splash）来载入主窗体

2010-09-07T05:13:00Z

许多软件在启动的时候都会显示一个加载窗口（Splash），譬如微软的Visual Studio、Office以及Adobe的许多软件。这些加载窗口很精美，但“漂亮”并不是它们的主要作用。

设想一下用户双击了一个图标，等了许久都没有看到主窗体，就会感到迷惑：是不是刚才没有点中？于是又双击了一次，这次终于看到主窗体了，但看到了两个，因为启动了两次。

如果加载主窗体需要大量时间，那么在加载主窗体的同时去显示一个加载窗体就可以让用户知道软件已经响应了指令，并且正在进行处理，还可以告诉用户当前处理的进度，从而避免了用户的迷惑和误操作。

恰巧最近我的客户也有这样的抱怨，便研究了一下加载窗体的实现方法，顺便记录在这里以免遗忘。

那么就开始编写一个加载窗体吧。

我创建了一个很简单的窗体，它只包含一个Style=Marquee的ProgressBar（这个进度条会不断滚动），下面是它的代码以及注释：

public partial class Splash : Form 
{ 
    public Splash() 
    { 
        InitializeComponent(); 
    }
    //关闭自身 
    public void KillMe(object o, EventArgs e) 
    { 
        this.Close(); 
    }
    /// <summary> 
    /// 加载并显示主窗体 
    /// </summary> 
    /// <param name="form">主窗体</param> 
    public static void LoadAndRun(Form form) 
    { 
        //订阅主窗体的句柄创建事件 
        form.HandleCreated += delegate 
        { 
            //启动新线程来显示Splash窗体 
            new Thread(new ThreadStart(delegate 
            { 
                Splash splash = new Splash(); 
                //订阅主窗体的Shown事件 
                form.Shown += delegate 
                { 
                    //通知Splash窗体关闭自身 
                    splash.Invoke(new EventHandler(splash.KillMe)); 
                    splash.Dispose(); 
                }; 
                //显示Splash窗体 
                Application.Run(splash);
            })).Start(); 
        }; 
        //显示主窗体 
        Application.Run(form); 
    }

代码很好理解，Splash类只包含两个方法：一个普通的事件处理程序KillMe和一个静态方法LoadAndRun。

LoadAndRun方法用于加载并显示主窗体。在加载主窗体的同时，Splash窗体也会一直显示，直到主窗体加载完毕可以完全显示为止。

使用此加载窗体的方法也很简单，只需要把Program.cs中Main方法里的

Application.Run(new Form1());

修改为

Splash.LoadAndRun(new Form1());

即可。

如果想要看到效果，可以在Form1的OnLoad事件中让主线程睡一会儿觉，譬如：

protected override void OnLoad(EventArgs e) 
{ 
    System.Threading.Thread.Sleep(5000); 
    base.OnLoad(e); 
}

为什么要在新线程中显示加载窗体呢？因为忙碌的主窗体已经占有了主线程，如果把加载窗体也安排到主线程的话，它不仅很容易变成“失去响应”的状态，而且有可能连自身都无法顺利加载完，更别说不断滚动的进度条了。

另外，这种方法还有一个缺点，如果主窗体加载缓慢是因为在构造函数中执行了大量操作的话，那么这种方法就起不到作用了。

不过话说回来，在窗体的构造函数中执行影响性能的操作本来就是不被推荐的做法，应当尽量避免。

本文链接

WindStyle ExifInfo for Windows Live Writer发布

2010-02-04T01:12:00Z

WF4.0活动模型（1）：工作流既活动

2010-01-26T01:09:00Z

如果你已经开发过Windows Workflow Foundation（WF）程序，那么你应该会非常熟悉活动。在WF世界中，程序被定义为一个活动树。有些活动用来控制程序的流，比如 Sequence、If和While；有些活动执行特殊的操作，比如Assign、InvokeMethod和WriteLine；还有一些可以和外部系统通讯，比如Send和Receive……