The title already said what I’m about to write here, so.. let’s start. Only one note: I’m writing this for DevExpress tool, since almost all tutorials on the web don’t use this (anyway, almost all written here is good for a project without DevExpress).

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.
  • DevExpressthis company offers some powerful tools to improve the quality of our application. They gives to their customers a very qualified support, with a ticket service well managed. This is their official site.

If you don’t know how to create a new WPF application from Visual Studio 2013, follow this link.

Once we have our WPF application, we have to make it work as MVVM (you can’t create an application already set for MVVM, unless you use some external tool).

We have to define a class. It will be our ViewModel class, used to binding data and commands with the View.  In the code-behind of our xaml files we won’t write anything, except few code lines for intantiate the data context (see below). You have to use “something” for notify to the UI the updates of the binded data: this work is done by the DevExpress.Mvvm.ViewModelBase class.

The following sample shows how to define a simply command and data to bind.


using DevExpress.Mvvm;
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 : DevExpress.Mvvm.ViewModelBase
 {
 private int p_op1 = 0;
 public int op1 { get { return p_op1; } set { p_op1 = value; base.RaisePropertiesChanged("op1"); } }
 private int p_op2 = 0;
 public int op2 { get { return p_op2; } set { p_op2 = value; base.RaisePropertiesChanged("op2"); } }
private int p_sum = 0;
public int sum {get {return p_sum;} set {p_sum = value; base.RaisePropertiesChanged("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 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="{Binding 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