MVVM实现ViewModel获取View输入验证状态

由于Binding只把Convert成功的值送往Source,当目标中的值Convert失败时Source的值依然是旧值,所以ViewModel必须获取View的输入验证状态,以下是本人的实现。

当“+”号两边输入正确时,“Add”可用,当所有“+”号两边输入正确时,“Add All”可用。

通过Behavior添加Validation.ErrorEvent路由事件的事件处理器,在该事件处理器中把HasError状态写入自定义的附加属性,附加属性可以绑定。

Behavior派生类引用System.Windows.Interactivity.dll,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;

namespace Calculater
{
    public class NotifyErrorBehavior : Behavior<UIElement>
    {
        protected override void OnAttached()
        {
            base.OnAttached();

            this.AssociatedObject.AddHandler(Validation.ErrorEvent, new RoutedEventHandler(HasErrorChanged));
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            this.AssociatedObject.RemoveHandler(Validation.ErrorEvent, new RoutedEventHandler(HasErrorChanged));
        }

        private static void HasErrorChanged(object sender, RoutedEventArgs e)
        {
            DependencyObject d = e.OriginalSource as DependencyObject;
            HasErrorHelper.SetHasError(d, Validation.GetHasError(d));
        }
    }
}

附加属性代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

namespace Calculater
{
    public class HasErrorHelper
    {
        public static bool GetHasError(DependencyObject obj)
        {
            return (bool)obj.GetValue(HasErrorProperty);
        }

        public static void SetHasError(DependencyObject obj, bool value)
        {
            obj.SetValue(HasErrorProperty, value);
        }

        public static readonly DependencyProperty HasErrorProperty =
            DependencyProperty.RegisterAttached("HasError", typeof(bool), typeof(HasErrorHelper), new PropertyMetadata(false));
    }
}

View代码:

<UserControl x:Class="Calculater.ChildCalculater"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Calculater"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d"
             d:DesignHeight="80" d:DesignWidth="500">
    <i:Interaction.Behaviors>
        <local:NotifyErrorBehavior></local:NotifyErrorBehavior>
    </i:Interaction.Behaviors>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBox Margin="3" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" local:HasErrorHelper.HasError="{Binding Path=HasErrorX,Mode=OneWayToSource}">
            <Binding Path="X" NotifyOnValidationError="True" UpdateSourceTrigger="PropertyChanged" TargetNullValue="" />
        </TextBox>
        <Label Margin="3" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Column="1">+</Label>
        <TextBox Margin="3" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Column="2" local:HasErrorHelper.HasError="{Binding Path=HasErrorY,Mode=OneWayToSource}">
            <Binding Path="Y" NotifyOnValidationError="True" UpdateSourceTrigger="PropertyChanged" TargetNullValue="" />
        </TextBox>
        <Label Margin="3" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Column="3">=</Label>
        <TextBox Margin="3" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Grid.Column="4" IsReadOnly="True">
            <Binding Path="Sum" TargetNullValue="" />
        </TextBox>
        <Button Margin="3" Grid.Column="5" Padding="3" Command="{Binding CalculateCommand}">Add</Button>
        <Button Margin="3" Grid.Column="6" Padding="3" Command="{Binding ResetCommand}">Reset</Button>
    </Grid>
</UserControl>

ViewModel引用Microsoft.Practices.Prism.dll,代码如下:

using Microsoft.Practices.Prism.Commands;
using Microsoft.Practices.Prism.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Calculater
{
    class ChildCalculaterViewModel : NotificationObject
    {
        public ChildCalculaterViewModel()
        {
            this._calculateCommand = new DelegateCommand(this.Calculate, this.CanCalculate);
            this._resetCommand = new DelegateCommand(this.Reset);

            CalculaterCommand.CalculateAllCommand.RegisterCommand(this.CalculateCommand);
            CalculaterCommand.ResetAllCommand.RegisterCommand(this.ResetCommand);

        }

        private double? _x;

        public double? X
        {
            get { return _x; }
            set
            {
                if (_x != value)
                {
                    _x = value;
                    this.RaisePropertyChanged("X");
                    this.Sum = null;
                    this.CalculateCommand.RaiseCanExecuteChanged();
                }

            }
        }

        private double? _y;

        public double? Y
        {
            get { return _y; }
            set
            {
                if (_y != value)
                {
                    _y = value;
                    this.RaisePropertyChanged("Y");
                    this.Sum = null;
                    this.CalculateCommand.RaiseCanExecuteChanged();
                }

            }
        }

        private double? _sum;

        public double? Sum
        {
            get { return _sum; }
            set
            {
                if (_sum != value)
                {
                    _sum = value;
                    this.RaisePropertyChanged("Sum");
                }

            }
        }

        private bool _hasErrorX;

        public bool HasErrorX
        {
            get { return _hasErrorX; }
            set
            {
                if (_hasErrorX != value)
                {
                    _hasErrorX = value;
                    this.Sum = null;
                    this.CalculateCommand.RaiseCanExecuteChanged();
                }

            }
        }

        private bool _hasErrorY;

        public bool HasErrorY
        {
            get { return _hasErrorY; }
            set
            {
                if (_hasErrorY != value)
                {
                    _hasErrorY = value;
                    this.Sum = null;
                    this.CalculateCommand.RaiseCanExecuteChanged();
                }

            }
        }

        private DelegateCommand _calculateCommand;

        public DelegateCommand CalculateCommand
        {
            get { return _calculateCommand; }
        }

        private bool CanCalculate()
        {
            if (this.HasErrorX || this.HasErrorY || !this.X.HasValue || !this.Y.HasValue)
            {
                return false;
            }

            return true;
        }

        private void Calculate()
        {
            try
            {
                double x = this.X.Value;
                double y = this.Y.Value;

                this.Sum = x + y;
            }
            catch
            {
                return;
            }
        }

        private DelegateCommand _resetCommand;

        public DelegateCommand ResetCommand
        {
            get { return _resetCommand; }
        }

        private void Reset()
        {
            this.X = null;
            this.Y = null;
            this.Sum = null;
        }
    }
}

