【前言】
Blend自誕生那一天起就伴隨這開發者如此的評價:
有VS還用Blend干啥,直接碼代碼就好了。
Blend會生成一堆垃圾無用代碼,很不爽。
對於這類我只會在心里評價,當你並不真正了解一樣事物的情況下,就給這個東西扣帽子,實在很不公平。
作為程序員首先要明白時間的寶貴和效率的重要性,更應了解各種效能工具,Blend便是其中一個,如果你仍然覺得學怎么用Blend純粹是浪費時間,
那么恭喜你,后面的文章可以忽略了:-)
【本文講述的內容】
使用blend為程序添加設計時的數據。
【本文適用的場景】
很多應用由於本身的性質決定了,其數據來源是遠端網絡,因此調整UI時非常不方便,多數情況調UI的過程是:
1、調整UI布局
2、運行程序
3、等待數據加載
4、數據加載完畢后看是否還有UI問題,如果有則goto 1
如此效率非常的低,本文介紹的方法可以將流程調整為:
1、添加設計時數據源
2、調整UI布局
3、調整UI布局
4、調整UI布局
省去聯機調試,提高效率。
【正文】
一、實現思路
Blend本身提供了SampleData功能,此功能可以根據Model的定義自動生成一個SampleData文件,又提供了d:DataContext 和d:DesignData來指定設計時的DataContext。二者結合便可以實現前面說到的效果。
二、具體步驟
1、我們首先創建程序的Model和主頁面的MainpageViewModel
Model:
ViewModel:
接下來打開blend找到Data選項卡,點擊右方第一個按鈕
這里看到三個選項,我們選擇第三個,根據類來創建Sample Data:
接下來選擇MainpageViewModel:
之后我們觀察工程目錄,會看到如下新添加的信息:多出了一個Xaml文件。
打開看一看,可以看到自動生成了如下數據,包括VM中定義的Title以及ModelList列表,並且自動為列表加入了隨機的數據
看到這里可能讀者會有一個疑問,SampleData會不會增大程序的包呢?
如果存在這個疑問說明你是個細心的讀者,考慮很周全,那么我們看下這個SampleData文件的屬性:
可以清楚的看到Build Action是DesignData Do not copy。也就是鎖這個文件不會被打包的程序的安裝包中。
最后一步:
在page中指定d:DataContext按下面的格式寫:
在頁面內容中加個簡單的列表,定義簡單的模版:
最后我們Build一下。再看VS的編輯器里面Sample數據就顯示出來了
【更多功能】
我們甚至可以在Blend的Data選項卡下,每個屬性最右面的按鈕中選擇數據的格式,如下圖:
SampleData文件中的數據便會根據選擇的格式重新生成對應的數據了。:-)
【總結】
以上辦法非常簡單,並且十分遍歷,極大的提高了開發效率,因此推薦給大家,如有任何疑問歡迎加入
WP交流群:182659848