博客园_欢迎来到【烤地瓜】的地瓜村

欢迎来上海兰亭序喝茶

2011-07-05T15:20:00Z

帮上海的朋友做一下宣传，地瓜最近很忙，冷落了博客的各位读者，先说一声对不起，等有时间了，还会继续更新。我不在兰亭序，但这家公司我很喜欢，因为他非常有个性，所以把他推荐给大家。

上海SILVERLIGHT交流分享沙龙活动：

我们相信每一个优秀的程序员一定都深爱着他的作品，而如今Silverlight给了我们更大的舞台，我们可以像艺术家一样，用我们的作品传递感情，张扬个性。

我们每天活跃在网上，与许多朋友拼聚在一起讨论技术、交流心得、聊天扯皮，但从未见过彼此。

“7月16日”兰亭序第一次线下交流会，邀您一起相聚兰亭序。

能有机会能与大家相聚在一起，面对面的沟通交流，结识各路高手,公司上下每一个人都十分期待。

学习和成长的过程中一定少不了痛苦、煎熬、更少不了朋友的支持，兰亭序愿做你漫漫路途中的小站，在这里没有利益关系，没有约束，在这里你可以畅所欲言，分享你对生活的看法，工作中的点滴故事，以及你的梦想。

一、主题演讲

沙龙内容：Silverlight的设计、Silverlight组件调用（解耦合）、Silverlight用户登录、讨论Silverlight和Htmal

沙龙主讲者：陈曦

Msdn Silverlight版主，现在微软公司就职。参加过一些大型商用项目，如虹桥机场枢纽系统项目，对Silverlight有深厚研究及丰富经验，曾在codeplex上发布过RoughScript脚本引擎、JavaScript2脚本引擎等。

二、沙龙安排

1：00-1：15	签到
1:15~3:00	陈曦主讲Silverlight的设计、Silverlight组件调用（解耦合）、Silverlight用户登陆、讨论Silverlight和Html5 交流分享经验心得
3:00~3:20	体验XBOX360 Kinect
3:20~4:20	专业分享、工作分享、生活分享
4:20~4:30	拍照合影留念

三、沙龙要求：

我们希望伙伴们都能参与到活动中，讲自己学习工作过程中的一些经验分享。每个人都有自己的爱好和擅长的技术，都有一些经验可以分享。所以我们的主题的主要形式是大家来讲述自己的理解和经验。

但是，我们不会要求每个人准备一份PPT或者演讲稿什么的，你只需要那么几分钟时间简单描述你擅长的技术或者思想就行。当然我们希望经验丰富的朋友能够多分享一点给其他朋友。

如果你觉得自己啥都不会，或者不能讲，那么你一定遇到困难，请讲出你遇到的困难或者迷惑。

总之，希望伙伴们都能参与讨论和分享。

很牛不屑与分享的人不能参加。

很菜又很自卑的人不能参加。

只想当听众的人不能参加。

四、报名方式

请填写以下表格，support@lantinx.com 活动联系人：苏礼先电话：13916666185

姓名：		职务：
电话：		邮箱：
您目前所从事的工作简要：
您希望在本次沙龙中获得什么或对本次沙龙建议：

为了确保每个人都能有更好的收获和体验和活动的质量，所以我们对人数有所控制，所以当我们收到您的邮件时，我们一定会第一时间给予答复告知，感谢您对我们的喜欢和支持！（本次沙龙免费）

五、关于兰亭序

　兰亭序现在是一家只有5人的软件公司，现在我们只有梦想和毫无依据的自信，但一切将从这开始，即使给我们望远镜我们也看不见竞争对手！我们依然会前进。

兰亭序成立于2011年4月1日，在这一个搞笑特别的日子，自第一天起我们就充满着欢声笑语。公司坐落于城隍庙，南京路，淮海路，南浦大桥之中心-------太阳都市，我们称之它为“The Sun city”,兰亭序在“The Sun city”的16楼，在这我们展望-----展望浦江;展望老城隍庙；展望陆家嘴。“The Sun”诞生了，它是我们休闲娱乐的一角，每周可能会有水果、点心、鸡蛋、豆浆或咖啡，但我们更推崇茶。这还有xbox360+kinect，平时可以通过它们来娱乐与运动。我们的“妈妈”，还赞助了台Bowers音响，在这也能极致的视听，对了在“The Sun”一角还有个酒架，摆放了红酒，当夜幕降临时，可以拿着高脚杯走出落地窗，展望-----展望夜上海。

兰亭序是一种生活方式，在这我们奋斗着，快乐着，享受着。

为兰亭序人，我们的工作方式也与一般公司不同，我们为加入兰亭序的每一个同事都配备了DELL U2311H专业开发显示器，我们倡导双屏开发。为了宽松与舒适我们定制了纵深90cm的实木环保办公桌。以及为了保障同事开发环境我们还提供Windows7旗舰版；Office 2010；Visual Studio旗舰版；Expression Studio4等正版序列号。
拥有这么多的兰亭序当然不会还重复以往软件的老路，兰亭序从一开始就决定走一条完全不同的软件产品路线。非常荣幸在兰亭序筹划阶段，微软公司推出一系列新技术，如.net4.0、Silverlight4、SQL2008、vs2010等。这些技术将会陪着兰亭序人一起战斗，直到它们被淘汰。最新的技术带来全新的软件、全新的体验。随之而来的是全新的风险与挑战，我们相信兰亭序人并不惧怕挑战，我们最怕是没有激情。

本文链接

【全面解禁!真正的Expression Blend实战开发技巧】十一章全面解析布局(Grid & Canvas &StackPanel &Wrappanel)

2011-04-25T12:58:00Z

写这篇文章前，特意在百度搜索了一下，发现目前网上介绍布局的文章不多，质量也不是很高。拿grid和canvas来讲，这两个布局容器还是有许多小细节值得讲的，如果你不了解的话，开发中经常会遇到一些让人匪夷所思的事情。学习silverlight xaml的过程可以分为布局，样式，模板，资源，动画，行为，绑定等几个知识点。我个人觉得布局是最难熟练掌握的。

布局，既是基础中的基础，也是难点中的难点：

1、无法复用：模板，样式，上手虽难，但因为控件的基本结构是不变的，当你学会为button定义样式后，以后都不会在为button的样式发愁，但是布局不同。几乎没有一个项目的布局是完全一样的。

2、标准不一：表面上看起来一摸一样的布局，可能实现的细节完全不同。大多数情况下而你很难用一个标准去规范或者界定，什么时候，应怎样做。

3、布局不是一堆控件的堆叠，而是合理的组织，但如何合理的组织，这个经验需要从众多项目中磨练才能具备。

4、随着需求的变化，最容易产生变动的就是布局。

5、你没办法为布局去写注释，所以一个层次很深很复杂的布局，维护成本就特别高。比如让你修改一个一年以前你写的项目，还要要彻底改变布局结构的时候，即使是我自己写的，我也很难看懂。

6、客户对silverlight期待很高，希望界面能够创新，不走寻常路，这样你就可能遇到一些非常规的布局，他们奇特，狂野，而从使用的角度讲，还必须要健壮，有一定的适应性。比如一个异型，镂空，半透明，带阴影的窗体设计，也必须能正确的适应浏览器宽高的变化，能够完整显示所有信息，描述信息能够正确的换行等等。我遇到过的最夸张的需求，客户有一台只支持1024*768分辨率的投影机，和一个分辨率4000:1000(具体数字记不清楚了) 这种宽高比超级特殊的LED墙。他希望你的软件既可以在1024*768下完全显示，又要在LED下可以充满全屏且不变形，而且距离LED十米开发也要能看清楚你界面上的每一个字。

