Windows Phone 提高開發效率（一）使用d:DataContext添加設計時Binding

【問題的提出】

 

在開發過程當中咱們常常會遇到將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