How to bind data on textchanged event using WPF and MVVM techniques?

Question

0.00/5 (No votes)

See more:

hello sir,
i have 5 textbox ....
4 for entering input value and 5th one for storing result.
i used textchange event and those event i implemented in view(.cs file)..
but i want to implement same in view_model file...
how to to do the same using wpf and mvvm technique..

What I have tried:

<UserControl x:Class="task2.Views.calc"
             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:task2.Views"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>

        </Grid.RowDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="100"></ColumnDefinition>
                <ColumnDefinition  Width="150"></ColumnDefinition>
                <ColumnDefinition  Width="100"></ColumnDefinition>
                <ColumnDefinition  Width="150"></ColumnDefinition>

            </Grid.ColumnDefinitions>
            <Label x:Name="lblItem" Content="Materials" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top"></Label>
            <Label x:Name="lblPrice" Content="Price" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top"></Label>


            <Label x:Name="lblOil" Content="Oil" Grid.Row="1" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtOil" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" TextChanged="txt1_TextChanged"  >
            </TextBox>

            <Label x:Name="lblRice" Content="Rice" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtRice" Grid.Row="2" Grid.Column="1" VerticalAlignment="Top" TextChanged="txt2_TextChanged">
            </TextBox>

            <Label x:Name="lblCoconut" Content="Cocunut" Grid.Row="3" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtCoconut" Grid.Row="3" Grid.Column="1" VerticalAlignment="Top" TextChanged="txt3_TextChanged" >
            </TextBox>

            <Label x:Name="lblDal" Content="Dal" Grid.Row="4" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtDal" Grid.Row="4" Grid.Column="1" VerticalAlignment="Top" TextChanged="txt4_TextChanged">
            </TextBox>

            <Label x:Name="lblTotal" Content="Total" Grid.Row="5" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtTotal" Grid.Row="5" Grid.Column="1" VerticalAlignment="Top" >
            </TextBox>

            <Label x:Name="lbltax" Content="Tax" Grid.Row="6" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txttax" Grid.Row="6" Grid.Column="1" VerticalAlignment="Top" >
            </TextBox>

            <Label x:Name="lblvat" Content="gst" Grid.Row="7" Grid.Column="0" VerticalAlignment="Top"></Label>
            <TextBox x:Name="txtvat" Grid.Row="7" Grid.Column="1" VerticalAlignment="Top" >
            </TextBox>
        </Grid>
        <!--<Button x:Name="btnUpdate" Width="100" Height="20" HorizontalAlignment="Center" Grid.Row="1" Content="Update"
                Command="{Binding Path=UpdateCommand}" ></Button>
        <ListView x:Name="lstPerson" Grid.Row="2" ItemsSource="{Binding Persons}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Materials" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Price" Width="200" DisplayMemberBinding="{Binding Address}"/>
                </GridView>
            </ListView.View>
        </ListView>-->

    </Grid>
