必须要会的技能(一) 如何实现设计时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日 版 本 ...
随机推荐
- BootStrap入门教程 (一)
BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...
- mongodb的备份
转载请附原文链接:http://www.cnblogs.com/wingsless/p/5672057.html mongodb现在为止还是没有像XtraBackup这样好用的备份工具,因此一般来说会 ...
- IO系统性能之一:衡量性能的几个指标
作为一个数据库管理员,关注系统的性能是日常最重要的工作之一,而在所关注的各方面的性能只能IO性能却是最令人头痛的一块,面对着各种生涩的参数和令人眼花缭乱的新奇的术语,再加上存储厂商的忽悠,总是让我们有 ...
- linux学习之路——ubuntu 16.04 开机开启数字小键盘解决方法
第一步:安装numlockx,输入命令 sudo apt-get install numlockx 第二步:用 vim 打开 rc.local 文件,输入命令 sudo vim /etc/rc.loc ...
- nginx日志切割脚本
#!/bin/bash ip=`ifconfig eth0 | grep "inet addr" | cut -f 2 -d ":" | cut -f 1 -d ...
- JQuery入门——进度条
越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...
- java怎么建立JAVA工程项目?
File->New->Java Project;src->New->Class; 出现packet,运行出错的问题 然后如果不要包packet 的话,不要在此处填写包的名称就行 ...
- mybatis 插入数据时返回主键
在使用MyBatis做持久层时,insert语句默认是不返回记录的主键值,而是返回插入的记录条数:显然,假如主键是你生成后插入的,自然你已经有主键了,显然不需要我们再去获得,所以我们这里处理的是当主键 ...
- 虚拟机centos6.5 --hadoop2.6集群环境搭建
一.环境说明 虚拟机:virtualBox 系统:centos6.5,64位 集群:3个节点 master 192.168.12.232 slave01 192.168.12.233 slave02 ...
- python反弹tty shell
linux环境下进行内外渗透需要反弹shell连接内网ssh,Telnet等,就需要tty层的shell了.python代码转过来的,备用. #!/usr/bin/python import sys ...