7、每次修改布局，都会对他周围甚至整体产生影响，必须非常全面的观察和测试。

8、设计布局前还要充分考虑动画设计。

9、还有一些特殊情况，你无法在blend中看到设计视图。这个时候只能用一行一行看代码，在脑子里还原程序的轮廓。

什么是好的布局？根据我个人的经验，在满足设计需求的前提下，一个好的布局，还需要考虑以下一些方面，

1、结构简单

2、分层清晰

3、层次不要太深

3、相对独立

4、低耦合

5、自适应性强

6、使动画实现更简单

上面几点不分先后和优先级，你需要根据项目的实际需求和设计以及开发周期，权衡他们的比重。

详解Grid

Grid的最大特点是他可以向四个方向(HorizontalAlignment，VerticalAlignment)填充Usercontrol。同时，他的子元素也可以向四个方向填充他们自己。Grid中所有的子元素都是用margin进行相对定位的（这个相对指相对于父容器Grid)。

有几种情况需要特殊注意：

1、当我们没有HorizontalAlignment和VerticalAlignment的默认值就是"Stretch"，换句话说如果我们这样写<Rectangle Fill="#FF701313"/>，虽然没有提到明确指定HorizontalAlignment和VerticalAlignment，但此时Rectangle的水平和垂直的填充方式默认就是Stretch。

2、请不要忽略margin的细微差别。如下面两张图片中，这个矩形的宽度，对齐方式都是左对齐，上下填充对齐，唯一的区别是margin.right的值一个为88，另一个为0。

可如果你此时改变这个矩形父容器的大小，就可以看出两者的区别。其中第一个永远和他父容器的右边保持88的间距。

Grid的一个另外一个特点就如他名字一样，你可以在grid中根据自己的需要定义多个行和列来构成你需要的网格。

上面的图中是一个最基本的Grid，他分为三列。每一列的宽度都不同，请注意图中的三个图标，他们分别代表了三种定义列宽度的方式。

称为"Star"，对应第一行绿色代码， <ColumnDefinition Width="*"/> ，一颗*在本例中代表的第一列的宽度为LayoutRoot的实际宽度减去 210 再减去 244后剩下的全部宽度。同时因为LayoutRoot默认是跟随浏览器大小而改变的，所以第一列的*代表的宽度总是不固定的。另外你还以得知star在“Star-Pixel-auto“中优先级最低，他总是最后计算得来的。

称为"Pixel"，对应第二行绿色代码，<ColumnDefinition Width="210"/>，这个是最好理解的，第二列的宽度永远都是210像素。永恒不变。

称为"Auto"，对应第三行绿色代码、<ColumnDefinition Width="Auto" MinWidth="244"/>，第三列的宽度为自动，同时因为我们指定了另外一个属性，最小宽度MinWidth="244"，所以得到了如上图中看到的效果。假如我们删掉MinWidth="244",这行代码，在当前情况下，我们没有在第三列放任何控件，那么第三列的宽度为0。而当我们在第三列放入一个或多个元素时，这一列的宽度由这一列所包含子元素中，自身宽度加margin.left和margin.right的总和最大的哪个元素来决定。

如下图所示

第三列的此时的宽度是受灰色矩形影响的而不是红色圆形，因为灰色矩形的宽度为100 + 40(margin.left) + 40(margin.right)，所以第三列此时的宽度是180，而红色圆形是居中对齐的，同时它的宽度只有60，远远小于矩形，所以他不会影响第三列的宽度。但如果我们此时设置他的margin.right为200，由于60+200>100+40+40，那么第三列的宽度会变成260。

下面我们做几个简单的算术题来巩固一下刚才学的知识：

第一题，下面代码定义的列，每一列的宽度是多少？

答案：宽度100，分为5列，每一列的宽度为20。

第二题，下面代码定义的列，每一列的宽度是多少？

答案，第一列宽度为2*，换句话说此时宽度100的Grid，我们首先要将它分为6分，第一列站2分，其列各占一份，因为会出现除不尽的情况，所以5列的宽度依次为33,17,17,17,16。(注意：grid会自动根据某种规律对除不尽进行四舍五入,所以最后一列宽度是16)

第三题，下面代码定义的列，每一列的宽度是多少？

答案，一个宽度为100的Gird，他的第三列宽度为pixel =50, 而其他的为"star"，所以所有为"Star"的列平分100-50后剩下的宽度，也就是50/4。所以5列的宽度依次是13,12,50,13,12。

第四题，下面代码定义的列，每一列的宽度是多少？

答案，当出现三种标记混合时，请首先区分出他们的优先级，pixel > auto > star, 所以我们可以得知,所有定义为star的列的宽度的总和为 100-30-auto，即70-auto. 我们再假设我们不在第二列(width=auto)放任何元素，那么第二列宽度就是0，所以所有定义为star的列的宽度的总和为70。然后我们再来计算一下，上面代码中出现了多少次"star", 1*和*写法不同，但效果完全一样，都记做1个"Star"，所以我们可以得到1+2+3+4+1+1+1一共13颗star。那么每颗"Star"的宽度为70/13约为5.384...。所以宽度为100的 Grid，9列的宽度依次为5,0,11,30,16,22,5,6,5。

关于Grid中的位置动画：Gird中所有的元素定位都是用margin属性，而这个margin属性是Object类型，silverlight 中 ObjectAnimation是不会自动插值的，如果你对margin做向左移动的来改变子元素的位置，会得到一个意外的不流畅的动画（子元素从A点直接跳到B点）。当然也有解决办法，如果你一定要在Gird中位移某个元素，可以使用CompositeTransform的属性来做动画，CompositeTransform的属性不是object类型，所以动画支持自动插值。

但如果你非要对margin做动画，而且还要流畅显示的话，就要自定义一个double类型的依赖属性，然后专门针对这个属性写一个动画，当这个属性改变时，在他的属性改变事件里将它与子元素的margin.left关联。这样也可以实现流畅的动画。但这种做法效率很低，不建议大量使用。

Canvas详解:

Canvas直译为画布，他的最大特点是，Canvas中所有子元素定位的方式都是用过Canvas.Left和Canvas.top来进行的（我们可以把Canvas.left理解为x，Canvas.top理解为y）所以Canvas中的子元素永远是相对于Canvas的起点，也就是(0,0点)进行绝对定位。不管Canvas的宽高今后变成无穷大，还是0，他的子元素永远不会改变位置。

Canvas的另一个特点是，在Canvas中的所有子元素，指定对齐方式(HorizontalAlignment，VerticalAlignment)不会产生任何作用。

　另外，在Canvas中也是可以使用margin的（感谢kklldog网友指正）。

Stackpanel详解:　　

关于StackPanel有两个特点，第一是子元素的排列方式永远是流式的(从左到右，或者从上到下)，这点我就不多介绍了。

第二个特点十分特殊，就是Stackpanel具有截断的特性:

如何理解截断特性：

我们可以把截断理解为是stackpanel内部的一个bool变量。默认为false,当满足某条件时，自动变成true;

当截断=false时我们能做出如下图所示的效果:

图中Stackpanel的背景色为黑色，他里面放了一个Canvas，Canvas中放了一个红色的矩形，此时只需要设置Canvas.left属性，就可以让红色的矩形移动到黑色stackpanel之外。在做一些特效动画时，可能需要出现子元素移动到父容器之外的效果，此时你可以使用Canvas的这个特性。

