win10 uwp 如何使用DataTemplate 转换绑定Event到Command绑定 ObservableCollectionDataTemplate 绑定 ViewM

这是数据模板,一般用在数组的绑定,显示数组中的元素。 假如我们有一个列表,列表里是书,包括书名、作者、还有出版,那么我们只有源信息,如何把它显示到我们的ListView,就需要DataTemplate。 使用很简单,我们可以定义在资源,也可以定义在ItemTemplate。 数据模板有绑定的问题。 我们使用Binding和WPF其实没有多少不同,在Mode只有OneWay,OneTime,TwoWay。我们使用的x:bind在DataTemplate才和原来有一些不同。 我们使用x:bind需要我们对我们数据的类型,这个在前没有,我开始不知,弄了好久,最后才知道,还有一个,UWP默认是OneTime,也就是绑定只有一次。

我们假如我们的类型是放在Model,我们需要在开始,就是页面写我们类的命名空间

转换

有时候我们绑定的类型和显示不同,例如我们绑定了一个bool?但是我们在 ViewModel 的类型是 bool,那么我们就需要用转换器。转换器就是继承 IValueConverter 的一个类。

UWP的 Convert 和 WPF 差不多。

数据转换一个简单方法是另外在 ViewModel 写一个属性,这个属性用于转换变量,然后在前台绑定,但是这样做不好,于是我们比较好的一个做法是做转换器,转换器是一个类,我们需要实现它才能使用,在我们常用的做法是把它写staticResource

首先是创建一个类,这个类继承IValueConverter,于是就有两个方法,我们要实现两个方法,一个是从数据源转换到 xaml ,一个是反过来。

 public object Convert(object value, Type targetType,
            object parameter,
            string language);

 public object ConvertBack(object value, 
            Type targetType, 
            object parameter, string language);

一般我们实现第一个就好,最简单的实现是直接转换。假如我们是需要把bool?转bool,那么一个简单方法是:

        public object Convert(object value, Type targetType,
            object parameter,
            string language)
        {
            if (value is bool?)
            {
                bool? temp = value as bool?;
                if (temp == true)
                {
                    return true;
                }
                return false;
            }
            return false;
        }

在我的变大数字颜色按钮 代码在 https://github.com/lindexi/UWP/tree/master/uwp/control/RountGradualFigure 有用到转换,是把数字转颜色

我们要使用写的转换器,就需要在 xaml 写静态资源,我们也可以把他放在 viewModel,但是我们先说下放在 xaml 的。

在资源,如果是 Page 的 xaml,那么就写在Page.Resources,如果只是这个转换器用在一个Grid,就写在Grid,我先用Page做例子。当然写为 FrameworkElement.Resources 就几乎在所有控件都可以使用。

    <Page.Resources>

    </Page.Resources>

我的转换器名称是:ConvertBooleanNull

假如我们放在 Model 里,命名空间是 项目.Model,我们需要先在 xmlns 写xmlns:view="using:项目.Model",view 就是一个变量,这个可以改为你需要的。于是在需要使用的地方就可以使用 view 表示所在空间。

然后在静态资源使用下面代码<view:ConvertBooleanNull x:Key="ConvertBooleanNull"> </view:ConvertBooleanNull>

所有的代码请看下面

    <Page.Resources>
        <view:ConvertBooleanNull x:Key="ConvertBooleanNull">   </view:ConvertBooleanNull>
    </Page.Resources>

在需要使用的控件,假如我们控件绑定是x:bind,那么在Converter需要Converter={StaticResource ConvertBooleanNull}

假如我们控件绑定的是 ViewModel 的 JiuYouImageShack,需要进行转换,就可以写

 <TextBox Text="{x:Bind View.JiuYouImageShack,Mode=OneWay,Converter={StaticResource ConvertBooleanNull}}"></TextBox>

需要知道,x:bind默认是 OneTime 而 Binding 默认是 OneWay

参见:http://www.cnblogs.com/horan/archive/2012/02/27/2368262.html

[UWP]了解IValueConverter - dino.c - 博客园

绑定Event到Command

如果希望绑定事件,可以使用 下面代码

<ListView>
    <Interactivity:Interaction.Behaviors>
         <Core:EventTriggerBehavior EventName="SelectionChanged">
                   <Core:InvokeCommandAction Command="{Binding ShowDialog}" CommandParameter="{Binding ElementName=lv,Path=SelectedItem,Converter={StaticResource converter}}"/>
         </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</ListView>

绑定 ObservableCollection

如果绑定的 ItemSource 是一般的 List ,那么在 List 内容改变无法看到,界面修改

