【問題的提出】
在開發過程中我們經常會遇到將UI同學提供的效果圖轉化成實際的頁面，而在這過程中，多數時候Blend等設計工具默認情況下並不能提供很好的可視化支持。
舉個簡單的例子來說下吧：
很簡單的一個頁面，里面longlistSelector Binding到了ViewModel的DataList上面DataList的定義如下：
非常簡單的邏輯，那么我們在設計ItemTemplete的時候我們的設計器是如何顯示的呢？
沒有看錯，多數情況下我們的頁面除了標題以外都是漆黑一篇（這個例子里面連標題都沒有=。=），因為此時並沒有數據的加載（真實情況DataList的數據可能來自服務器）
下面我們的關鍵來了
【整點酷的！】
如何能讓設計器設計的時候有Demo數據顯示呢？
先看代碼隨后來解釋：
我們在構造函數中做了一個判斷，判斷了下IsInDesignTool屬性，這個屬性的作用是個啥呢？可能你已經想到了（相信你沒有=。=）
我們需要從根本說起：
考慮一個問題，Blend或者VS的可視化設計器里面為什么會顯示出來UI呢？
答案是，Blend或者VS的可視化設計器會跑我們的代碼，然后來顯示出來，當我們Build之后，設計器會進入頁面的構造函數，調用InitializeComponent();方法來將UI渲染然后呈現給我們。
回到主題，上面IsInDesignTool屬性就是來標識當前這段代碼的執行者是否為設計器（這個屬性在運行時始終為False）
如此我們這個ViewModel的意思就很明顯了，當設計器跑這段代碼的時候，我們就偽造一組數據給它。
下面一個問題就來了，ViewModel在運行時被設置到Page上面，那設計器又如何才能跑到ViewModel的構造函數中呢？
我們添加如下代碼到Xaml中：
注意d:DataContext屬性，他的作用就是告訴設計器：LayoutRoot在設計器執行代碼的時候DataContext是MainPageViewModel，這個ViewModel應該在設計時創建。
如此我們的障眼法就成功了，設計器跑起來代碼之后，傻乎乎的去創建MainPageViewModel，在構造的時候又傻乎乎的拿到了一組假數據=。=
於是就出現了下面的顯示效果：
Bingo!
上面這個技巧對於開發人員可以帶來效率上的飛升，至少我發現了這一點之后，省了很多布局時間，:-)
如需要詳細Demo工程歡迎留言，或者加入
QQ群：182659848