MVVM code for a calculator in WPF - wpf

Question

I've written a code for a simple calculator in wpf .
My MainWindow.Xaml code is..
<Window x:Class="CalculatorNew.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ContextMenuClosing="Multi">
<TextBox x:Name="TextBox1" HorizontalAlignment="Left" Height="23" Margin="216,23,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.679,0.552"/>
<TextBox x:Name="TextBox2" HorizontalAlignment="Left" Height="23" Margin="216,76,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.679,0.552"/>
<TextBox x:Name="TextBox3" HorizontalAlignment="Left" Height="23" Margin="216,121,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.679,0.552"/>
<TextBlock HorizontalAlignment="Left" Margin="68,30,0,0" TextWrapping="Wrap" Text="First Number" VerticalAlignment="Top" RenderTransformOrigin="1.137,1.259" Height="16" Width="80"/>
<TextBlock HorizontalAlignment="Left" Margin="68,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="1.137,1.259" Height="16" Width="80" Text="Result"/>
<TextBlock HorizontalAlignment="Left" Margin="68,83,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="1.137,1.259" Height="16" Width="99" Text="Second Number"/>
<Button Content="+" HorizontalAlignment="Left" Margin="73,172,0,0" VerticalAlignment="Top" Width="75" Click="Add"/>
<Button Content="-" HorizontalAlignment="Left" Margin="179,172,0,0" VerticalAlignment="Top" Width="75" Click="Sub"/>
<Button Content="*" HorizontalAlignment="Left" Margin="286,172,0,0" VerticalAlignment="Top" Width="75" Click="Multi"/>
<Button Content="/" HorizontalAlignment="Left" Margin="392,172,0,0" VerticalAlignment="Top" Width="75" Click="Div"/>
</Grid>
My MainWindowdow.Xaml.cs code is..
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 CalculatorNew
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Add(object sender, RoutedEventArgs e)
{
TextBox3.Text = (System.Convert.ToDecimal(TextBox1.Text) + System.Convert.ToDecimal(TextBox2.Text)).ToString();
}
private void Sub(object sender, RoutedEventArgs e)
{
TextBox3.Text = (System.Convert.ToDecimal(TextBox1.Text) - System.Convert.ToDecimal(TextBox2.Text)).ToString();
}
private void Div(object sender, RoutedEventArgs e)
{
TextBox3.Text = (System.Convert.ToDecimal(TextBox1.Text) / System.Convert.ToDecimal(TextBox2.Text)).ToString();
}
private void Multi(object sender, RoutedEventArgs e)
{
TextBox3.Text = (System.Convert.ToDecimal(TextBox1.Text) * System.Convert.ToDecimal(TextBox2.Text)).ToString();
}
}
}
I am new to WPF and MVVM . So I am finding it a bit difficult to write it in the MVVM format .
Can someone tell me how to rewrite it in MVVM format so that I can use it as a reference for the future?

Answer 1

I think your question has a high chance of being closed because it doesn't demonstrate a minimum willingness to make an effort on your part. Please read a tutorial, there are plenty on the web, and try to understand the concepts first. You need at the very least to understand what a ViewModel is, and how the View relates to it (bindings).
You will probably not get working code that does exactly what you want on this site, I for one am much more interested in explaining how things work.
Anyway, in order to get what you want you need a class that acts as the ViewModel with properties that represent the concepts that you work with. You could have decimal properties that represent the operands and something that represents the operator, and commands that represent each button in the UI. Then you need bindings that link UI elements (textboxes, buttons) to the properties in the ViewModel, and you need to set an instance of the ViewModel as the DataContext of the container for the UI elements you're interested in (be it a Window, Grid or whatever). I think that pretty much sums it up...

Answer 2

You can use this example as a reference. https://code.google.com/p/wpf-mvvm-calculator/downloads/list