Windows Phone实用教程：利用Blend为程序添加设计时数据

【前言】

 

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