今天我们来分享一个主题:DesignTime Binding设计时绑定。

这一项技术可以使用在所有包括WPF及其衍生出来的技术上,比如Sliverlight,当然也包括UWP

先来说明一下设计时Binding的重要性,如果没有设计时Binding那么每一次改动都需要运行才可查看,还有就是写一个DateTemplate为了看到效果,每次都运行显然不能接受的。

好好好,现在我们就进入正题。

首先呢我们来创建一个UWP工程(不要求一定是UWP),然后创建一个Models的文件夹再向其中添加一个Music类

Music类代码如下

  1. public class Music
  2. {
  3. public string Id { get; set; }
  4.  
  5. public string Titile { get; set; }
  6.  
  7. public string MusicUrl { get; set; }
  8.  
  9. public string BackgroundUrl { get; set; }
  10.  
  11. public string AlbumUrl { get; set; }
  12.  
  13. public string Reader { get; set; }
  14.  
  15. public string Author { get; set; }
  16. }

注意这里属性是public的,否则无法Binding成功

然后我们向工程中添加一个ViewModels文件夹,然后向其中添加一个MainPageViewModel类

MainPageViewModel类代码如下

  1. public class MainPageViewModel
  2. {
  3. public List<Music> MusicList { get; set; } = new List<Music>();
  4.  
  5. public MainPageViewModel()
  6. {
  7. LoadDesignTimeData();
  8. }
  9.  
  10. /// <summary>
  11. /// 添加设计时数据
  12. /// </summary>
  13. private void LoadDesignTimeData()
  14. {
  15. Music m1 = new Music();
  16. m1.Id = ";
  17. m1.AlbumUrl = "Assets/DesignTime/1.jpg";
  18. m1.Titile = "你若懂我,该有多好";
  19. m1.Reader = "冰夏";
  20. Music m2 = new Music();
  21. m2.AlbumUrl = "Assets/DesignTime/2.jpg";
  22. m2.Titile = "让我们面对现实忠于理想";
  23. m2.Reader = "楚霄";
  24. Music m3 = new Music();
  25. m3.AlbumUrl = "Assets/DesignTime/3.jpg";
  26. m3.Titile = "我是你流浪过的一个地方";
  27. m3.Reader = "纱朵";
  28.  
  29. MusicList.Add(m1);
  30. MusicList.Add(m2);
  31. MusicList.Add(m3);
  32. }
  33. }

现在我们需要在工程中的Asset 文件夹中添加DesignTime文件夹,然后添加三张图片

注意:然后我们先生成一下解决方案

然后打开MainPage的前台页面

先添加一条ViewModel的命名空间

  1. xmlns:vm="using:DesignTimeBinding.ViewModels"

然后在添加一个设计时的DataContext

  1. d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True, Type=vm:MainPageViewModel}"

注意如果刚才没有先生成解决方案的话,在写上面那两步的时候是没有提示的。

现在我们来为MainPage添加一些代码

  1. <ListView ItemsSource="{Binding MusicList}">
  2. <ListView.ItemTemplate>
  3. <DataTemplate>
  4. <Grid Height="50" Margin="5">
  5. <Grid.ColumnDefinitions>
  6. <ColumnDefinition Width="60"/>
  7. <ColumnDefinition Width="*"/>
  8. </Grid.ColumnDefinitions>
  9.  
  10. <Border Width="50" CornerRadius="4">
  11. <Border.Background>
  12. <ImageBrush ImageSource="{Binding AlbumUrl}"/>
  13. </Border.Background>
  14. </Border>
  15.  
  16. <Grid Grid.Column="1">
  17. <Grid.RowDefinitions>
  18. <RowDefinition Height="*"/>
  19. <RowDefinition Height="*"/>
  20. </Grid.RowDefinitions>
  21.  
  22. <TextBlock Grid.Row="0" Text="{Binding Titile}"></TextBlock>
  23. <TextBlock Grid.Row="1" Text="{Binding Reader}"></TextBlock>
  24. </Grid>
  25. </Grid>
  26. </DataTemplate>
  27. </ListView.ItemTemplate>
  28. </ListView>

