前言

系列目录

C#使用Xamarin开发可移植移动应用目录

源码地址:https://github.com/l2999019/DemoApp

可以Star一下,随意 - -

说点什么..

嗯..前面3篇就是基础内容..后面就开始逐渐要加深了,进阶篇开始了.

今天的学习内容?

今天我们讲讲Xamarin中的MVVM双向绑定,嗯..需要有一定的MVVM基础.,具体什么是MVVM - -,请百度,我就不多讲了

效果如下:

正文

1.简单的入门Demo

这个时间的功能很简单,就是一个时间的动态显示.

我们首先创建一个基础的页面如下:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoApp.MVVMDemo.ViewModel"
x:Class="DemoApp.MVVMDemo.MVVMPageDemo">
<ContentPage.Content> <StackLayout >
<Label Text="{Binding DateTime,StringFormat='{0:F}'}">
<Label.BindingContext>
<local:TimeViewModel></local:TimeViewModel>
</Label.BindingContext>
</Label> </StackLayout>
</ContentPage.Content>
</ContentPage>

大家可以发现,我们这次多了一些内容.

首先,我们会发现ContentPage的xmlns定义中多了一个local的定义.这个很重要,他是用来让我们在xaml中引用其他程序集中的类,类似于Using的作用.

剩下的BindingContext和Bingding关键字,后面我们慢慢讲

接下来,我们创建一个ViewModel的类如下:

  public class TimeViewModel : INotifyPropertyChanged
{
//定义一个时间类型
DateTime dateTime; //实现接口的事件属性
public event PropertyChangedEventHandler PropertyChanged; //创建构造函数,定义一个定时执行程序
public TimeViewModel()
{
this.DateTime = DateTime.Now; //定义定时执行程序,1秒刷新一下时间属性
Device.StartTimer(TimeSpan.FromSeconds(), () =>
{
this.DateTime = DateTime.Now;
return true;
});
} //定义时间属性,创建SetGet方法,在Set中使用PropertyChanged事件,来更新这个时间
public DateTime DateTime
{
set
{
if (dateTime != value)
{
dateTime = value; if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs("DateTime"));
}
}
}
get
{
return dateTime;
}
}
}

我们继承了INotifyPropertyChanged,从类名就可以看出来,这个是关于实现属性变更事件的一个接口.

他包含一个PropertyChanged,属性变更事件,我们需要在每个属性变更的时候(也就是Set中),调用它

在具体的开发过程中,如果你需要使用MVVM那么你所有的ViewModel都应该继承它.

很多解释我都写在了注释里面,请仔细看注释

然后我们回到Xaml中的BindingContext,它的作用就一目了然了,给这个Xaml控件,绑定一个上下文对象,也就是你定义的ViewModel,来方便你绑定其中的属性

<Label Text="{Binding DateTime,StringFormat='{0:F}'}"> 这句的意思就是,绑定其中的DateTime属性,并格式化显示.

我们在构造函数中启动的定时程序,就会一直更新DateTime,对应的,页面上也会一直随着变更.这样我们就实现了一个基础的MVVM

效果如图:

2.学会与控件相联系,并绑定命令事件

通过上面的小栗子,我们学习了一下基本的绑定关系和绑定方法.

那么下面就来一个比较复杂,比较难的例子.效果是这样的,如图:

我们创建三个数值,他们与控件Slider来绑定,并控制.更新值的同时,求和.得到NumSun的值.

在界面中,我们有一个清空的Button来清除这个ViewModel中的值.

首先,我们创建xaml代码如下:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:DemoApp.MVVMDemo.ViewModel"
x:Class="DemoApp.MVVMDemo.MVVMDemoPage2">
<ContentPage.BindingContext>
<local:AddNumViewModel></local:AddNumViewModel>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding NumSun,Mode=TwoWay,StringFormat='总数NumSun={0:F2}'}" />
<Label Text="{Binding Num1,
StringFormat='Num1 = {0:F2}'}" />
<Slider Value="{Binding Num1,Mode=TwoWay}" />
<Label Text="{Binding Num2,
StringFormat='Num2 = {0:F2}'}" />
<Slider Value="{Binding Num2,Mode=TwoWay}" />
<Label Text="{Binding Num3,
StringFormat='Num3 = {0:F2}'}" />
<Slider Value="{Binding Num3,Mode=TwoWay}" />
<Button Text="清空" Command="{Binding CleanCommand}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

然后创建我们的ViewModel代码如下:

    public class AddNumViewModel : INotifyPropertyChanged
{
//定义属性值
double num1, num2, num3,numSun;
public event PropertyChangedEventHandler PropertyChanged;
//定义清空的命令
public ICommand CleanCommand { protected set; get; } public AddNumViewModel()
{
//实现清空
this.CleanCommand = new Command((key) =>
{
this.NumSun = ;
this.Num1 = ;
this.Num2 = ;
this.Num3 = ;
}); } /// <summary>
/// 统一的属性变更事件判断方法
/// </summary>
/// <param name="propertyName"></param>
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
} public double Num1
{
set
{
if (num1 != value)
{
num1 = value;
OnPropertyChanged("Num1");
SetNewSunNum();
}
}
get
{
return num1;
}
} public double Num2
{
set
{
if (num2 != value)
{
num2 = value;
OnPropertyChanged("Num2");
SetNewSunNum();
}
}
get
{
return num2;
}
} public double Num3
{
set
{
if (num3 != value)
{
num3 = value;
OnPropertyChanged("Num3");
SetNewSunNum();
}
}
get
{
return num3;
}
} public double NumSun
{
set
{
if (numSun != value)
{
numSun = value;
OnPropertyChanged("NumSun"); }
}
get
{
return numSun;
}
} /// <summary>
/// 把数值加起来的方法(业务逻辑)
/// </summary>
void SetNewSunNum()
{
this.NumSun = this.Num1 + this.Num2 + this.Num3;
} }