除此之外，在StackPanel"截断=false"时，其实直接改变Stackpanel中子元素的CompositeTransform也可以达到这个效果，无需在每个元素的外面都包裹一层Canvas。如下图所示:

这两种移动出StackPanel方法各有利弊，特点分明。可以根据开发中的实际情况来权衡到底使用哪种方法。　

何时会发生截断？截断会有哪些影响？

当StackPanel水平排列子元素时，所有子元素的宽度总和大于StackPanel宽度时，会发生截断。

当StackPanel垂直排列子元素时，所有子元素的高度总和大于StackPanel高度时，会发生截断。

截断的影响，请看下图：

图中我们虽然指定了Stackpanel中子元素的CompositeTransform的TranslateX=176。但由于StackPanel是垂直排列的，三个矩形的高度总和超过的StackPanel的高度，所以此时发生了截断。就如你看到的，此时你永远不可能实现子元素移出父容器的效果了。

WrapPanel详解：

WrapPanel和StackPanel一样，也会发生“截断”，并且截断的时机是完全相同的。除此之外，当Wrappanel的Orientation=Horizonta时，子元素默认先从左向右排列，当子元素的宽度总和大于Wrappanel的宽度时，子元素自动向下换行。当Orientation=Vertical时，子元素默认先从上到下排列，当子元素的高度总和大于Wrappanel的高度时，子元素自动向右换行。

制空权详解：

在所有的容器中的子元素，都涉及到制空权问题，如下图所示：

在同一个容器中，三个大小相同的矩形彼此相互覆盖，制空权最高的为什么是绿色？从代码中我们可以看出，因为名为green的矩形是最后一个声明的。所以我们可以得出，在同一个容器中，不指定Canvas.ZIndex的前提下，所有元素制空权的优先级是由他们在xaml代码中声明的顺序决定的。由于编译器解析xaml代码时是按照自上而下的顺序解析，所以后实例化的对象总会获得更高的制空权。

图中左下角红色框中的按钮名为"arrange by Z order"，他表示在当前的object and time line窗口中所有元素按照制空权的降序排序，点击一下这个按钮后，所有的元素会按照制空权的降序升序排序,但这不会改变任何代码和界面效果，仅仅是改变了object and time line窗口中元素的显示顺序。

在任何容器中(无论grid,canvas,stackpanel,wrappanel等等)，你都可以通过Canvas.ZIndex来重新定制制空权。例如:

按照上面代码来重新定制制空权后，红色矩形会获得最高的制空权，绿色最低。Canvas.Zindex的是int32类型，所以他的取值可以是负数。

　下面我们再来做一道题来检查一下大家的学习情况。

如上图所示，我们有五个矩形，分别为蓝(zindex50)，黄(zindex80)，绿(zindex120)，黑(zindex20)，红(zindex-100)，那么他们的制空权优先级是如何的呢？

答案是：black>green>yello>blue>red 。得到这个结果的依据是，首先LayoutRoot的第一级子元素是firstGird,secondGrid和Red。他们之间的制空权关系是SecondGrid>FirstGrid>Red,（因为red的zindex=-100），所以secondGrid的制空权最高。而在这个基础上，虽然green的zindex为120远远大于black的zindex，可由于secondGrid的制空权高于firstGird，所以black依然会覆盖blue yello green。

结果如下图所示:

补充一点，不管什么样的容器,grid,canvas,stackpanel,wrappanel等等他们之间以及他们子元素之间的制空权关系都和上文中介绍的是一摸一样的，没有任何区别。

总结

没有万金油的布局方法，简单的几个布局可以有千千万万种组合，就像7个音符可以组合出无数中音乐一样，希望大家能活学活用，总结自己的布局流派和风格。

我自己的布局使用习惯

估计会有人问这个问题，先声明我的做法不是标准，仅仅是一种使用习惯。我最常用布局的就是Grid,其次是StackPanel（在构建表单的时候我个人更喜欢用StackPanel嵌套StackPanel的方法，而不是用Grid画表格，因为我觉得这样在Object and timeline视图里看过去层次非常清晰），我在一个项目中Canvas和wrappanel使用次数非常的少，只有当非常明确用途，而且确定必须使用Canvas时我才会使用。另外还有一种情况我会使用Canvas，就是直接从AI文件导入一些矢量图形时，往往我会先将这些矢量图形分组，分块，每组都用Canvas包裹。好处是Canvas即使改变大小或者形状，也不会造成矢量图形变形。

另外除非要对grid,canvas或者其他静态元素做动画，行为或者需要在后台代码做控制，否则我不会为他们命名。(静态元素通常指logo,花边，装饰，大多数情况下一些grid和canvas也属于静态元素)这样可以使我在vs中语法提示树看起来非常干净，同时编译后xap文件也会小一些。

除此之外，当你从Blend中拖拽一个控件到grid中时，你会发现他的宽度往往都是相对的，此时我都会把宽高换成绝对高度，然后去掉所有自动生成margin属性，只有当非常明确需要让控件呈现相对宽高时，我才会使用margin。虽然这么做有点累，但这是一个良好的习惯，他可以确保你的界面总是严格的按照你的预期呈现各种效果，你甚至可以从这点上轻易区分出一个界面是由程序员做的还是美工做的。

本文链接

MSDN论坛桌面小工具试用体验

2011-03-07T04:54:00Z

今天微软发布了一款名为MSDN论坛小帮手的桌面软件，试用了一下感觉还不错，原文是这样介绍的：

“有了它，您就可以快速访问MSDN中文论坛的丰富资源：无论是快速进入某个特定技术（比如 C#）的提问页面；还是浏览阅读微软技术支持团队精心为您收集、翻译的精华贴；都只需要您在桌面上轻点两下鼠标就好啦！更牛的是论坛上的最新信息——比如发布了新的代码示例、精华贴，或者有奖活动——还有最新的帖子，都可以从“MSDN论坛好帮手”中直接看到，别提有多方便了。”

安装包只有40k，非常小巧。

安装后，你就可以在你的小工具集合中找到他。

点击论坛动态，可以随时查阅MSDN论坛的最新动态。

点击最新帖子，可以随时了解论坛最新的帖子。

点击精华问题可以查看非常详细的分类，比如WPF Silverlight C#等等

另外还有一个十分方便的论坛搜索功能，如果你懒得查分类，直接在这里输入要查找的内容就行了。

总结：

对于像我这种每天都要上网找各种资料的人来说，这的确是一个非常实用的小工具。省去了大量的时间，其实很多权威的结果最后还是要查到MSDN。另外他可以像其他小工具一样，很方便的关闭，收起。安装程序也只有40K，删除也只需要1秒而已。不知道这个工具是否支持XP系统，有环境的朋友可以帮忙测试一下。

你可以在http://gallery.live.com/liveItemDetail.aspx?li=7dd3da55-7d3f-4473-8b50-6ea4b84c8172下载到这款工具。

TechNet中文论坛版小帮手可以到http://gallery.live.com/liveItemDetail.aspx?li=2f85a039-506b-443e-b2a2-4009ba82ea1f下载。

本文链接

写给新人《身价翻倍的最短路径算法》-我爱加班，你们也要爱加班！

2011-03-05T04:24:00Z