主窗体代码:

<Window x:Class="Calculater.Shell"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Calculater"
        xmlns:prism="http://www.codeplex.com/prism"
        Title="Calculater" Height="300" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <local:ChildCalculater></local:ChildCalculater>
        <local:ChildCalculater Grid.Row="1"></local:ChildCalculater>
        <local:ChildCalculater Grid.Row="2"></local:ChildCalculater>
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Margin="3" HorizontalAlignment="Right" Padding="3" Content="Add All" Command="{x:Static local:CalculaterCommand.CalculateAllCommand}"></Button>
            <Button Margin="3" HorizontalAlignment="Left" Padding="3" Grid.Column="1" Content="Reset All" Command="{x:Static local:CalculaterCommand.ResetAllCommand}"></Button>
        </Grid>
    </Grid>
</Window>
using Microsoft.Practices.Prism.Commands;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Calculater
{
    public static class CalculaterCommand
    {
        private static CompositeCommand _calculateAllCommand = new CompositeCommand();

        public static CompositeCommand CalculateAllCommand
        {
            get { return _calculateAllCommand; }
        }

        private static CompositeCommand _resetAllCommand = new CompositeCommand();

        public static CompositeCommand ResetAllCommand
        {
            get { return _resetAllCommand; }
        }

    }
}
时间: 2024-08-29 23:20:18

MVVM实现ViewModel获取View输入验证状态的相关文章

js架构设计模式——MVVM模式下,ViewModel和View,Model有什么区别

MVVM模式下,ViewModel和View,Model有什么区别 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就是展现出来的用户界面. 基本上,绝大多数软件所做的工作无非就是从数据存储中读出数据,展现到用户界面上,然后从用户界面接收输入,写入到数据存储里面去.所以,对于数据 存储(model)和界面(view)这两层,大家基本没什么异议.但是,如何把model展现到view上,以及如何把数据从view写入到m

MVVM模式下,ViewModel和View,Model有什么区别

摘自正美的5群 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就是展现出来的用户界面. 基本上,绝大多数软件所做的工作无非就是从数据存储中读出数据,展现到用户界面上,然后从用户界面接收输入,写入到数据存储里面去.所以,对于数据存储(model)和界面(view)这两层,大家基本没什么异议.但是,如何把model展现到view上,以及如何把数据从view写入到model里,不同的人有不同的意见. MVC派的看法是,

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数

[Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

本文将演示如何快速实现表单是输入验证. 首先确保在项目中已经安装了所需的第三方库. 点击[Podfile],查看安装配置文件. 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'SwiftValidator', :git => 'https://github.com/jpotts18/SwiftVali

SwiftUI - MVVM之ViewModel

SwiftUI - MVVM之ViewModel 什么是ViewModal ViewModal是View和数据的中间层.ViewModel是视图和数据之间的一层. ViewModel通常使用service objects来获取数据,对其进行格式化后向View提供格式化的数据. 苹果什么时候开始推动MVVM 当苹果将ObservableObject协议移至Combine框架时,苹果公司开始推广MVVM模式.让我们看一下ObservableObject协议,以了解发生了什么. /// A type

Android-------ListView列表中获取EditText输入的值

最近项目的购物车中用列表中包含了留言功能, 需要获取EditText输入的内容,当购买多件商品时,就有点棘手了. 经过查资料解决了这个功能,并写了一个案例: 效果图: 可以在商品数据用一个字段来管理留言数据,这样就可以方便的操作了. 代码: public class MainActivity extends AppCompatActivity { ListView listView; @Override protected void onCreate(Bundle savedInstanceSt

微信小程序—如何获取用户输入文本框的值

我们就拿简单常用的登录来举例子吧,先看最终效果图片 我不喜欢使用from表单提交,所以这里不采用表单提交的方式咯: 先看看html代码: login.wxml <view class="itemView">用户名: <input class="input" name="userName" placeholder="请输入用户名" bindinput ="userNameInput"/>

android——获取view的宽高

在activity生命周期方法:onCreate(),onStart(),onResume()中调用View.getWidth()和View.getHeight()方法获取View的高度是不可行的,因为此时布局没有加载是不可见状态. 还有当view的可见状态为:GONE,时获取的宽高也是0: 2. 解决办法: (1)直接测量: private void first() { int width = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSp

AngulairJS表单输入验证与mvc

AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$error    表单验证不通过的错误验证信息. 2.验证时,需给表单及需要验证的input设置name属性 给form和input设置name后,会将form表单信息,默认绑定到$scope作用域中.故,可以使用formName.inputname.$验证操作得到验证结果 例如:formName.