需要修改 List 内容,修改页面,添加一个新的 item 可以在页面添加一个 项,不是在初始的时候进行修改,可以使用方法:

  1. 在修改之后 使用 listView.Itemsource=list 的方法,重新给 Itemsource ,这是不推荐的,因为之后可能在代码写很多添加或移除,于是都需要写这个。
  2. 绑定的 List 改 ObservableCollection ,这样就可以在绑定内容修改时修改 界面。

第二个是推荐的,在使用 列表,经常使用的是 ObservableCollection ,注意,他是一个泛型,必须添加类型。

但是有时候可能关心他是如何做的,关心的原因:没有实现 AddRange,也就是 ObservableCollection 对一次添加多个项比较难,需要一个一个来。

对于定义控件,可能也需要,如何绑定一个 List 可以知道已经修改。

其实 ObservableCollection 继承 INotifyCollectionChanged ,于是可以获得列表修改,一旦自己定义继承 INotifyCollectionChanged 列表,可以做到和 ObservableCollection 差不多的样子。

先把东西分来说:一个是如何定义一个和 ObservableCollection 差不多,可以绑定界面,修改就自动让界面修改。一个是如何定义控件,可以获得列表改变。

先说第一个,其中只需要定义的列表 INotifyCollectionChanged 就可以让界面跟着修改,如果自己写的没有修改,那么是自己写错了,看起来 INotifyCollectionChanged 实现不是很简单。

第二个,可以使用依赖属性,在获得值判断 e.NewValue 是 INotifyCollectionChanged ,获得 CollectionChanged 的添加新项就可以。

参见:win10 uwp 通知列表

DataTemplate 绑定 ViewModel

假如有一个 ViewModel 他有一个列表和字段

   public List<string> Foo { set; get; } = new List<string>() { "1" };

    public string Name { get; set; } = "lindex";

那么在页面写一个列表

<Grid x:Name="Grid">      

    <ListView ItemsSource="{Binding Foo}">
        <ListView.ItemTemplate>
            <DataTemplate >
                <TextBlock Text="{Binding}"></TextBlock>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

可以看到页面显示一个元素,但是如何想让 TextBlock 绑定 Name 怎么做?

因为 Grid 的数据绑定 ViewModel,所以在 WPF 可以使用 Binding RelativeSource={RelativeSource AncestorType={x:Type Grid} 的写法绑定到指定的元素,所以获得数据,但是 UWP 不能这样写,可以使用下面的代码

  <ListView ItemsSource="{Binding Foo}">
        <ListView.ItemTemplate>
            <DataTemplate >
                <TextBlock Text="{Binding ElementName=Grid,Path=DataContext.Name}"></TextBlock>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

这样就可以绑定 ViewModel ,所以就可以使用属性

https://stackoverflow.com/a/47957417/6116637


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Silverlight:Dependency Property(依赖属性)学习笔记

学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念。 http://www.wpftutorial.n...

21170
来自专栏macOS 开发学习

Swift 日常使用Tip

Swift中的Struct都有个系统提供默认的包含所有成员遍量的init方法,如果我们添加自定义的init方法时,系统默认提供的就会消失,如果需要既可以保留系统...

9630
来自专栏大内老A

一句代码实现批量数据绑定[下篇]

《上篇》主要介绍如何通过DataBinder实现批量的数据绑定,以及如何解决常见的数据绑定问题,比如数据的格式化。接下来,我们主要来谈谈DataBinder的设...

24450
来自专栏熊二哥

快速入门系列--MVC--06视图

到了View的呈现板块,感觉ASP.NET MVC的学习也进入了尾声,还是比较开心的,毕竟也有了不小收获。这部分内容相对比较简单,因为之前还专门学习过如何结合...

208100
来自专栏大内老A

Model验证系统运行机制是如何实现的?

在前面三篇文章(《ModelValidator》、《ModelValidatorProvider》和《ModelValidatorProviders》)中我们详...

200100
来自专栏与神兽党一起成长

怎么在elementary OS中使用中文输入法

能找到官网或官网论坛的帖子,那么就是解决问题的一半了。刚好我也搜到了这个帖子, http://elementary.io/answers/how-to-type...

49610
来自专栏代码世界

Django form表单

Form介绍   之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需...

37850
来自专栏JavaEE

thumbnails图像处理库的使用前言:thumbnails的使用:

55330
来自专栏Play & Scala 技术分享

PlayScala实战 - 如何优雅地取出多层Future中的结果?

33250
来自专栏我的小碗汤

一个神秘现象引发对beego框架的思考

小强最近在项目中遇到了一个很奇怪的问题:在整改日志规范时,为了避免影响现有的代码结构以及改动尽可能小的前提下,在调用记日志的SDK处将某一个字段值首字母改为大写...

8840

扫码关注云+社区

领取腾讯云代金券