声明：这篇文章很短，读完它你不会花费超过5分钟。但我相信他可以让你身价至少翻上一倍。本文只针对新人，相当于西药，需要与激情一同服用。当然如果你是面临困境，找不到方向的老鸟，本文也可起一定作用，不过老鸟们更需要中药。

我爱加班，你爱加班么？答案更多的一定是“否”。“别人都走了我为什么留下？”，“这种公司不值得我为他付出”，“他只给了我8小时的工资”，“我上次为公司加班那么久，这次还来？我付出了，公司何时付出呢？”，“C蛋经理，就冲他那德行，老子就不加班”......

地瓜的观点一：不爱加班是一种心理障碍

不爱加班是一种心理障碍，这层障碍就像纸一样薄，你只用一分钟就可以改变自己，我将在本文中尝试帮你戳破他。

地瓜的观点二：不爱加班是因为把帐算到了公司头上

　我爱加班，因为我算清了这笔账。也许你不会算，或没兴趣算，但现在你有了新的选择，读完本文即可。

谁是加班的直接受益者？我还是公司？根据我个人的亲身体会，加班的最直接受益者一定是我自己。你学习的知识可以在工作中巩固，派生，领悟，最终成为自己的心得与经验，这一切的一切都预示着你身价在逐渐增加，你对于公司价值越来越大。而白天的8小时，每一个人都在经历这种过程，从相对的角度来说，所有人向前走一米，等于大家都没有进步，加班给了你超越别人的机会。加班这笔账，一定要算到自己头上，而不是公司。

地瓜的观点三:越是自身条件差，懒的人，越要选择主动加班。

苍蝇不叮无缝的蛋，对于自我约束能力差，缺乏计划的人，主动选择加班，可以强制让你脱离家中慵懒，无约束的环境。就算没工作需要加班，就拿公司当做图书馆吧，起码是一个让自己可以静下心的环境。

地瓜的观点四：没钱的人，时间就是你的财富。有钱人把钱花出去，得到收益。穷人把时间撒出去，也可以得到收益。

当你终于完成某个牛B的遗传N叉树算法时，你可能连身边最简单的帐都没算懂。你把时间当什么了？泡妞，网游，电玩，喝酒，你比我水，我比你更水。一个穷人，把自己唯一的财富都投入到毫无收益的项目中，会解N叉树又有何用？

地瓜的观点五：觉得自己苦的穷人，你的穷是因为还不够苦。

如果你很穷，仅此而已的话，我可以提上帝宣布你的一生都将是悲剧。如果你很穷，又比所有人都苦的话，都已经这样了，何不试试再苦一点。脑袋掉了，碗大个疤，你在苦也不过劳其筋骨而已。人把一件事做到极致后，自然会有回报，再苦一点，才能早点结束吃苦。

地瓜的观点六：比优秀的人更优秀的前提是有更多的时间

许多家教好，自我约束能力强的人回到家里依然学习到12点。你想比他们更优秀？很简单，学习睡觉的方法，提高睡眠质量，然后训练自己少睡一小时，二小时，几年以后可以超过他们？你用十个手指头就能算的出来。

　 即使是通往成功的路上，也照样充满挑战，要看开一些:

1、最值得同情的加班--加班不管晚饭。你可以姑且看做是自己拿几块钱学费，租了一个高档写字楼。

2、最悲剧的加班--只有自己在加班。扯淡，所有人都停下来，只有你还在跑，到底你是悲剧还是他们？

3、最没价值的加班--整天整天干没技术的活。你把所有人都不爱干的都干了，放心，你的项目组已经无法离开你了。然后尝试自己编写自动化小工具，简化你的工作，把成果物和工具一起交给你的领导，他会感动落泪的。

只有事业,不要生活了么？

答案几乎是一个YES，上海70年代，一个纺织女工的薪水可以养活两个家庭，而现如今呢？中国一个家庭，51%的收入都花在了交税上，面粉13%的税，蒸成馒头就变成17%的税，中国的税很重啊，而你要先养活自己，然后还有四个老人，一个女人，N个孩子等着你。注意是“养活”不是“养死”。

淘汰法则就是适者生存，今天的社会其实比原始社会更难以生存，原始人组团打猎，杀死一只动物，吃饭，养家，住房全解决了。而生在发展中国家的你，只能孤军奋斗，如果有人十年可以解决吃饭，养家，住房，这三件事，全国人民都要羡慕你。这种环境下你吵着嚷着要生活？这不是让人笑掉大牙么？问问自己，没有事业做基础，背井离乡的你要的生活到底是“生活”还是“生死”？

我选择回家自学

那我就选择和一个团队在公司一起加班，别人自己在家三天看完一本书，我们三个人看一本，三天每人看三遍。然后互相辅导，讲解，又学知识又练口才。如果你是在上海或者北京，我还比你省电费。

当你爱加班时:

恭喜你，此时你已经获得了比其他人更接近成功的心理优势，看着每天早早回家虚度光阴的哥们，你就偷偷的笑吧。看着领导欣赏的眼光，你就偷偷地笑吧，看着周围人同情，感叹，无法理解的表情时。你就偷偷的笑吧。此时你会有更多offer,更多选择的空间，自信是浑然天成的，伴随你直到走进棺材。

你心理上的窗户纸破了吗？如果答案是“破了”，请点击右边的“推荐”，让更多人看到本文。

可以不看的后续

来博客园半个多月了，写了几篇关于Expresson Blend的文章，唯一觉得可惜的是，这些文章讲解的都是技巧，什么是技巧？技巧就是“术”。虽然“术”更有吸引力，简单，新鲜，好学，易上手，像极了那个“一步登天的捷径”，但一个靠“术”的人是走不远的。所以当大家回帖说“好文”，我心里总不是滋味。

真正让一个人走得远的一定是“道”，而非“术”。一篇传授“道”的文章，就像一颗久化不开的糖块，你可以将其含于口中，十年乃至二十年依然甘甜。本文就是在下总结的一些“小道”，它可能含不了十年，但哪怕只有一年，也足以让新人们的身价翻上一倍。

本文链接

《博客园临时导航使用指南》-烤地瓜著

2011-03-02T20:45:00Z

鉴于上一篇博文(博客园的易用性太差了，我要代表月亮消灭你们!! )，我认为博客园的导航机制效率极低，几乎100%的用户都遭遇过错误导航和十分糟糕的用户体验。我觉得这种事情发生在一个开发者技术社区，而几年的时间内居然没有一位开发者为期指出错误，简直是一种不可思议。不过我深深的理解，当我发表挑刺文章时，博客园的工作人员还在休息，即使他们发现了，也不可能马上改变现状。以前遇到类似的事，我身边或者你们身边，一定会有人出来劝说，“你应该乐观，上进，从积极的角度去考虑问题”。好，为了让这些人闭嘴，本人准备在博客园糟糕的现在与美好的未来交替的期间内，为博客园写一本临时导航使用指南，帮助那些用户，尽量避免或者减少一点让他们抓狂的导航体验。

第一印象

首先您把屏幕分辨率调整到1440*900，然后在IE地址栏中输入http://www.cnblogs.com,点击回车。按照此步骤操作，你将成功的访问“博客园”网站。如下图：

初次进入博客园，映入眼帘一定会是上面这张清爽的图片。一切看起来就像白云，草原，湖泊，成群的牛羊那样自然。但是且慢，如果此时您准备开始在“博客园”进行一番激动人心的旅程，在这之前，我强烈建议首先由烤地瓜为您介绍一下博客园的特色导航系统。因为他实在是一种专利，特色，或者可以称之为有个性，史无前例，绝无仅有，太给力了等等。