</UserControl>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace task2.Views
{
    /// <summary>
    /// Interaction logic for calc.xaml
    /// 
    public partial class calc : UserControl
    {
        public calc()
        {
            InitializeComponent();
        }

        protected void txt1_TextChanged(object sender, EventArgs e)
        {
            if ((!string.IsNullOrEmpty(txtOil.Text)) && (!string.IsNullOrEmpty(txtRice.Text)) && (!string.IsNullOrEmpty(txtCoconut.Text)) && (!string.IsNullOrEmpty(txtDal.Text)))
            {
                txtTotal.Text = (Convert.ToInt32(txtOil.Text) + Convert.ToInt32(txtRice.Text) + Convert.ToInt32(txtCoconut.Text) + Convert.ToInt32(txtDal.Text)).ToString();
            }
            CalculateTax();
        }
        protected void txt2_TextChanged(object sender, EventArgs e)
        {
            if ((!string.IsNullOrEmpty(txtOil.Text)) && (!string.IsNullOrEmpty(txtRice.Text)&& (!string.IsNullOrEmpty(txtCoconut.Text))&& (!string.IsNullOrEmpty(txtDal.Text))))
            {
                txtTotal.Text = (Convert.ToInt32(txtOil.Text) + Convert.ToInt32(txtRice.Text) + Convert.ToInt32(txtCoconut.Text) + Convert.ToInt32(txtDal.Text)).ToString();
            }
            CalculateTax();
        }
        protected void txt3_TextChanged(object sender, EventArgs e)
        {
            if ((!string.IsNullOrEmpty(txtOil.Text)) && (!string.IsNullOrEmpty(txtRice.Text)) && (!string.IsNullOrEmpty(txtCoconut.Text)) && (!string.IsNullOrEmpty(txtDal.Text)))
            {
                txtTotal.Text = (Convert.ToInt32(txtOil.Text) + Convert.ToInt32(txtRice.Text) + Convert.ToInt32(txtCoconut.Text) + Convert.ToInt32(txtDal.Text)).ToString();
            }
            CalculateTax();
        }
        protected void txt4_TextChanged(object sender, EventArgs e)
        {
            if ((!string.IsNullOrEmpty(txtOil.Text)) && (!string.IsNullOrEmpty(txtRice.Text)) && (!string.IsNullOrEmpty(txtCoconut.Text)) && (!string.IsNullOrEmpty(txtDal.Text)))
            {
                txtTotal.Text = (Convert.ToInt32(txtOil.Text) + Convert.ToInt32(txtRice.Text) + Convert.ToInt32(txtCoconut.Text) + Convert.ToInt32(txtDal.Text)).ToString();
            }
            CalculateTax();
        }

        public void CalculateTax()
        {
            if ((!string.IsNullOrEmpty(txtTotal.Text)))
                {
                int Amount = Convert.ToInt32(txtTotal.Text);
                txtvat.Text = (((Amount * 12) / 100) + Amount).ToString();

                if (Amount > 2000)
                {
                    txttax.Text = "20";
                }
                else if (Amount > 1000)
                {
                    txttax.Text = "10";
                }
                else
                {
                    txttax.Text = "5";
                }
            }
        }

        public bool IsValid()
        {
            int Amount = Convert.ToInt32(txtTotal.Text);
            if (Amount == 0)
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }
}

Posted 18-Aug-17 2:37am

Member 12938297

Updated 4-Oct-21 2:09am

Graeme_Grant

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2017-08-18T03:13:00

Here is an example of how...

XML

<Window x:Class="WpfCalc.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfCalc"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <local:CalcViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="100"/>
            <ColumnDefinition  Width="150"/>
            <ColumnDefinition  Width="100"/>
            <ColumnDefinition  Width="150"/>

        </Grid.ColumnDefinitions>
        <Label x:Name="lblItem" Content="Materials" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top"></Label>
        <Label x:Name="lblPrice" Content="Price" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top"></Label>


        <Label x:Name="lblOil" Content="Oil" Grid.Row="1" Grid.Column="0" VerticalAlignment="Top"></Label>
        <TextBox x:Name="txtOil" Grid.Row="1" Grid.Column="1" VerticalAlignment="Top"
                    Text="{Binding Oil, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

        <Label x:Name="lblRice" Content="Rice" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top"></Label>
        <TextBox x:Name="txtRice" Grid.Row="2" Grid.Column="1" VerticalAlignment="Top"
                    Text="{Binding Rice, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

        <Label x:Name="lblCoconut" Content="Cocunut" Grid.Row="3" Grid.Column="0" VerticalAlignment="Top"></Label>
        <TextBox x:Name="txtCoconut" Grid.Row="3" Grid.Column="1" VerticalAlignment="Top" 
                    Text="{Binding Coconut, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

    </Grid>

</Window>

and the ViewModel:

C#

using System.ComponentModel;

namespace WpfCalc
{
    public class CalcViewModel : INotifyPropertyChanged
    {
        public CalcViewModel()
        {
            Oil = 123.456F;
            Rice = 222.222F;
            Coconut = 333.333F;
        }

        private float oil;
        public float Oil
        {
            get { return oil; }
            set
            {
                if (oil != value)
                {
                    oil = value;
                    NotifyPropertyChanged(nameof(Oil));

                }
            }
        }

        private float rice;
        public float Rice
        {
            get { return rice; }
            set
            {
                if (rice != value)
                {
                    rice = value;
                    NotifyPropertyChanged(nameof(Rice));

                }
            }
        }

        private float coconut;
        public float Coconut
        {
            get { return coconut; }
            set
            {
                if (coconut != value)
                {
                    coconut = value;
                    NotifyPropertyChanged(nameof(Coconut));

                }
            }
        }

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
    }
}

Also, check out MVVM Light Toolkit - Nuget[^]