I have written a post where I did almost the same thing I’m going to do here, but I used DevExpress tools, now I’ll do it without DevExpress (it isn’t a freeware, so maybe not all people have it).

I re-write the basics of the other post and start after them.

Basics:

  • MVVM: the acronym stands for Model View ViewModel. It is a design patter for software development, not so far from the MVC (Model View Controller). The Model can refer to the Domain Model or the Data Access Layer if we work with a database. The View is the user’s interface and the View-Model contains all the Business Logic of the application.
  • WPF: the acronym stads for Windows Presentation Foundation. It is the succesor of the old WinForm and takes a lot of advantages. The building phase of WPF is quite different respect WinForm but it is a lot more powerful. Further, the graphics works with the graphics board of your pc, with less work for the CPU.

The main (and only, for now) difference with the previous post, where I used the DevExpress tools.

You have to use “something” for notify to the UI the updates of the binded data. In this case, you have a lot of possibilities: one of these is the class INotifyPropertyChanged.

Using the same sample of the other post, we write this class for our ViewMode:


using Microsoft.Win32;
using System;
using System.Data;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Input;

namespace myNameSpace
{
 class vmMain : INotifyPropertyChanged
     {
	    internal void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(prop)); }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private int p_op1 = 0;
        public int op1
		{
		    get { return p_op1; }
			set
			{
		        if (p_op1 != value)
                {
                    p_op1 = value;
                    RaisePropertyChanged("op1");
                }
			}
        }
        private int p_op1 = 0;
        public int op2
		{
		    get { return p_op2; }
			set
			{
		        if (p_op2 != value)
                {
                    p_op2 = value;
                    RaisePropertyChanged("op2");
                }
			}
        }
        private int p_sum = 0;
        public int sum
		{
		    get { return p_sum; }
			set
			{
		        if (p_sum != value)
                {
                    p_sum = value;
                    RaisePropertyChanged("sum");
                }
			}
        }
    private ICommand p_SampleCommand;
    public ICommand SampleCommand
    {
     get
     {
        if (p_SampleCommand == null)
          {
             p_SampleCommand = new DelegateCommand(delegate()
              {
                 sum = op1 + op2;
              });
          }
       return p_SampleCommand;
     }
    }
 }
}

The other parts are the same of the other version. I write them also in this post, below.

The task of this snippet is clear: it takes two input int and sums them! Nothing simplier, except “Hello World!” 🙂

But we have still to make a link with the User Interface.. and to make it, we’ll bind the data and command of the ViewModel with the View creating our DataContext.

When you created the WPF app, you got the MainWindow.xaml and MainWindow.xaml.cs files. Open the second and modify the MainWindow method in this way:


public MainWindow()
{
    InitializeComponent();
    vmMain vm = new vmMain();
    this.DataContext = vm;
}

Now you View can see what there is in your ViewModel. Go to the MainWindow.xaml file.

For example, we can use a Grid in this way:


<Grid>

<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Text="{Bidning op1" Width="120"/>
<TextBox Grid.Column="1" Text="{Binding op2}" Width="120" />
<TextBox Grid.Column="2" Text="{Binding sum}" Width="120" />
<Button Grid.Column="3" Command="{Binding SampleCommand}"/>
</Grid>

</Grid>

Running the application, you’ll see a simple input form for make int sum. This code has not integrity control or exceptions management. It shows to you how to build up a skeleton for a WPF MVVM application with DevExpress tools.

Starting from this, you can do ALL YOU WANT! You can bind anything you want. For example, you can bind your list to a ComboBox (using the ItemSource attribute) and bind also the SelectedItem to another variable, so you can check what is the selected item (and, if you want, make also some check on the value in the set method).

I’ll make other posts, with code snippets with operative samples. Ask if you need a specific sample! 😉

Advertisements