客观请往下面看：

首先为您介绍的是博客园首页的导航系统，请记住博客园不迷路口诀第一条，“我的园子”就是“园子”，“园子”就是“我的园子”。总之不管你点了他们两个哪一个，您都会导航到同一个位置。如果你点击右上角的“博客”，将进入博客空间，而不是我的园子，但在我的园子里，您可以写博客，而在博客空间，您只能导航到我的园子。那么接下来我相信您一定对右边那个“我的园子”按钮所连接的我的园子非常有兴趣，好吧，请跟着我点击右边的“我的园子”连接，导航到我的园子，一睹她的芳容。

欢迎您进入博客园最有个性的“我的园子”，无论您之前在首页点击“我的园子”还是“园子”，我们都将在这个页面碰面。但请相信，这绝不是偶然。虽然眼前这个界面的风格与博客园首页完全不同，但请放心，您没有被导航到其他网站，现在您依然身处“博客园”之内。

好了，打消您的疑虑后，下面我来为大家介绍博客园特色导航系统之二，以及博客园不迷路口诀的其余部分，请看下图。

如果您以为点击“首页”，可以回到http://www.cnblogs.com这个页面，那您一定是第一次到博客园来，还不懂这里的规矩。请注意，无论您点击“园子”，还是“首页”，您都将得到一个在当前页面刷新的操作。是的，您将依然被导航到“我的园子”这个页面，无论您点击多少次“园子”或者“我的园子”。想到导航到博客园的真正首页，您需要点击页面左上角哪个灰色的，不起眼的9号字“博客园首页”，虽然他长得那么不起眼，看起来就好像是一个友情链接，但事实总是胜于雄辩的，而如果您是一个色盲的话，请直接在IE地址栏输入http://www.cnblogs.com回到首页。接下来请跟我念博客园不迷路口诀第二句，“园子就是首页，首页不是博客园首页，首页就是园子。”

此时如果您和我现在一样，即使凌晨3点，依然睡不着觉，想有感而发的写一篇博客时，您可能会操作错误，或者即使您操作正确，您也将有1/2的几率选择一种低效的方式发表博客。为了节约您宝贵的时间，请看下图。

上图中左侧和右侧各有一个“博客”链接，如果您点击左侧的博客链接，并预期它将会把您导航到发表博客的地址，那么您一定是第一次来到博客园。实际上，只有点击右侧的“博客”链接，才会将您导航到自己的博客空间，而点击左侧的“博客”链接，您将看到一个其他人的博客列表。但其实您根本没有必要点击右侧的“博客”链接，请注意图中哪个我用细细的红线标识出来的“写博”链接，虽然他用浅灰色9号字，显得那么不起眼。但是相信我，这个按钮才是您正确的选择。点击它后，您将只需一次操作，就进入“发表博客”界面。而点击右上角的“博客”按钮，您还需要再次选择，才可以进入“发表博客”界面。这种设计不得不说是“博客园”独有的最佳发明。使我不禁联想到现实的生活中，奋斗在第一线的，为企业创造价值的人，比如像我这样的烤地瓜，终年周六日不休息，每天加班到深夜还不要加班费，公司提供的晚餐只能买得起蛋炒饭。往往都被用灰色9号字遗忘在某个属于炮灰的角落，只有很少的眼力好的客户，找到我才能真正解决他们的问题。在“博客园”中，我们再一次体会到现实生活的情趣不是吗？好了，不废话了，再废话要被人骂了。

客观，请记住博客园不迷路口诀第三句“左博客不是你博客，右博客不能发博客”。

那么接下来我相信您一定对右边那个“博客”按钮所连接的博客空间非常有兴趣，好吧，请跟着我点击右边的“博客”连接，导航到我的博客空间，一睹她的芳容。如下图。

欢迎各位来到博客空间，在您开始在本页探索前，还是请地瓜先唠叨几句。首先，您没有被连接到一个新的网站，您现在访问的是可以个性化定制皮肤的博客空间。请您注意左侧的“我的主页”按钮，假如您以为点击这个“我的主页”将会把您导航到一个名为我的主页的新页面，那您一定是第一次来到博客园，其实点击这个按钮将会把您导航到“我的园子”。

请看图中间的哪个“首页”按钮，我们之前在我的园子里已经看到过他，假如您按照之前的推断，点击"首页"后，依然将会把您导航到“我的园子”，那您一定是第一次来到博客园，其实点击这个按钮，您将得到一个在当前页面的刷新效果。没错，您依然还是被导航到“博客空间”。请跟我念博客园不迷路口诀第四句:"我的主页是园子，也是我的园子，首页不是我的园子，也不是园子，首页就是当前页"。

接下来，如果您想浏览其他人的博客，可以点击“博客园”链接，直接导航到http://www.cnblogs.com的主页面。如果您要发表博文，您将遇到两种选择，您可以点击“新随笔”，直接开始发表博文，也可以点击“管理”链接，将您导航到管理页面。

按照之前的判断，我相信您一定对右边那个“管理”按钮所连接的页面非常有兴趣，好吧，请跟着我点击右边的“管理”连接，导航到管理页面，一睹她的芳容。如下图：

进入管理页面后，请您不要吃惊，虽然这个页面的界面风格就像那个“园子”一样，和前几个界面风格完全不同，但是您真的没有被导航到其他网站，而是依然在“博客园”中，那个蓝色的大大的logo可以证明我说的。虽然我知道，您看这个logo一定感觉既眼熟，又有点陌生。我完全理解您现在的感受，所以接下来请允许我隆重的为您介绍博客园的Logo系统。

这三个logo都是我们博客园的官方标识，前两个您是在http://www.cnblogs.com的主页面和“我的园子”中看过的，而第三个，尽管您可能觉得眼熟，但是您的确是进入管理界面后第一次看到它。这三个logo大有来历，“博客园”之所以三个logo一起使用，实在是因为他们弥足的珍贵，也许都是某书法家的绝笔(当然有可能就是写了这三个字才死的)，总之“博客园”有三个logo而您必须一一记住。接下来为了避免您执行错误的导航操作，请继续看下图：

首先请注意，左边“我的园子”按钮会将您导航到“我的园子”，而右边的“我的主页”，依然会将您导航到“我的园子”，而绝不是一个“我的园子”的副本。您可以通过查看这两个按钮的连接属性来确定这一点。点击“我的博客”，将导航您到博客空间，点击“博客园首页”，将导航到http://www.cnblogs.com的主页面。

那么尽管您可能已经不耐烦了，还是请跟我念最后一句博客园不迷路口诀“我的园子就是我的主页，我的主页才是我的园子”。

“博客园”的导航系统就介绍到这里，希望阅读了以上帮助手册，可以减少您的错误导航次数，虽然我知道其实博客园100%的用户都发生过错误导航的经历，要求您这样第一次来博客园的客户，只是简单的读了读帮助手册就不错误操作有些勉为其难。但请相信我不要再试着重读一遍该手册，他会将您渡入佛门，法号唐僧，同时也会让你忘记如何说中文。甚至一想起“博客”两个字就感觉恐惧。尽管许多人说写博客是件愉快的事，但在“博客园”，一切都更接近真实生活，现实也往往总是残酷的，这也是博客园的最大特色。在通货膨胀的2011年，随着老百姓收入的降低，税收的不断增加及变相增加，只有坚持走特色路线，奢侈品路线，以只买贵的不买对的为核心思想，才能迎合市场，创造机遇，刺激用户的唾液分泌速度，赢取上市成功一天的早日到来。请相信，博客园是一个IT主题的社区，在这里出没的都是国内各行业顶尖的开发高手，博客园诞生至今，没有任何一位开发者对我们的导航系统提出过批评，这说明我们导航系统的鱼目混珠程度已经达到了IS9000认证标准。而我们的博主门得过且过的能力也达到了无可救药的程度。

