wp8使用mvvm模式简单例子(二)---登陆功能,事件触发
首先,还是需要一个Model类来为UI层的元素提供数据源
public class LoginModel:DependencyObject
{ public string Uid
{
get { return (string)GetValue(UidProperty); }
set { SetValue(UidProperty, value); }
} // Using a DependencyProperty as the backing store for Uid. This enables animation, styling, binding, etc...
public static readonly DependencyProperty UidProperty =
DependencyProperty.Register("Uid", typeof(string), typeof(LoginModel), null); public string Pwd
{
get { return (string)GetValue(PwdProperty); }
set { SetValue(PwdProperty, value); }
} // Using a DependencyProperty as the backing store for Pwd. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PwdProperty =
DependencyProperty.Register("Pwd", typeof(string), typeof(LoginModel),null ); public ICommand LoginCmd
{
get
{
return new LoginCommand();
}
}
}
和一个继承ICommand接口的类LoginCommand
<pre name="code" class="csharp">public class LoginCommand:ICommand
{
public bool CanExecute(object parameter)
{
return true;
} public void Execute(object parameter)
{
LoginModel login = (LoginModel) parameter;
if (login.Uid == "admin" && login.Pwd == "111")
{
MessageBox.Show("ok");
}
else
{
MessageBox.Show("error");
}
} public event EventHandler CanExecuteChanged;
}
然后为前台的UI元素绑定数据源:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="14,10,10,-10" Grid.ColumnSpan="2" DataContext="{StaticResource loginModel}">
<TextBox Name="txtUid" Text="{Binding Uid,Mode=TwoWay}" HorizontalAlignment="Left" Height="72" Margin="115,35,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="224"/>
<TextBox Name="txtPwd" Text="{Binding Pwd,Mode=TwoWay}" HorizontalAlignment="Left" Height="72" Margin="115,138,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="224"/>
<TextBlock Text="账号:" HorizontalAlignment="Left" Margin="28,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.146,-0.259"/>
<TextBlock Text="密码:" HorizontalAlignment="Left" Margin="28,163,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.146,-0.259"/>
<Button Content="登陆" Command="{Binding LoginCmd}" CommandParameter="{Binding}" HorizontalAlignment="Left" Margin="28,246,0,0" VerticalAlignment="Top"/>
</Grid>
这样看起来似乎没有任何问题
启动调试,点击按钮进行判断,完美运行
但是肯定是有地方不对劲
那到底是哪里的问题?
仔细想想mvvm的原则
在xaml.cs后台不直接操作UI元素
Model提供数据源
UI元素绑定数据源
LoginCommand的Execute方法进行业务逻辑处理
其实在前面的Execute方法的业务处理代码中已经违反了mvvm的规定
public void Execute(object parameter)
{
LoginModel login = (LoginModel) parameter;
if (login.Uid == "admin" && login.Pwd == "111")
{
MessageBox.Show("ok");
}
else
{
MessageBox.Show("error");
}
}
这里只能写逻辑处理的代码
不能有控制UI的部分
上面这么写就相当于asp.net的三层中在Bll层突然来了个Response.Redirect一样
这很明显是不允许的!
那么要如何修改呢?
首先
既然对MessageBox明确了不能出现在这里
那么只能在xaml.cs后台文件中进行处理了
那么后台又不能包含有任务业务处理的代码
他怎么才能知道什么时候要Show一下信息,然后Show什么信息呢?
这就要用到一个事件机制了
先定义一个委托
public delegate void LoginResult(bool success);
然后在LoginModel中定义一个事件
public event LoginResult LoginCompelete;
在后台页面加载的事件中对该事件添加方法
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
LoginModel model = (LoginModel)this.Resources["loginModel"];
model.LoginCompelete += new LoginResult(model_LoginCompelete);
} void model_LoginCompelete(bool success)
{
if (success)
{
MessageBox.Show("ok!");
}
else
{
MessageBox.Show("error!");
}
}
而这时,LoginCommand的Execute方法就需要进行修改了
既然在页面加载的时候 就已经为LoginModel的LoginCompelete事件添加完了显示MessageBox的方法
那么在Execute中需要做的事情就只是 判断用户的账号密码
然后根据结果触发这个事件就ok了
但是因为事件本质是一个私有的委托+add和remove两个属性
所以该事件只能在内部被触发
所以在LoginModel中需要提供一个方法,让外界能够通过该方法触发LoginCompelete事件
public void FirLoginCompelete(bool success)
{
if (LoginCompelete != null)
{
LoginCompelete(success);
}
}
之后就可以再Execute方法中方便的触发事件了
public void Execute(object parameter)
{
LoginModel login = (LoginModel) parameter;
if (login.Uid == "admin" && login.Pwd == "111")
{
login.FirLoginCompelete(true);
}
else
{
login.FirLoginCompelete(false);
}
}
修改完成!
wp8使用mvvm模式简单例子(二)---登陆功能,事件触发的更多相关文章
- wp8使用mvvm模式简单例子
mvvm是silverlight/wpf下的mvc升华 通过一个简单的加法计算器例子来说明mvvm是什么 在设计界面完成设计之后,显示简单的布局,如下图: 然后来比较,传统的直接方式,mvc和mvvm ...
- WPF中在MVVM模式下,后台绑定ListCollectionView事件触发问题
问题:WPF中MVVM模式下 ListView绑定ListCollectionView时,CurrentChanged无法触发 解决方案: 初期方案:利用ListView的SelectionChang ...
- Xamarin.Android和UWP之MVVM的简单使用(二)
0x01 前言 前面一篇,Xamarin.Android和UWP之MVVM的简单使用(一),主要讲了MvvmLight的简单使用 这篇主要讲讲MvvmCross的简单使用,例子的话,还是和上篇的一样. ...
- MVC模式和MVVM模式简单理解
相信这是两个耳熟能详的词了,MVC广泛的用到了java的各种框架当中,比如Struts2, SpringMVC等,作为B/S架构开发,MVS模式也是我们必须掌握的. mvc一步一步演化之后有了现在的M ...
- 简单例子了解View的事件分发
什么是事件分发 我们在写自定义ViewGroup或者自定义View的时候经常要处理用户的点击事件,如果我们的View在最底层,他在很多ViewGroup里面,我们如何让我们的点击事件准确传递到View ...
- epoll水平/边缘触发模式下阻塞/非阻塞EPOLLOUT事件触发条件及次数
在IO多路复用技术中,epoll默认的事件触发模式为Level_triggered(水平触发)模式,即当被监控的文件描述符上有可读/写事件发生时,epoll_wait()会通知处理程序去读写.如果这次 ...
- [原][osg][QT]osg与QT界面结合的简单例子二
//main.cpp #include "VREObliqueEditorQTWindow.h" #include <QtWidgets/QApplication> # ...
- WPF WebBrowser+TabControl MVVM模式 简单应用 提供源码下载
源代码下载 这个程序是TabControl和Webbrowser的练手小程序 可达到练手目的有: MVVM设计模式的基本使用 Binding(包括相对源[RelativeSource]绑定)的基本使用 ...
- WPF Prism框架下基于MVVM模式的命令、绑定、事件
Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...
随机推荐
- 淀粉质模板 Tree
Tree 题目描述 给你一棵TREE,以及这棵树上边的距离.问有多少对点它们两者间的距离小于等于K 输入输出格式 输入格式: N(n<=40000) 接下来n-1行边描述管道,按照题目中写的输入 ...
- 为基于busybox根文件系统的ARM嵌入式Linux交叉编译dropbear使能SSH
原创作品,允许转载,转载时请务必以超链接形式标明文章.作者信息和本声明,否则将追究法律责任. 最近使用busybox为基于ARM的板卡定制了一个极简单的根文件系统,由于busybox仅支持telnet ...
- vue1和vue2获取dom元素的方法
vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box' v-el: myBox>你好</ ...
- AE中实现Control中的各种图形工具的方法
添加命名空间 using ESRI.ArcGIS.SystemUI;using ESRI.ArcGIS.Controls; A类:前面有Controls 后面有tool的工具都可以用同一类的代码实现( ...
- git的回退和撤销操作
回退是git的使用中很常用的一个操作,如果清楚各个回退命令的作用,不仅大大加快代码回退的效率,还能避免代码回退造成的事故 1.git reset --hard [commit] 清空暂存和未暂存的更改 ...
- Android消息推送解决方案
前言 消息推送在Android开发中应用的场景是越来越多了,比如说电商产品进行活动宣传.资讯类产品进行新闻推送等等,如下图: 推送消息截图 本文将介绍Android中实现消息推送的7种主流解决方案 目 ...
- c# tcplistener 与 client通信 服务端 今天写一下
using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...
- MVC学习__修改工程端口号
有时候,我们会希望修改工程默认生成的端口号,方法如下:
- BestCoder 2nd Anniversary的前两题
Oracle Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Su ...
- Android 中带有进度条效果的按钮(Button)
安卓中带有进度条效果的按钮,如下图: 1.布局文件如下activity_main.xml <RelativeLayout xmlns:android="http://schemas.a ...