Hey guys,

today I'll try to teach you what the MVVM-Pattern is and how to use it. You should have some knowledge in C# and WPF.
In this tutorial I'll use Visual Studio 2010 Express for C# and some coffee (coffee->code->application)

################
1. What is MVVM?
2. Why use MVVM?
3. Creating the View
4. Creating the Model
5. Creating the ViewModel
6. Connect View and ViewModel
7. End
################

1. What is MVVM?
MVVM stands for Model View ViewModel and is a programming pattern which is recommended to use in WPF(Windows Presentation Foundation). It separates what the User sees(View), which data to use(Model) and where the logic behind our program is(ViewModel).

It's like your friend always tells you about his girlfriend, but you never saw her.
Friend = ViewModel
His GF = Model
You = View

You don't know if she exists, but you receive information about her from your friend, who you know exists.

2. Why use MVVM?
For some it seems to be an unnecessary long code and don't understand why it is good to use such pattern to program your application. But there are reason why these pattern exist:
-> easy to maintain
-> replace view without getting thousands of errors
-> easy to extend
-> etc...

3. Creating the View
Ok, now that we got covered why we want to use the MVVM-Pattern and what it is, we're going to code our first application with it!

Click file->New Project.. and select the WPF-Application, give it a name and press OK. You should see the Designer, which we won't touch, because we are cool programmers, we're going to use the XAML-Editor!(XAML is an XML-Based lanuage for the View of WPF-Applications)
It should something like this:
Code:
<Window x:Class="YOURPROJECTNAME.MainWindow"
        xmlns=".."
        xmlns:x="..."
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>
We're going to add a textbox to our application and replace the "grid"-Tag with a "stackpanel"-Tag, also we need something to communicate with our code, so we need to set a binding in the Text-Property of our Textbox.

Code:
<Window x:Class="YOURPROJECTNAME.MainWindow"
        xmlns=".."
        xmlns:x="..."
        Title="Tutorial" Height="66" Width="250" ResizeMode="NoResize">
    <StackPanel>
        <TextBox Text="{Binding Path=Text}" Height="25" />
    </StackPanel>
</Window>
Also I set the height to 25 and the Window Height to 66, so we can only see the Textbox in our application.

As you can see the Text-Property has some weird stuff in it. This "{Binding Path=Text}" is our Binding to the Property, which we'll create later on.

4. Creating the Model
Ok, now that we got our beautiful View, we need something to get our data from, thats why we'll create our Model right now!

For that right-click your project and add a new Class-File, call it what ever you like, but I'll call it Model.
You should get a file with an empy class in it
Code:
class Model
{
}
So, the Model will hold our data, for that we'll add a little property with an empy getter and setter, and an constructor which will fill the data.
Code:
 public class Model
    {
        //Property which holds the data
        public string HelloWorldText { get; set; }
     
        //Fill the property with data
        public Model()
        {
            HelloWorldText = "Hello World!";
        }

        //If we want to give our property a custom text
        public Model(string helloWorldText)
        {
            this.HelloWorldText = helloWorldText;
        }
    }
Now we got our Model, which contains a property, which is filled with "Hello World" if we have no overload in our constructor and filled with the text from the overload, if we got one.

5. Creating the ViewModel
Now you need to create a seconde class-file, and call it whatever you like, I'll call it ViewModel and add a string-Property to the ViewModel, which will be named after the binding we gave to our textbox when we created the View. Also we're going to create a variable with our Model, which will create an instance of the Model-Class as soon as we call the ViewModel-Class.

Code:
public class ViewModel
    {
        //Our Model Variable
        private static Model helloWorldModel;
         
        //Our constructor -> Called as soon as we call the Viewmodel-Class
        public ViewModel()
        {
            //Create an instance of our Model
            helloWorldModel = new Model();
        }
        
        //Our Property which is bound to the Textbox
        private string helloWorld = helloWorldModel.HelloWorld;
        public string HelloWorld
        {
            get { return helloWorld; }
            set { helloWorld = value; }
        }
    }
6. Connect View and ViewModel
The Model and the ViewModel already know each other, but the View doesn't even know that the ViewModel exists. To let the View know that the ViewModel exists we need to go into the MainWindow.cs and set the DataContext to our ViewModel in the constructor.

Code:
 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }

7. End
I hope you could learn something from my tutorial.
Please tell me where I can improve myself!

Greetings,
MagicalTheDev