必须要会的技能(一) 如何实现设计时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日 版 本 ...
随机推荐
- 【转】MySQL 数据库存储引擎
原文地址:http://blog.jobbole.com/94385/ 简单介绍 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MySQl的特点,而且是一个插入 ...
- 烂泥:学习ssh之ssh无密码登陆
本文由秀依林枫提供友情赞助,首发于烂泥行天下 最近一个月没有写过文章,主要是刚刚换的新工作.新公司服务器OS使用的是ubuntu server版,和以前熟悉的centos还是有很多不同的. 刚好这几天 ...
- 正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?
解答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”这个问题,也为了能够便于大家对正则表达式有一个更为综合和深刻的认识,我将一些关键点和容易犯糊涂的地方再系统总结 ...
- 删除myeclipse下svn用户名和密码
在不同的操作系统下,操作基本类似. 以win7为例 1.进入c:/Users/[你的用户名]/AppData/Roaming/Subversion/auth目录,删除该目录下的所有文件: 2.重启ec ...
- AngularJS 拦截器
在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...
- java 知识点随记
JAVA 读取配置文件: Properties props= new Properties();//文件在src目录下,编译会被加载到classpath下. Props.load(Test.class ...
- 在Solr中配置和使用ansj分词
在上一节[编译Ansj之Solr插件]中介绍如何编译ansj分词在solr(lucene)环境中使用的接口,本章将介绍如何在solr中使用ansj,其步骤主要包括:下载或者编译ansj和nlp-lan ...
- java编程思想读书笔记2
六:访问权限控制 1.java中的4种访问制权限: (1).public:最大访问控制权限,对所有的类都可见. (2).protect:同一包可见,不在同一个包的所有子类也可见. (3).defaul ...
- 网络之TCP/IP四层模型
应用层(应用层.表示层.会话层):FTP.Telnet.DNS.SMTP 传输层(传输层):TCP<传输控制协议> . UDP<用户数据报文协议> 网际互连层(网络层):IP. ...
- 64位win7硬盘安装64位ubuntu 13.04
最近本来是准备通过升级的方式把ubuntu从12.04升级到12.10再升级到13.04的,但是升级到12.10之后,可能是因为某一步的操作不当,出现无法进入系统的情况.不过还好的是升级之前保存了主要 ...