WebElektronika

MVVM pattern a WPF-es alkalmazásokban I.

person access_time 2014.05.26.
Nézzük meg ennek a tervezési mintának (MVVM : Model-View-Viewmodel) a használatát egy WPF-es alkalmazásban. Csak a megjelenítésre fogunk fókuszálni, a command-okat később fogjuk áttekinteni.


Grafikai alkalmazások készítésénél nagyon fontos szempont a megjelenés. Ez könnyen maga után vonhatja azt, hogy különböző funkciókat, fejlesztési tevékenységeket külön kell kezelnünk. Ezért használunk MV (Model / View) architektúrát.

Igen ám, de a WPF-ben ez az egyszerű felépítés kiegészül még néhány betűvel, így kapjuk meg az egyik, de gyakran használt tervezési pattern-t, az MVVM-et (Model / View / ViewModel). Ha ezt a felépítést, architektúrát használjuk a fejlesztésnél, akkor a kinézet és a kód (az alkalmazásunk logikája) szétválik, illetve nagyon kényelmesen cserélhető az alkalmazásunk kinézete úgy, hogy a kódhoz (C#) nem kell hozzányúlnunk.

Ez az architektúra, amelyet a WPF-es projektekben gyakran használnak, a következő részekből áll :

  • Model (Model) : itt találjuk az alkalmazásunk "logikáját"
  • Nézet (View) : itt találjuk a (grafikus) felületünk vezérlőit (pl.: nyomógomb, szövegmezők, stb), animációk, stb.
  • Nézetmodell (ViewModel) : itt követjük nyomon a modellben lévő változásokat

 

Ezt szemlélteti az első ábra is.


1. ábra   Az MVVM architektúra (forrás : link)
 

Ha szeretnénk használni az MVVM-et (nem célszerű kisebb alkalmazásoknál), akkor fontos, hogy ismerjük a kötéseket (binding) és nyomon tudjuk követni a változásokat (INotifyPropertyChanged, plusz link). Ebben a cikkben az utóbbiról és a parancsokról (Commands) nem lesz szó.

Most nézzünk meg egy egyszerű példát, amely megjeleníti a különböző embereknek az adatait. A megjelenítés után "áttervezzük" a megjelenítést.

Indítsuk el a VS2012-t és készítsünk el egy WPF-es projektet. Ezután hozzuk létre el a következő könyvtárakat (Model, View, ViewModel) (2. ábra).


2. ábra   A WpfMVV3 projekt felépítése a Solution Explorerben
 

Látjuk a második ábrán, hogy a projektben megtalálhatók a "Model", a "View" és a "ViewModel" könyvtárak. A View könyvtárban kapott helyet a MainWindow.xaml (és .cs) file. A ViewModel könyvtárba tegyük be az "ember2.cs" és az "emberVM.cs" file-okat.
 

ember2 osztály

Ebben az osztályban találjuk a különböző property-ket. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace WpfMVVM3.ViewModel
{
    class ember2
    {
        public int ID { get; set; }
        public string Nev { get; set; }
        public string Varos { get; set; }
        public DateTime Szuletes { get; set; }
    }
}


emberVM osztály

Készítsük az emberVM osztályt is.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace WpfMVVM3.ViewModel
{
    class emberVM
    {
        public ObservableCollection<ember2> Emberek { get; set; }

        public void getEmberek()
        {
            Emberek = new ObservableCollection<ember2>();

            Emberek.Add(new ember2 { ID = 1, Nev = "Totya", Varos = "Budapest", Szuletes=DateTime.Parse("1974.02.01") });
            Emberek.Add(new ember2 { ID = 2, Nev = "Szasza", Varos = "Sopron", Szuletes = DateTime.Parse("2010.10.13") });
            Emberek.Add(new ember2 { ID = 3, Nev = "Géza", Varos = "Debrecen", Szuletes = DateTime.Parse("1998.07.21") });
            Emberek.Add(new ember2 { ID = 4, Nev = "Laci", Varos = "East Grinstead", Szuletes = DateTime.Parse("1987.12.23") });
            Emberek.Add(new ember2 { ID = 5, Nev = "Réka", Varos = "London", Szuletes = DateTime.Parse("1970.11.16") });
            Emberek.Add(new ember2 { ID = 5, Nev = "Teszt Elek", Varos = "London" });
        }
    }
}


App.xml.cs

Módosítsuk az "App.xml.cs" file tartalmát.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Windows;
using WpfMVVM3.View;
using WpfMVVM3.ViewModel;

namespace WpfMVVM3
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            MainWindow ablak = new MainWindow();
            ember em = new ember();
            emberVM emvm = new emberVM();

            emvm.getEmberek();
            ablak.DataContext = emvm;

            ablak.Show();
        }
    }
}

A MainWindow.xaml file tartalmát módosítani fogjuk, ezáltal változtatni fogjuk az alkalmazásunk megjelenését. Először ezt a kódot írjuk be a MainWindow.xaml file-ba (3. ábra). 


3. ábra   MainWindow.xaml file tartalma I.
 

A ListView vezérlőt (lstView1) használjuk fel a megjelenítésre úgy, hogy adatkötést alkalmazunk az oszlopoknál. Az "ember" osztályban talalható property-ket kötjük be az adott oszlopba, az eredményt a 4. ábrán láthatjuk.


4. ábra   Futási eredmény I.
 

Módosítsuk most a MainWindow.xaml file tartalmát, írjuk be a következő változatot (5. ábra).


5. ábra   MainWindow.xaml file tartalma II.
 

Vegyük észre, hogy jelentősen módosítottuk a felületünket, már nem a ListView-t használjuk a megjelenítésre, hanem TextBlock-okat. A futási eredményt láthatjuk a következő ábrán.


6. ábra   Futási eredmény II.
 

Könnyen észrevehetjük, hogy úgy módosítottuk jelentősen az alkalmazásunk megjelenését, felületét, hogy nem módosítottuk a MainWindow.xaml.cs C# file tartalmát, hiszen egy sort sem írtunk bele a projekt létrehozása óta. A felület kinézetéért csak a MainWindow.xaml file felel, amelyben a vezérlők "Text" tulajdonságához kötöttük az "ember" osztály tulajdonságait.

De hogyan tudjuk az új személy adatait felvenni? Hogyan tudunk módosítani? Ha nem szeretnénk a MainWindow.xaml.cs file-ba írni (MVVM miatt nem tehetjük ezt meg), akkor már megoldást kell keresnünk. Az első ábrán látható blokkvázlatban találjuk meg a megoldást, parancsokat kell alkalmaznunk.

Ezért a következő részben megismerjük a parancsokat, azután bővíteni fogjuk ezt a projektünket.