bhawk.hu – Magyar fejlesztői blog

bhawk.hu – Magyar fejlesztői blog


2019. július
h k s c p s v
« máj    
1234567
891011121314
15161718192021
22232425262728
293031  

Kategória


MVVM: Adatkötési technikák 2

Gulyás GáborGulyás Gábor

Most, hogy a legalapvetőbb adatkötési technikát már ismerjük – ahol egy osztály adattagjára végzünk adatkötést -, vegyünk át egy kissé komplexebb példát. 

Adatkötés gyűjteményekre

Az egyik legsűrűbben előforduló eset, hogy valamilyen objektumokból álló gyűjteménnyel rendelkezünk és ezeket az elemeket szeretnénk valamilyen sablon szerint megjeleníteni a képernyőn. Ehhez mindenképpen szükségünk lesz valami olyan felületi elemre, ami egy lista megjelenítésére alkalmas – jelen esetben mi a Windows 10-ben is használt ListView egységet fogjuk használni.

Az előző részből ismert kódpéldán fogunk tovább dolgozni, melyben már létre is hoztunk egy User osztályt. Ebből fogunk egy gyűjteményt deklarálni egy újonnan létrehozott ViewModel-ben:

public class CollectionViewModel
{
    public List<User> Users { get; set; }
    //public ObservableCollection<User> Users { get; set; }

    public CollectionViewModel()
    {
        Users = new List<User>();

        Users.Add(new User() { Name = "Administrator" });
        Users.Add(new User() { Name = "root" });
        Users.Add(new User() { Name = "Blackhawk" });
        Users.Add(new User() { Name = "User001" });
        Users.Add(new User() { Name = "Cortana" });
    }
}

ObservableCollection vs List?

Mi a különbség? Ha felvesszük az elemeket, elvégezzük az adatkötést, látszólag semmi különbséget nem veszünk észre. Az előző részben átvettük, hogy a INotifyPropertyChanged interfész által implementált metódus jelzést ad le a felület számára, hogy az adott adattaghoz tartozó adatkötés frissítésre szorul, mivel változott az érték. Hasonló módon egy ObservableCollection-ben ha új elemet veszünk fel, vagy éppen távolítunk el, a változás a felületen is reflektálva lesz.

FIGYELEM! Ez nem jelenti azt, hogy az objektumok összes adattagja automatikusan jelezni fogja a változásokat, azt nekünk ugyanúgy az osztályon belül meg kell valósítanunk az INotifyPropertyChanged interfész segítségével.

Miután már rendelkezünk adattal, melyet meg szeretnénk jeleníteni a felületen, készítsük el hozzá magát a felületet. Jelen bejegyzésben nem fogok kitérni arra, hogy egy ListView esetében miként is kell sablont gyártani az egyes elemekhez, ez jelen téma szempontjából nem olyan fontos, másrészt pedig erre inkább egy Windows 10 alkalmazásfejlesztési bejegyzésben térnék ki. A felület roppant egyszerű lesz, egyetlen adattagot kell megjelenítenünk a képernyőn, az pedig a felhasználók neve. Erre hozzunk is létre egy CollectionView.xaml képernyőt, majd a felületen az alapértelmezetten létrehozott Grid-et törölve helyezzük a helyére a következő kódrészletet:

<ListView ItemsSource="{Binding Users}" Background="White" Foreground="Black">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"
            FontSize="24"
            Padding="10" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Ezt követően már nincs más dolgunk, mint a felület kódhátterében példányosítani a ViewModel-t, majd a DataContext adattagként átadni azt:

public sealed partial class CollectionView : Page
{
    CollectionViewModel ViewModel = new CollectionViewModel();

    public CollectionView()
    {
        this.InitializeComponent();
        this.DataContext = ViewModel;
    }
}

Amennyiben mindent rendben csináltunk, a következő felület tárulkozik elénk:
Binding-Users

A GitHub-on elérhető kódban végeztem néhány bővítést. A felületen elhelyeztem egy bemeneti mezőt és egy gombot, mellyel új felhasználókat vehetünk fel a listára. Így a gyakorlatban is kipróbálhatóvá válik, hogy mi a különbség egy ObservableCollection és egy List között – ehhez a ViewModel-ben először cseréljétek fel a kikommentelést, mivel alapesetben List-ként kerül deklarálásra a gyűjtemény!

https://github.com/Bhawk90/SampleCodes/tree/master/MVVM-Binding-Simple

A továbbiakban

Az MVVM sorozat következő részében az MVVM Light Toolkit-et fogom bemutatni nektek, amivel egyrészt lecsökkenthető az MVVM alkalmazások fejlesztési ideje, másrészt pedig rengeteg fontos és hasznos képességet implementál számunkra, melyeket a jövőben használni fogunk.

Van valami kérdésed? Szeretnél más témáról is olvasni a blogomon? Küldj be egy hozzászólást!

Minden ami Microsoft technológia! Több mint 8 éve foglalkozom programozással, ez idő alatt pedig rengeteg nyelvet elsajátítottam, leginkább a C#-ot kedvelem! Jelenleg szoftverfejlesztőként dolgozom!

Comments 2
  • pret83
    Posted on

    pret83 pret83

    Válasz Author

    Koszi a cikkeket. En varom a folytatast. Meg nem hasznaltam semilyen frameworkot MVVM-hez, lehet most megjon a kedvem.


    • Gulyás Gábor
      Posted on

      Gulyás Gábor Gulyás Gábor

      Válasz Author

      Igyekszem mihamarabb megírni a cikk folytatását, bízom benne hogy a Te kedved is meg fog jönni majd a használatához! 🙂


This site uses Akismet to reduce spam. Learn how your comment data is processed.