介绍就这么多了，非常感谢您阅读本手册。在阅读本手册后，甚至过程中，如果您感到任何不适，可以直接拨打24小时求助热线112，提交您的基本信息，我们的工作人员会及时对您进行现场援助。阿门！！！

本文链接

博客园的易用性太差了，我要代表月亮消灭你们!! 如此经典的反面教材，每一个程序员都应该来看看!!

2011-03-02T16:08:00Z

来博客园一个月了，不得不承认这里人气很旺。我在CSDN和博客园同步发表的文章，在CSDN点击率只有120。但博客园这个网站的设计实在有一些业余。如果博客园也希望未来能上市的话，请起码改正这些问题。起码让大家看起来像那么回事。我对博客园设计的不满主要集中在页面的导航，布局，以及文字上。下面我逐一说明。

上图是登录博客园后，页面最上端的导航条。左边是我的园子，右边是博客。我第一个不理的就是为什么园子里就不能写博客，为什么要把他们分开。第二个，我的操作习惯是一边浏览别人的博客一边找灵感，我非常希望右上角直接有一个“开始写博客”，或者叫“管理我的博客”，可以一步进入写博客页面。

还有大家注意看，左边有两个按钮,一个叫“我的园子”，一个叫“园子”，我点了后发现两个不一样名字的按钮，链接的地址居然都一样。好了不管那么多了，接下来，我就点击“我的园子”再来看一下。

请看上图，映入我眼帘的是一个界面风格完全和博客园首页不同的网站，我甚至怀疑我是不是跳转到别的网站了。这就是第一个跳转给客户带来的预期么？

然后大家看最上面的导航栏，有一个名称叫“首页”，我点了以后，没有跳转到博客园首页，而还是停留在当前页面。最可气的是左上角哪个灰色字体叫“博客园首页”，看了这个。更加让我确信我刚才点击我的园子，其实是被导航到另一个网站了。一个网站只应该有一个首页对吧？而且一定是xxx.com xxx.net的根目录。那么请告诉我，哪个灰色的，不起眼的“博客园首页”难道是一个友情链接么？在继续看啊。第四个灰色的按钮“园子”。什么园子？我点了园子发现功能和哪个“首页”是一样的。只是刷新了一下页面。好了我们继续看下图。

大家注意，左边一个“博客”，右上角一个“博客”，同样的名称。左边哪个点了是查看别人的博客，右边的是跳转到我自己博客。每次到这里我都会发蒙，到底按哪一个才是去我自己的博客的？也许我有QQ空间的使用习惯，我更希望的是在园子里可以直接写博客，可我在博客园写了十篇文章后，我才刚刚看到园子里哪个灰色的，一点不显眼的“写博”按钮。这个按钮才是我真正需要的，每个页面都应该必须存在的功能。而你们居然只用那么一个颜色，那么不起眼放在一边。好了，我们继续。点击右上角的“博客”按钮，导航到我自己的博客。大家看下图。

请大家注意看左边导航栏里的“我的主页”，我看到这个后以为他是一个新东西。结果点了后发现，其实他将我导航到了“我的园子”。我真的十分无语啊。一个网址三种称呼，“首页”，“我的主页”，“我的园子”。而博客园真正的首页名叫什么呢？叫“博客园”，以及“博客园首页”。

好，接着我们继续看啊。注意上图里正上方黑色的那排导航栏。我又看到了我熟悉的哪个“首页”。我点击以前预期是这样的，点击它后，不是导航到博客园首页，就是我的园子。可结果是，点完后页面依然没有跳转。我还在当前页面。我恨你啊~~~我恨你，你让我这个用户感觉自己完全是一个傻子，或者智商不超过20的人。不客气的说，博客园是我去过的网站里让我迷路次数最多的。我编程快8年了，在博客园导航出错率比我写代码的出错率还要高。然后我们点击哪个“管理”链接，继续看啊。

进入管理界面，再次给我一种我似乎被导航到另外一个网站的感觉，界面风格。包括博客园那几个字都变了。下面看看博客园的Logo您就明白了。

前几天看新闻，提到博客园全国进前十了，我现在只想说，作为一个以IT技术为主题的博客，这么差的易用性，居然可以进入中国博客前十。这绝对是一种耻辱。这么多程序员，你博客园这么低的易用性，还每天在我们眼前招摇过市，你不觉得有点太那个了吗？还有我还要说的是博客园的博主们，我们都是程序员，我们做出的东西不是给自己欣赏的，是给人用的。用户体验胜过一切，你们这些博主，在这里一发帖子就是三年，居然能眼看博客园这样？反正我是绝对无法忍受，并且必须说出来。

我也请博客园的工作人员认真思考。我用一个小时就能找出你们这么多问题。我要是你们，我就把这篇文章放到推荐帖的位置。好好晒一晒，让更多的人出来为你们挑错。让大家看看博客园的决心，这样博客园才会越来越健康。当然我也做好被封ID的准备。在用户体验面前我是绝不会让步的。不废话了，你们好好反省一下吧。

烤地瓜敬上!!

补充一点建议。刚才发现的，还是看截图。

请看这些分类，博客园是以.net技术为主的交流社区。而微软目前的主流战略产品wpf sl xna wp7 等等等等都是用户体验的革命。博客园应该为设计师，美工，易用性工程师留有一席之地。他们早已经程序软件开发必不可缺的一部分。我个人更希望一些美工，设计者能看到我关于Blend的文章，而并非只有程序员。

这次发表博客，为你们挑刺，我甚至不知道该如何选择分类。。。。。。哎！让我说什么好？我要代表月亮消灭你们!!

软件做出来就是给人用的。没有易用性的软件，就好比你做马鞍，鞍上面定了个钉子。程序员不能永远只盯着工艺，没有易用性，不重视用户体验的程序，架构再好，核心技术再牛，也不会感动用户，没有用户使用的软件，就如同废铜烂铁。强迫用户进行差的用户体验，就是在强X用户。

哥们们你们要觉得我说的有点道理，就点一下推荐，把它顶上去。如此忽视易用性，尤其还是一个程序员社区，我们以前置若罔闻，但现在我把它提出来了，就请你们顶一下，改正他吧。

公司网络调整，刚刚能上网。这个文章果然被编辑推荐起来了，这说明博客园的成功是有原因的，并且将来一定会更好。我个人对这篇文章的看法是，他的浅层次问题是博客园的导航和设计问题，而深层次问题则是IT行业，我们的开发对用户体验的漠视与纵容。这才是日后值得深刻思考的问题。我更希望大家可以多多关注深层次的问题，并畅所欲言。

本文链接

【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

2011-03-02T05:29:00Z

刚才有人说我的标题很给力，哈哈。那这个标题肯定更给力了，“飞出ListBox吧”。你可以在www.kaodigua.net上看到具体的效果。下面是效果截图：