生成一下解决方案就会看到如下效果

着过这个时候修改DataTemplate都会实时呈现在XAML设计器中

一个简单的设计时绑定就算完成了。

但是现在会发现ViewModel还有一些问题就是如何在运行时不加载设计时的数据,这个时候就需要做一个判断。

现在就需要知道如何判断当前环境为运行时,现在我能想到的有三个解决方案。有更好的请一定要回复我( ̄_ ̄ ) 先谢过了

  1.使用全集变量,在App启动时设置为false,默认为true。

  2.使用微软的API

  3.MVVM Light

好的先来看一下第一种的实现方法

先在App的后台文件中添加一个属性

  1. public static bool IsInDesignTime { get; set; } = true;

然后在OnLaunched方法中置为false

此时我们修改ViewModel的构造函数

  1. public MainPageViewModel()
  2. {
  3. if (App.IsInDesignTime)
  4. LoadDesignTimeData();
  5. else
  6. {
  7. // 运行时加载真实数据
  8. }
  9. }

然后我看一下第二种方案,微软提供的API

代码如下

  1. public MainPageViewModel()
  2. {
  3. if (DesignMode.DesignModeEnabled)
  4. LoadDesignTimeData();
  5. else
  6. {
  7. // 运行时加载真实数据
  8. }
  9. }

需要注意的是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类中加入这个函数,并调用

  1. private void LoadFromJson()
  2. {
  3. #region DataSource
  4. string dataSource = @"{
  5. 'Data': [
  6. {
  7. 'Id': '1035',
  8. 'Title': '写给岁月的感谢信',
  9. 'Reader': '阡语陌路',
  10. 'Author': '六六',
  11. 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/d481c88b-ee32-4b16-8fbb-8b8e6113255a.jpg',
  12. 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/c61536c0-345b-4129-860d-58d642e2de79.jpg'
  13. },
  14. {
  15. 'Id': '1034',
  16. 'Title': '几米·星空',
  17. 'Reader': '纱朵',
  18. 'Author': '几米',
  19. 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/0e614225-d1ab-4c75-9d8c-3e99a4c72004.jpg',
  20. 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/725696cb-5feb-491d-85d8-5b76d014b9e2.jpg'
  21. },
  22. {
  23. 'Id': '1033',
  24. 'Title': '女人是男人品味的终极体现',
  25. 'Reader': '阿雯',
  26. 'Author': '佚名',
  27. 'BackgroundUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/9ae9a987-6406-4e19-acd0-28e2d2a8b6ef.jpg',
  28. 'CoverUrl': 'http://cdn.cdut.zhuimeng.me/Voice/Music/5595d565-5932-47f4-980b-d309e32a4621.jpg'
  29. }
  30. ],
  31. 'Count': 3
  32. }
  33. ";
  34. #endregion
  35.  
  36. JObject json = JObject.Parse(dataSource);
  37.  
  38. foreach (var item in json["Data"])
  39. {
  40. var m = new Music()
  41. {
  42. Id = item["Id"].ToString(),
  43. Titile = item["Title"].ToString(),
  44. BackgroundUrl = item["BackgroundUrl"].ToString(),
  45. AlbumUrl = item["CoverUrl"].ToString(),
  46. Author = item["Author"].ToString(),
  47. Reader = item["Reader"].ToString()
  48. };
  49. MusicList.Add(m);
  50. }
  51. }

生成解决方案然后会发现

XAML设计器成功的从远程服务器上获取到了资源!!!

当然了至于到底选用哪一种,还要看各位的选择。

好滴,关于设计时Binding就聊到这里。

如果讲的有什么不足的地方请给我回复!

