今天我们来分享一个主题: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. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  2. mongodb的备份

    转载请附原文链接:http://www.cnblogs.com/wingsless/p/5672057.html mongodb现在为止还是没有像XtraBackup这样好用的备份工具,因此一般来说会 ...

  3. IO系统性能之一:衡量性能的几个指标

    作为一个数据库管理员,关注系统的性能是日常最重要的工作之一,而在所关注的各方面的性能只能IO性能却是最令人头痛的一块,面对着各种生涩的参数和令人眼花缭乱的新奇的术语,再加上存储厂商的忽悠,总是让我们有 ...

  4. linux学习之路——ubuntu 16.04 开机开启数字小键盘解决方法

    第一步:安装numlockx,输入命令 sudo apt-get install numlockx 第二步:用 vim 打开 rc.local 文件,输入命令 sudo vim /etc/rc.loc ...

  5. nginx日志切割脚本

    #!/bin/bash ip=`ifconfig eth0 | grep "inet addr" | cut -f 2 -d ":" | cut -f 1 -d ...

  6. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  7. java怎么建立JAVA工程项目?

    File->New->Java Project;src->New->Class; 出现packet,运行出错的问题 然后如果不要包packet 的话,不要在此处填写包的名称就行 ...

  8. mybatis 插入数据时返回主键

    在使用MyBatis做持久层时,insert语句默认是不返回记录的主键值,而是返回插入的记录条数:显然,假如主键是你生成后插入的,自然你已经有主键了,显然不需要我们再去获得,所以我们这里处理的是当主键 ...

  9. 虚拟机centos6.5 --hadoop2.6集群环境搭建

    一.环境说明 虚拟机:virtualBox 系统:centos6.5,64位 集群:3个节点 master 192.168.12.232 slave01 192.168.12.233 slave02 ...

  10. python反弹tty shell

    linux环境下进行内外渗透需要反弹shell连接内网ssh,Telnet等,就需要tty层的shell了.python代码转过来的,备用. #!/usr/bin/python import sys ...