当用户选择ListBox中某一项时，这个被选中的Item从ListBox中飞出来，平稳的屏幕中央。这是我自己最喜欢的一个特效。实现起来依然不是很困难。不过在开始之前，还是先废话几句，FluidMoveBehavior其实一点没有用，它不提供任何任务操作，不简化反而是增加了界面的工作量。但他对程序员来说是一种史无前例。在silverlight开发中，出现了一种大家很喜欢且争先恐后要掌握的“没用”技能。这预示着silverlight未来一定会引领一场革命。

开始正题，这一章会步骤稍微有点多，请先打开Blend，新建一个示例数据源，只定义一个属性，名为Image,类型也是Image。如下图：

然后，点击Collection节点，直接把他拖拽到LayoutRoot中。这样会自动生成一个ListBox,我们设置一下ListBox的位置和宽度，让他靠左边对其。如下图所示。

然后在LayoutRoot的中间，新建一个Grid，在里面放一个Image。Image填充整个Grid。注意Image目前不必指定图片源。就让他空在哪里。如下图。

然后点击这个新建好的Gird，在右侧属性面板中找到DataContext属性，点击最右侧的，在弹出菜单中选择DataBinding...

接下来，在弹出菜单中，打开Element Property选项卡，然后选择ListBox，接着在Properties列表里选中SelectedItem，点击OK按钮。

接下来，请选中刚才新建的Image控件，在右侧属性面板中，与上面相同，找到Source属性，点击最右侧的，在右键弹出菜单中选择DataBinding...

在弹出窗口中，选择DataContext选项卡，这里可以看到文章开始时让他创建的示例数据源，直接选中Image,点击OK按钮。

接下来，为Grid添加一个 FluidMoveBehavior。

AppliesTo属性设置为self。

InitalTag属性设置为DataContext。

如果你前几部都做对了，应该得到如下效果。

接下来很关键的一步，请右击ListBox，在弹出菜单中依次选择Edit Additional Template->Edit Generated items->Edit Current,进入模板编辑界面。

为Image元素添加一个名为"FluidMoveSetTagBehavior"的行为。注意这里是FluidMoveSetTagBehavior而不是FluidMoveBehavior。

在右侧属性面板里设置FluidMoveSetTagBehavior的Tag属性为DataContext

点击F5运行得到最终效果如下图

恭喜给位，你们已经学会了独门秘籍，在这个文章没有被地球人都知道前，赶快做一个，然后秀给你们的朋友看。他们一定会惊呼不可思议。当然你还可以发挥一下自己的美术功底，把它设计的像www.kaodigua.net上那样很美观，很专业。

源码下载

如果你喜欢我的文章，请点一下右下角的“推荐”，如果你没有注册博客园，我建议你注册一个账号，然后再点推荐和关注我。这样我文章更新时你可以第一时间得到通知。如果你第一次读我的文章，我建议你从第一章开始从头学起。本文中包含很多手法，细节，我没有单独列出，都在某一章的某张图片中体现。这三章真的很精彩，让你简单实现从前难以想象的UI特效。强烈建议你将它推荐给你的朋友，家人，媳妇，爸爸妈妈，还有未来的老丈人。如果你有七舅老爷的话,你还可以......= =!

上班了，回见！

本文链接

【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条

2011-03-02T04:28:00Z

这一章讲解FluidMoveBehavior的另一个应用，这是一个绝对原创的做法，目前已经被微软收录在silverlight.net，作者就是烤地瓜本人^^ 。这个idea来自silverlight.net一个外国朋友的在论坛中的提问。他在帖子中提起经常在flash中看到许多ListBox当拖拽滚动条时，里面的元素总是很平滑的运动，而不是生硬的跳到眼前。不知道silverlight是不是可以实现这样的效果。这个帖子当时点击率很高，大家都踊跃的讨论思路。大多数人都倾向于自己重写，有的人还给了具体的思路，新建N个类，从继承到接口洋洋洒洒几百行代码。但最后我的回复成为了最佳答案，原因很简单，因为我告诉他他一行代码都不用写。实现这个效果，你只需要30秒。

首先新建一个项目，添加一个ListBox，设置它的宽度为100，高度为200，左对齐，上对齐，然后直接向里面添加20个ListBoxItem，如下图所示:

接下来，右击ListBox,在弹出菜单中选择Edit Template->Edit a copy

在弹出面板中随便取一个名字，然后点击OK按钮。进入ListBoxTemplate编辑模式。然后如下图所示找到ItemsPresenter元素，并选中他。

然后再Assets面板中，找到FluidMoveBehavior，你可以直接双击，将它附加到ItemsPresenter上，也可以直接拖拽他到ItemsPresenter上。

然后退出ListBoxTemplate编辑模式，再次右击ListBox，在弹出菜单中依次选择Edit Additional Templates->Edit Layout of Items-> Creaye Empty，在弹出菜单中随便取一个名字点击OK按钮。

点击F5直接运行程序，然后拖拽滚动条，此时你可以看到ListBoxItem可以平滑的上下运动了。

源码下载

背后的故事：

最后一步Edit Additional Templates->Edit Layout of Items-> Creaye Empty，我们新建了这个template,但什么也没有操作。但它确是实现这个效果最核心的一步。他将ListBox的容器模板暴露在xaml中。

下一张讲讲解如何让ListBox中的元素飞出ListBox之外，你可以在www.kaodigua.net中看到这种效果。如果你喜欢我的文章，请点一下文章右下角的“推荐”，谢谢。

本文链接

【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动

2011-03-02T03:26:00Z

好久没更新博客了，今天如果没急事，准备连发三篇，完全讲解Blend最牛的元素-“FluidMoveBehavior”。我向大家保证这三章一定非常精彩，不看你肯定后悔。我相信这三篇文章发表后，国内很多silverlight和wpf作品将充满各种飞出，漂浮的酷炫效果，以及让元素平滑运动的滚动条。你的客户一定会惊讶，原来软件可以这么炫。而更神奇的是，实现这些效果真的非常非常简单，一行代码都不需要写。

很多程序员不知道Blend,当然就更少人知道FluidMoveBehavior了。FluidMoveBehavior就如他的名字一样，附加他后让所有的元素流动起来，如下图：

上图中就是我们第六章讲到的使用wrapPanle构造ListBox,我对他做了一些小修改，使他在改变容器大小时，ListBox中的全部元素都会以流动的方式，漂浮到他的位置。做法非常简单，首先右击ListBox在弹出菜单中依次选择Edit Additional Templates->Edit Layout Of Items->EditCurrent,进入ItemsPanelTemplate编辑模式。

在这里我们可以看到WrapPanel(这里原本是StackPanle,但在第六章我们将它改成了Wrappanel)。首先选中WrapPanel。

然后在Assets面板中，选择Behaviors->FluidMoveBehavior。双击它，他会自动附加到我们刚才选中的WrapPanel上。

如果你做对了，应该得到下图中的效果。

然后点击FluidMoveBehavior，在右侧的属性面板中设置AppliesTo属性为Children。

退出当前模板编辑模式。恭喜你，你的第一个漂浮移动的ListBox已经完成了。需要注意的是，你最好检查一下ListBox，不要为他指定宽度，并设置HorizontalAlignment="Stretch"，这样他才会跟随容器的大小变化而变化。点击F5运行，然后试着改变IE的大小。就可以看到效果了。　

源码下载

后两章我会讲解如何利用FluidMoveBehavior让元素飞出ListBox之外以及可以让元素平滑运动的滚动条。你可以在www.kaodigua.net中看到这种效果，如果你想快点看到后两章，请点一下文章右下角的“推荐”，你们多顶顶我才有干劲，^^

本文链接

【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮

2011-03-01T14:05:00Z

博客更新较慢，先向各位读者说声抱歉。这一节讲解的依然是开发中经常遇到的一种需求，在DataGrid行末添加按钮。请看下图。

上图中"功能"这一列里显示的并不是数据，而是一个TextButton。当点击它时，对应的进行删除操作。这里为了大家看的明显果，我在点击按钮后，弹出当前选中行的"Name"属性。当然你也可以对行内数据进行增删改查等各种操作。除此之外，他还可以充分适应分辨率及IE大小。

上图中，当IE缩小到一定程度后，DataGrid会自动产生水平滚动条，只要向右边拖，就可以看到我们的删除按钮。看起来本来就应该是这样不是么？但实际的情况中，我见过的一些项目的做法往往都是错误的，他们不能自适应IE大小，当IE宽度缩短时，删除按钮就消失了。错误的效果，如下图所示.

上图中是错误的做法，当IE窗口缩小后，即使滚动条拖到最右边，依然看不到删除按钮。并且，删除这一列不能显示列名。

这次的课程可能稍微复杂，涉及到后台代码，及一些MVVM的手法。但请相信我，熟练掌握后，实现这样的DataGrid，3分钟足够了。好了，不废话了，请大家打开Blend，一起跟我做。首先新建一个项目，拖拽一个DataGrid到你的LayoutRoot中。然后新建一个示例数据源，如下图所示：（关于如何新建示例数据源，请参考：第六章认识ListBox）

上图中我们的示例数据源只有两个属性,number型的Age和String型的Name。接下来，请直接拖拽Collection节点到DataGrid上。如果你操作完全正确，会得到下图中的效果。

接下来，在Object an TimeLine面板中，展开DataGrid节点，可以看到两个DataGridTextColumn，如果你把Name拖到Age上面，DataGrid的列就是按"Name"->"Age"的顺序显示。

你还可以通过修改它们的Header属性，将英文"Age","Name"变成"年龄","姓名"，

接下来，请点击属性面板左侧的按钮，切换到代码和设计视图。

随后你可以看到DataGrid的代码是这样的.

接下来需要手写一段代码。

<sdk:DataGridTemplateColumn Header="功能"/>

将这段代码写在两个DataGridTextColumn后面。

然后，先不要急着运行程序，此时运行会提示一个错误，"DataGridTemplateColumn必须指定一个Template"。所以，我们还需要为它定义一个模板。

在Object and Timeline面板中，右击我们新建的列，在弹出菜单中选择Edit Column Templates->Edit CellTemplate->Create Empty

在弹出面板中为模板取一个名字，然后点击OK按钮会进入模板编辑视图，如下图所示。

接下来，只需要在这个Grid中添加一个按钮即可，在Demo中我使用的是TextButton。(关于TextButton的做法，请参考：第三章从最常用ButtonStyle开始 - TextButton)，然后结束编辑，退出模板编辑视图。我们可以看到一个TextButton已经被正确的植入DataGrid。

看起来很不错不是么？不过现在这个删除按钮还不能响应任何事件，接下来来我们需要一些真正的Coding工作。使用MVVM的手法彻底分离UI和Code，并调用按钮的点击事件，弹出当前选中行的信息。

首先请在Project菜单中右击解决方案节点，在弹出菜单中选择Edit in Visual Studio。下面的coding工作会在VS2010中进行。讲到这里有人可能会问，“Blend不是也可以写代码么？为什么还要打开VS?” 这里我多说一嘴，Blend在设计方面的能力是毋庸置疑的，但coding还是要用VS，相信我不要用Blend写任何C#或VB编码，Blend弱智且低能的语法提示会恶心死你。

在VS中，新建一个Class,名为MyCommand。

MyCommand中的代码如下，大家可以直接拷贝。

public class MyCommand
{
public ICommand ShowInfoCommand
{
get;
private set;
}

public MyCommand()
{
this.ShowInfoCommand = new ActionCommand(this.ShowInfo);
}

private void ShowInfo(object selectedItem)
{
Expression.Blend.SampleData.SampleDataSource.Item item = selectedItem as Expression.Blend.SampleData.SampleDataSource.Item;
MessageBox.Show(item.Name.ToString());
}
}

如果你在为ActionCommand添加引用的时候，提示找不到这个类型。请引用后再试。接下来，F6编译一下工程，编译通过后用Vs打开我们刚才编辑的Xaml，在UserControl标签中输入下面代码。(注意此处的Lession7是我自己项目的命名空间名，此处你需要将它替换为你自己的项目命名空间名。)

xmlns:local="clr-namespace:Lession7"。

接着在UserControl.Resources标签中输入下面代码。

<local:MyCommand x:Key="MyCommand" d:IsDataSource="false"/>

输入后的效果如下图所示。

然后再VS中按Ctrl+F，弹出搜索菜单，搜索关键字“删除”。注意，搜索范围是CurrentDocument,而不是整个解决方案。然后你可以定位到刚才我们在DataGrid中添加的哪个删除按钮。

把下面代码添加到“删除”按钮中。

Command="{Binding ShowInfoCommand, Mode=OneWay,

Source={StaticResource MyCommand}}" CommandParameter="{Binding Mode=OneWay}"

添加后的效果如下图所示

点击F5运行程序，恭喜各位，大功告成！

背后的故事：

本章中涉及的知识较多，如果你是一个美工或者设计人员。可能会感觉只是照着做出来了，但很多原理都不懂。下面我简单对一些关键点做讲解。

在MyCommand类中，我们定义了一个名为ShowInfoCommand。因为他是一个“指令”，所以我们可以将它与任何控件的点击事件进行捆绑。本章中就将它捆绑到了“删除”按钮上。在ShowInfo(object selectedItem)方法中，我们通过强制转换selectedItem，得到了当前选中行的内容。本例中因为使用的示例数据源，所以用的是Expression.Blend.SampleData.SampleDataSource.Item类型。在实际项目中，你需要将它换位DataGrid数据源的实际类型。

如何将MyCommand与Xaml中的Button绑定？

第一步在Xaml中定义关于MyCommand的引用。代码是：xmlns:local="clr-namespace:Lession7" ，注意"Lession7"是项目命名空间名。

第二步在UserControl.Resource标签中声明一个xaml可以引用的对象。代码是<local:MyCommand x:Key="MyCommand" d:IsDataSource="false"/>

“d:IsDataSource="false"“标识我们声明的不是一个数据源。这个信息主要是给Blend用的，不是必须的。

第三步就是在“删除”按钮中写的那段代码了，将Button的Command属性与我们声明的MyCommadn绑定。

项目源码下载地址http://files.cnblogs.com/kaodigua/Lession7.rar

博客我会坚持写，只是更新时间不一定。有空了我一定会连续更新。希望大家一直支持我。如果你喜欢我的文章，请点一下文章右下角的“推荐”，谢谢。

本文链接

博客园_欢迎来到【烤地瓜】的地瓜村

欢迎来上海兰亭序喝茶

【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)

MSDN论坛桌面小工具试用体验

写给新人《身价翻倍的最短路径算法》-我爱加班，你们也要爱加班！

《博客园临时导航使用指南》-烤地瓜著

博客园的易用性太差了，我要代表月亮消灭你们!! 如此经典的反面教材，每一个程序员都应该来看看!!

【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条

【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动

【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮

【全面解禁!真正的Expression Blend实战开发技巧】十一章全面解析布局(Grid & Canvas &StackPanel &Wrappanel)