必须要会的技能(一) 如何实现设计时Binding的更多相关文章

  1. XJOI 3601 技能(贪心+二分)

    题目描述: 有一个oier,他有n个算法技能,每个技能有一个水平值,每个技能的水平上限都是A,设这个oier有cnt个技能达到了A, 设所有水平值的最小值为mi,那么这个oier的战斗力为cnt×Cf ...

  2. 《月之猎人 (Moon Hunters)》主角设计

    原文链接 游戏开发人员,你们好! 我是 Kitfox Games 工作室的总监 Tanya,我们的工作室位于加拿大的蒙特利尔,拥有六名员工. 我们 3 月份发布了<月之猎人>游戏的桌面版, ...

  3. Adobe Dreamweaver代码编辑

    Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...

  4. 《Web全栈工程师的自我修养》读书笔记(转载)

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...

  5. 高质量C++/C编程指南(林锐)

    推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐   2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐   20 ...

  6. JavaSE自学笔记

    ch03 [Thu Aug 18 2016 11:22:26 GMT+0800] 对象变量与对象之间是指代关系,对象变量并不能完全说明有无对象可用.这种指代关系是通过赋值运算建立起来的.对象变量保存的 ...

  7. JAVA CDI 学习(4) - @Alternative/@Default/@Any & Extension

    前面几节学习到的CDI内容,基本上都是hard-code,以硬编码的方式在代码里指定注入类型,这并非依赖注入的本意,依赖注入的优势之一在于“解耦”,这一节我们将学习如何利用配置来动态注入的类型及属性初 ...

  8. 《程序设计教学法--以Java程序设计为例》

    <程序设计教学法--以Java程序设计为例> 当老师上的第一门课就是<Java程序设计>,工作以来,断断续续上了近十次课了吧.十几年来,教材.课程内容.教学方法.教学手段不断改 ...

  9. 高质量C++[转]

    高质量C++/C编程指南 文件状态 [  ] 草稿文件 [√] 正式文件 [  ] 更改正式文件 文件标识: 当前版本: 1.0 作    者: 林锐 博士 完成日期: 2001年7月24日 版 本  ...

随机推荐

  1. 【转】MySQL 数据库存储引擎

    原文地址:http://blog.jobbole.com/94385/ 简单介绍 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MySQl的特点,而且是一个插入 ...

  2. 烂泥:学习ssh之ssh无密码登陆

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 最近一个月没有写过文章,主要是刚刚换的新工作.新公司服务器OS使用的是ubuntu server版,和以前熟悉的centos还是有很多不同的. 刚好这几天 ...

  3. 正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?

    解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统总结 ...

  4. 删除myeclipse下svn用户名和密码

    在不同的操作系统下,操作基本类似. 以win7为例 1.进入c:/Users/[你的用户名]/AppData/Roaming/Subversion/auth目录,删除该目录下的所有文件: 2.重启ec ...

  5. AngularJS 拦截器

    在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...

  6. java 知识点随记

    JAVA 读取配置文件: Properties props= new Properties();//文件在src目录下,编译会被加载到classpath下. Props.load(Test.class ...

  7. 在Solr中配置和使用ansj分词

    在上一节[编译Ansj之Solr插件]中介绍如何编译ansj分词在solr(lucene)环境中使用的接口,本章将介绍如何在solr中使用ansj,其步骤主要包括:下载或者编译ansj和nlp-lan ...

  8. java编程思想读书笔记2

    六:访问权限控制 1.java中的4种访问制权限: (1).public:最大访问控制权限,对所有的类都可见. (2).protect:同一包可见,不在同一个包的所有子类也可见. (3).defaul ...

  9. 网络之TCP/IP四层模型

    应用层(应用层.表示层.会话层):FTP.Telnet.DNS.SMTP 传输层(传输层):TCP<传输控制协议> . UDP<用户数据报文协议> 网际互连层(网络层):IP. ...

  10. 64位win7硬盘安装64位ubuntu 13.04

    最近本来是准备通过升级的方式把ubuntu从12.04升级到12.10再升级到13.04的,但是升级到12.10之后,可能是因为某一步的操作不当,出现无法进入系统的情况.不过还好的是升级之前保存了主要 ...