美文网首页
uwp开发:数据绑定——值转换器 的简单使用

uwp开发:数据绑定——值转换器 的简单使用

作者: 搬砖的包工头 | 来源:发表于2019-01-21 13:46 被阅读0次

今天,我在做最近正在开发的“简影”uwp应用时遇到一个问题,其中有个栏目,叫做“画报”,是分组显示一组一组的 图片,每组图片在界面上只显示9个,点击去以后显示该组的所有图片。

其中,Model 如下: 画报类,其中有个属性是图片类集合。

在View界面,通过ListView嵌套绑定GridView

如下:

但是,要求是每项只能显示9张图片,而集合内的数据不止9张,如果这样直接绑定到GridView上,那么会将ImagList里面的所以图片都显示出来,那么,要想每项都显示9张。这时候,该怎么办呢?如果之前没有接触过值转换器,那么想到的肯定是改变Model里面的属性,因为属性是绑定在GridView上的,通过访问器来限制属性,这样做也可以,但是这样就会有一个问题,会对原数据造成影响。那么怎样才能不改变属性的情况下,让界面上得到想要的结果呢?此时,就需要用值转换器了。

定义一个转换类:实现IValueConverter接口,这样,就实现了一个值转换类。在Convert方法里,对我们需要改变的集合作限制,让它只显示前9个。

然后,在View层定义:

并引入转换类的命名空间,然后我们通过绑定的Convert属性来绑定转换类。这样,就完成了在界面上每组只显示9张图片,并且不改变属性的效果。

如果有问题,欢迎大家加入uwp开发交流学习群:193148992 。

相关文章

  • uwp开发:数据绑定——值转换器 的简单使用

    今天,我在做最近正在开发的“简影”uwp应用时遇到一个问题,其中有个栏目,叫做“画报”,是分组显示一组一组的 图片...

  • 数据绑定

    数据绑定 UWP 每个绑定均由一个绑定目标和一个绑定源构成。 通常,绑定目标是控件或其他 UI 元素的属性,而绑定...

  • Angular 数据绑定

    Angular 数据绑定 数据绑定 {{productTitlt}}! 使用插值表达式将一个表达式的值显示在模版上...

  • Vue入门指南(2)

    数据绑定 1.插入值 文本数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双花括号): Must...

  • 微信小程序的数据绑定

    数据绑定 WXML中的动态数据均来自对应Page的data。 简单绑定 数据绑定使用"Mustache"语法(双大...

  • 开始吧

    了解如何使您的开发环境随时可以使用数据绑定库,包括支持Android Studio中的数据绑定代码。 数据绑定库提...

  • 小程序框架 ——视图层

    数据绑定 WXML中的动态数据均来自对应Page的data 简单的绑定 数据绑定使用Mustache语法(双大括号...

  • spring-mvc-5-RestFul CRUD

    处理静态资源 SpringMVC数据绑定流程 数据转换 自定义类型转换器 自定义转换器实例 新建Controlle...

  • vue语法指令

    vue简单构建 Vue.js 模板语法 1、插值,数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插...

  • Ionic ng-model 数据双向绑定

    ionic 使用AngularJS ng-model 实现数据双向绑定 AngularJS 实例 绑定输入框的值到...

网友评论

      本文标题:uwp开发:数据绑定——值转换器 的简单使用

      本文链接:https://www.haomeiwen.com/subject/yxrcjqtx.html