很简单,我们创建了Num1,Num2,Num3和NumSun四个属性.实现了一个SetNewSunNum的方法,来求和.

然后就一一对应的在xaml中绑定了相关的属性.所有的Slider绑定中都有个Mode=TwoWay,意思就是,这个属性为双向绑定,在控件中变更它的同时,也会在ViewModel中变更.

然后我们在来看看清空按钮的命令绑定.

先解释一下,为什么会有命令绑定这个东西,因为我们使用双向绑定的时候,页面的点击事件,并不能直接调用到ViewModel,所以就衍生了一个叫命令绑定的东西.来和我们控件的各种事件相关联.

我们回到代码,会发现,在AddNumViewModel中,我们定义了一个继承自 ICommandCleanCommand 的命令,并在构造函数中实现了它

在我们的xaml中,buttom绑定了这个事件 <Button Text="清空" Command="{Binding CleanCommand}" />

这样,就可以直接调用到ViewModel了,当然你的命令也可以传递参数,如下:

<Button Text="清空" Command="{Binding CleanCommand}" CommandParameter="aaa" />

aaa就是你传递的参数.

接收也很简单,稍微改一下.CleanCommand 如下:

这个key就是你传递进来的参数了..

3.回顾一下.

今天主要学习了Xamarin中的MVVM双向绑定和命令绑定,

需要双向绑定的类,需要继承INotifyPropertyChanged,需要绑定的命令,需要继承:ICommand

最后,列一下可以使用命令绑定的控件.

  • Button

  • MenuItem

  • ToolbarItem

  • SearchBar

  • TextCell(所以也包含ImageCell

  • ListView

  • TapGestureRecognizer

除了SearchBar和 ListView这两个控件之外,这些控件都可以使用Command 和CommandParameter

嗯..,SearchBar定义SearchCommandSearchCommandParameter属性,而ListView定义一个RefreshCommand属性的类型ICommand

其实都是一样的..名字换了一下..

 

 
写在最后

嗯..没啥好说的..持续更新中..

C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码的更多相关文章

  1. C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面 ...

  2. C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 没啥好说的 ...

  3. 仿酷狗音乐播放器开发日志二十七 用ole为窗体增加文件拖动功能(附源码)

    转载请说明原出处,谢谢~~ 中秋到了,出去玩了几天.今天把仿酷狗程序做了收尾,已经开发完成了,下一篇博客把完结的情况说一下.在这篇博客里说一下使用OLE为窗体增加文件拖拽的功能.使用播放器,我更喜欢直 ...

  4. C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码

    前言 什么是Xamarin? Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单. Xamarin的产品简化了针对多种平台的应用开发,包括iOS.Android.Windows P ...

  5. C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 一点感想 很意外的,第一 ...

  6. C#使用Xamarin开发可移植移动应用目录

    Xamarin.Android系列 C#开发移动应用系列(1.环境搭建) C#开发移动应用系列(2.使用WebView搭建WebApp应用) C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知 ...

  7. C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET ...

  8. C#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件..很很很很重要..),附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本篇..基 ...

  9. C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本篇..基 ...

随机推荐

  1. 进程间通信之AIDL

    一.引言 AIDL是android内部进程通信接口的描述语言,是实现跨进程方法调用的一大利器,其中Binder和Messenger的实现机制都是AIDL. 二.使用下面结合示例说明其使用过程: 本次示 ...

  2. 使用ReflectionToStringBuilder实现toString方法

    使用ReflectionToStringBuilder实现toString方法 org.apache.commons.lang.builder.ReflectionToStringBuilder是co ...

  3. JavaSE中Collection集合框架学习笔记(2)——拒绝重复内容的Set和支持队列操作的Queue

    前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的 ...

  4. 随记之 -- diy相册

    最近一段时间楼下在整修房子,一到早晨6点多的时候,电钻声.敲打声齐鸣,实在是不能好好的睡个安稳觉 (┳_┳)... 这周六像往常一样,以为又要被惊醒了,所以早早的就醒了,谁知竟然出奇的安静,难道施工队 ...

  5. 【SpringMVC】静态资源访问的问题

    在项目中经常会用到一些静态的资源,而一般我们在配置SpringMVC时会让SpringMVC接管所有的请求(包括静态资源的访问), 那么我们怎样才能最简单的来配置静态资源的访问呢? 一,在web.xm ...

  6. (转)springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...

  7. 【Canvas】canva实例-星空、日出的效果

    一.描述 模仿星空后黎明到来,日出的场景 二.代码 <!DOCTYPE html> <html> <head> <title></title> ...

  8. HTML5 开发APP(MUI的一些特性)

    先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/  .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...

  9. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  10. C++ 之 Asio 库

    1  简介  Asio 是一个跨平台的 C++ 库,常用于网络编程.底层的 I/O 编程等 (low-level I/O),其结构框架如下: 2  使用 Asio 2.1  下载  Asio 可分为 ...