必须要会的技能(一) 如何实现设计时Binding
今天我们来分享一个主题:DesignTime Binding设计时绑定。
这一项技术可以使用在所有包括WPF及其衍生出来的技术上,比如Sliverlight,当然也包括UWP
先来说明一下设计时Binding的重要性,如果没有设计时Binding那么每一次改动都需要运行才可查看,还有就是写一个DateTemplate为了看到效果,每次都运行显然不能接受的。
好好好,现在我们就进入正题。
首先呢我们来创建一个UWP工程(不要求一定是UWP),然后创建一个Models的文件夹再向其中添加一个Music类
Music类代码如下
public class Music { public string Id { get; set; } public string Titile { get; set; } public string MusicUrl { get; set; } public string BackgroundUrl { get; set; } public string AlbumUrl { get; set; } public string Reader { get; set; } public string Author { get; set; } }
注意这里属性是public的,否则无法Binding成功
然后我们向工程中添加一个ViewModels文件夹,然后向其中添加一个MainPageViewModel类
MainPageViewModel类代码如下
public class MainPageViewModel { public List<Music> MusicList { get; set; } = new List<Music>(); public MainPageViewModel() { LoadDesignTimeData(); } /// <summary> /// 添加设计时数据 /// </summary> private void LoadDesignTimeData() { Music m1 = new Music(); m1.Id = "; m1.AlbumUrl = "Assets/DesignTime/1.jpg"; m1.Titile = "你若懂我,该有多好"; m1.Reader = "冰夏"; Music m2 = new Music(); m2.AlbumUrl = "Assets/DesignTime/2.jpg"; m2.Titile = "让我们面对现实忠于理想"; m2.Reader = "楚霄"; Music m3 = new Music(); m3.AlbumUrl = "Assets/DesignTime/3.jpg"; m3.Titile = "我是你流浪过的一个地方"; m3.Reader = "纱朵"; MusicList.Add(m1); MusicList.Add(m2); MusicList.Add(m3); } }
现在我们需要在工程中的Asset 文件夹中添加DesignTime文件夹,然后添加三张图片
注意:然后我们先生成一下解决方案
然后打开MainPage的前台页面
先添加一条ViewModel的命名空间
xmlns:vm="using:DesignTimeBinding.ViewModels"
然后在添加一个设计时的DataContext
d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True, Type=vm:MainPageViewModel}"
注意如果刚才没有先生成解决方案的话,在写上面那两步的时候是没有提示的。
现在我们来为MainPage添加一些代码
<ListView ItemsSource="{Binding MusicList}"> <ListView.ItemTemplate> <DataTemplate> <Grid Height="50" Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition Width="60"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border Width="50" CornerRadius="4"> <Border.Background> <ImageBrush ImageSource="{Binding AlbumUrl}"/> </Border.Background> </Border> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding Titile}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Reader}"></TextBlock> </Grid> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
生成一下解决方案就会看到如下效果
着过这个时候修改DataTemplate都会实时呈现在XAML设计器中
一个简单的设计时绑定就算完成了。
但是现在会发现ViewModel还有一些问题就是如何在运行时不加载设计时的数据,这个时候就需要做一个判断。
现在就需要知道如何判断当前环境为运行时,现在我能想到的有三个解决方案。有更好的请一定要回复我( ̄_ ̄ ) 先谢过了
1.使用全集变量,在App启动时设置为false,默认为true。
2.使用微软的API
3.MVVM Light
好的先来看一下第一种的实现方法
先在App的后台文件中添加一个属性
public static bool IsInDesignTime { get; set; } = true;
然后在OnLaunched方法中置为false
此时我们修改ViewModel的构造函数
public MainPageViewModel() { if (App.IsInDesignTime) LoadDesignTimeData(); else { // 运行时加载真实数据 } }
然后我看一下第二种方案,微软提供的API
代码如下
public MainPageViewModel() { if (DesignMode.DesignModeEnabled) LoadDesignTimeData(); else { // 运行时加载真实数据 } }
需要注意的是DesignMode.DesignModeEnabled只是UWP上的,Windows Phone 8.0并不一样。所推荐使用第一种,具体的请参见下表
UWP, Windows Store App | DesignMode.DesignModeEnabled |
Sliverlight, Windows Phone | DesignerProperties.IsInDesignTool |
关于第三种方式MVVM Light
属性是ViewModelBase.IsInDesignModeStatic
实现方式应该是封装了微软的API,具体我也不清楚。当然我们也可以编写自己的ViewModelBase
最后再来看一下XAML设计器的强大功能。
刚才的演示中我们把资源文件放到了本地,其实完全可以使用远程的资源。为了手懒我们先安装一个Json.NET的包
然后在MainPageViewModel类中加入这个函数,并调用
private void LoadFromJson() { #region DataSource string dataSource = @"{ 'Data': [ { 'Id': '1035', 'Title': '写给岁月的感谢信', 'Reader': '阡语陌路', 'Author': '六六', 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/d481c88b-ee32-4b16-8fbb-8b8e6113255a.jpg', 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/c61536c0-345b-4129-860d-58d642e2de79.jpg' }, { 'Id': '1034', 'Title': '几米·星空', 'Reader': '纱朵', 'Author': '几米', 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/0e614225-d1ab-4c75-9d8c-3e99a4c72004.jpg', 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/725696cb-5feb-491d-85d8-5b76d014b9e2.jpg' }, { 'Id': '1033', 'Title': '女人是男人品味的终极体现', 'Reader': '阿雯', 'Author': '佚名', 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/9ae9a987-6406-4e19-acd0-28e2d2a8b6ef.jpg', 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/5595d565-5932-47f4-980b-d309e32a4621.jpg' } ], 'Count': 3 } "; #endregion JObject json = JObject.Parse(dataSource); foreach (var item in json["Data"]) { var m = new Music() { Id = item["Id"].ToString(), Titile = item["Title"].ToString(), BackgroundUrl = item["BackgroundUrl"].ToString(), AlbumUrl = item["CoverUrl"].ToString(), Author = item["Author"].ToString(), Reader = item["Reader"].ToString() }; MusicList.Add(m); } }
生成解决方案然后会发现
XAML设计器成功的从远程服务器上获取到了资源!!!
当然了至于到底选用哪一种,还要看各位的选择。
好滴,关于设计时Binding就聊到这里。
如果讲的有什么不足的地方请给我回复!
必须要会的技能(一) 如何实现设计时Binding的更多相关文章
- XJOI 3601 技能(贪心+二分)
题目描述: 有一个oier,他有n个算法技能,每个技能有一个水平值,每个技能的水平上限都是A,设这个oier有cnt个技能达到了A, 设所有水平值的最小值为mi,那么这个oier的战斗力为cnt×Cf ...
- 《月之猎人 (Moon Hunters)》主角设计
原文链接 游戏开发人员,你们好! 我是 Kitfox Games 工作室的总监 Tanya,我们的工作室位于加拿大的蒙特利尔,拥有六名员工. 我们 3 月份发布了<月之猎人>游戏的桌面版, ...
- Adobe Dreamweaver代码编辑
Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...
- 《Web全栈工程师的自我修养》读书笔记(转载)
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...
- 高质量C++/C编程指南(林锐)
推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐 2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐 20 ...
- JavaSE自学笔记
ch03 [Thu Aug 18 2016 11:22:26 GMT+0800] 对象变量与对象之间是指代关系,对象变量并不能完全说明有无对象可用.这种指代关系是通过赋值运算建立起来的.对象变量保存的 ...
- JAVA CDI 学习(4) - @Alternative/@Default/@Any & Extension
前面几节学习到的CDI内容,基本上都是hard-code,以硬编码的方式在代码里指定注入类型,这并非依赖注入的本意,依赖注入的优势之一在于“解耦”,这一节我们将学习如何利用配置来动态注入的类型及属性初 ...
- 《程序设计教学法--以Java程序设计为例》
<程序设计教学法--以Java程序设计为例> 当老师上的第一门课就是<Java程序设计>,工作以来,断断续续上了近十次课了吧.十几年来,教材.课程内容.教学方法.教学手段不断改 ...
- 高质量C++[转]
高质量C++/C编程指南 文件状态 [ ] 草稿文件 [√] 正式文件 [ ] 更改正式文件 文件标识: 当前版本: 1.0 作 者: 林锐 博士 完成日期: 2001年7月24日 版 本 ...
随机推荐
- 使用For XML PATH 会影响Cross Apply 返回
昨天在写语句的时候,遇到了一个现象,其实就是使用 Cross Apply做一个拼接字符串的而已.比如 CREATE TABLE GoodsCatalog (ID INT, Name )) CREATE ...
- 使用 jsoup 解析HTML
// 参考资料: // http://www.jb51.net/article/43485.htm @Test public void AnalysisHTMLByString() { String ...
- Ezchip Tilera Tile-Mx100: Der 100-ARM-Netzwerkprozessor
Ezchip Tilera Tile-Mx100: Der 100-ARM-Netzwerkprozessor ARM-Kerne statt VLIW-Einheiten: Tileras neue ...
- iTOP-4412嵌入式开发板ioremap控制GPIO寄存器
转自迅为电子技术论坛:http://bbs.topeetboard.com GPIO 的寄存器通过 ioremap函数转换之后,可以通过直接控制虚拟地址来控制物理地址(寄存器的实际地址),这样就实现 ...
- Nagios check_logfiles插件的使用记录
1 获取与安装 https://labs.consol.de/assets/downloads/nagios/check_logfiles-3.7.4.tar.gz 链接可能会失效,建议去官网下载. ...
- Java开发之文件上传
文件上传有SmartUpload.Apache的Commons fileupload.我们今天介绍Commons fileupload的用法. 1.commons-fileupload-1.3.1.j ...
- 小机房的树 codevs 2370
2370 小机房的树 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 小机房有棵焕狗种的树 ...
- [USACO1.1]坏掉的项链Broken Necklace
题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 n=29 的二个例子: 第一和第二个珠子在图片中已经被作记号. 图片 A ...
- matrix-tree
学一发matrix-tree 原来bzoj1016这题是暴搜+玄学并查集过的-数据弱怪我咯 首先matrix-tree需要度数矩阵D,就是说当i=j时D[i][j]为i的度数,否则为0. 还有邻接矩阵 ...
- MySQL导入sql脚本错误:2006 - MySQL server has gone away
到如一些小脚本很少报错,但最近导入一个10+M的SQL脚本,却重复报错: Error occured at:2014-03-24 11:42:24 Line no.:85 Error Code: 20 ...