Windows-adatkötés és MVVM

A Model-View-ViewModel (MVVM) egy felhasználói felület architekturális tervezési mintája, amely elválasztja a felhasználói felületet és a nem felhasználói felületi kódot. Ismerje meg, hogyan teszi lehetővé az MVVM a laza összekapcsolást adatkötés használatával az XAML-ben a felhasználói felület és az adatok szinkronizálása, a karbantarthatóság javítása és a függőségek csökkentése érdekében.

Mivel laza összekapcsolást biztosít, az adatkötés használata csökkenti a különböző kódtípusok közötti kemény függőségeket. Ez a megközelítés megkönnyíti az egyes kódegységek (metódusok, osztályok, vezérlők stb.) módosítását anélkül, hogy más egységekben nem kívánt mellékhatásokat okoz. Ez a szétválasztás példa az aggodalmak elkülönítésére, amely számos tervezési mintában fontos fogalom.

Jótanács

Mikor érdemes MVVM-et használni: Az MVVM-et összetett adatfolyamokkal, több képernyővel vagy csapat által kifejlesztett kódbázisokkal rendelkező alkalmazásokhoz használhatja. Az egyszerű egyoldalas eszközök vagy prototípusok esetében a kód mögötti kód elfogadható – az összetettség növekedésével fokozatosan alkalmazhatja az MVVM-et. Ha az alkalmazás egységtesztelhető üzleti logikával rendelkezik, az MVVM futtatható felhasználói felület nélkül teszi tesztelhetővé ezt a logikát.

Az MVVM előnyei

A kód leválasztása számos előnnyel jár, például:

• Iteratív, feltáró kódolási stílus engedélyezése. Az izolált változás kevésbé kockázatos, és könnyebb kísérletezni vele.
• Az egységtesztelés egyszerűsítése. Tesztelheti az egymástól elkülönített kódegységeket külön-külön, az éles környezeten kívül.
• A csapat együttműködésének támogatása. A különálló egyének vagy csapatok olyan különálló kódot fejleszthetnek, amely megfelel a jól megtervezett felületeknek, és később integrálható.
• A karbantarthatóság javítása. A leválasztott kód hibáinak kijavítása kevésbé valószínű, hogy más kódban regressziót okoz.

Az MVVM-sel ellentétben a hagyományosabb "kód mögötti" struktúrával rendelkező alkalmazások jellemzően adatkötést használnak a csak megjelenített adatokhoz. A vezérlők által közzétett események közvetlen kezelésével válaszol a felhasználói bemenetekre. Az eseménykezelők kód mögötti fájlokban (például MainWindow.xaml.cs) vannak implementálva, és gyakran szorosan kapcsolódnak a vezérlőkhöz. Általában olyan kódot tartalmaznak, amely közvetlenül módosítja a felhasználói felületet. Ez a struktúra megnehezíti vagy lehetetlenné teszi a vezérlők cseréjét az eseménykezelési kód frissítése nélkül. Ezzel az architektúrával a kód mögötti fájlok gyakran olyan kódot halmoznak fel, amely nem kapcsolódik közvetlenül a felhasználói felülethez, például az adatbázis-hozzáférési kódot, amely végül duplikálva és módosítva lesz más ablakokkal való használatra.

Alkalmazásrétegek

Az MVVM-minta használatakor ossza fel az alkalmazást a következő rétegekre:

• A modellréteg határozza meg az üzleti adatokat képviselő típusokat. Ez a réteg mindent tartalmaz, ami az alapvető alkalmazástartomány modellezéséhez szükséges, és gyakran tartalmazza az alapvető alkalmazáslogikát is. Ez a réteg teljesen független a nézet- és nézetmodell-rétegekétől, és gyakran részben a felhőben található. A teljes modellrétegnek megfelelően több különböző ügyfélalkalmazást is létrehozhat, például a Windows App SDK-t és az azonos mögöttes adatokat használó webalkalmazásokat.
• A nézet réteg XAML-jelölés használatával határozza meg a felhasználói felületet. A korrektúra adatkötési kifejezéseket (például x:Bind) tartalmaz, amelyek meghatározzák az adott felhasználói felület összetevői, valamint a különböző nézetmodellek és modelltagok közötti kapcsolatot. Előfordulhat, hogy a nézetréteg részeként kód mögötti fájlokkal további kódot is tartalmazhat a felhasználói felület testreszabásához vagy módosításához, illetve az eseménykezelő argumentumokból származó adatok kinyeréséhez, mielőtt meghívna egy olyan nézetmodell-metódust, amely elvégzi a munkát.
• A nézetmodell réteg adatkötési célokat biztosít a nézethez. A nézetmodell sok esetben közvetlenül teszi elérhetővé a modellt, vagy olyan tagokat biztosít, amelyek meghatározott modelltagokat burkolnak. A nézetmodell tagokat is definiálhat a felhasználói felület szempontjából releváns adatok nyomon követéséhez, de nem a modellhez, például az elemek listájának megjelenítési sorrendjéhez. A nézetmodell más szolgáltatásokkal, például adatelérési kóddal is integrációs pontként szolgál. Egyszerű projektek esetén előfordulhat, hogy nincs szükség külön modellrétegre, hanem csak egy nézetmodellre, amely az összes szükséges adatot tartalmazza.

Alapszintű és fejlett MVVM

Mint minden tervezési mintában, az MVVM implementálásának több módja is van, és számos különböző technika az MVVM része. Ezért számos különböző külső MVVM-keretrendszer támogatja a különböző XAML-alapú platformokat, köztük a Windows App SDK-t. Ezek a keretrendszerek azonban általában több szolgáltatást is tartalmaznak a leválasztott architektúra implementálásához, így az MVVM pontos definíciója kissé nem egyértelmű.

Bár a kifinomult MVVM-keretrendszerek nagyon hasznosak lehetnek, különösen nagyvállalati szintű projektek esetében, általában egy adott minta vagy technika bevezetésének költsége van, és az előnyök nem mindig egyértelműek a projekt méretétől és méretétől függően. Szerencsére csak azokat a technikákat alkalmazhatja, amelyek egyértelmű és kézzelfogható előnyt biztosítanak, és figyelmen kívül hagyhat másokat, amíg szükség nem lesz rájuk.

Különösen sok előnyt érhet el egyszerűen az adatkötés teljes erejének megértésével és alkalmazásával, valamint az alkalmazáslogika a korábban ismertetett rétegekre való elválasztásával. Ez csak a Windows App SDK által biztosított képességek használatával és külső keretrendszerek használata nélkül érhető el. Az {x:Bind} korrektúrakiterjesztés megkönnyíti és nagyobb teljesítményűvé teszi az adatkötést, mint a korábbi XAML-platformokon, így nincs szükség a korábban igényelt sablonkód nagy részének szükségességére.

Az MVVM használatával kapcsolatos további útmutatóért lásd a CommunityToolkit MVVM kódtárat, amely alaposztályokat, például ObservableObject és RelayCommand, valamint forrásgenerátorokat biztosít a [ObservableProperty] és [RelayCommand] attribútumokon keresztül, amelyek kiküszöbölik a sablonkódot. A WinUI-katalógus az adatkötést és az MVVM-mintákat is bemutatja a WinUI 3 használatával.

CommunityToolkit.Mvvm példa

Az alábbi példa egy teljes Nézetmodellt mutat be a CommunityToolkit.Mvvm 8.x forrásgenerátorokkal. Az [ObservableProperty] attribútum létrehozza a tulajdonságot és a változásértesítést, és [RelayCommand] létrehozza a megvalósítást ICommand :

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class CustomerViewModel : ObservableObject
{
    private readonly ICustomerService _customerService;

    public CustomerViewModel(ICustomerService customerService)
    {
        _customerService = customerService;
    }

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string _name = string.Empty;

    [ObservableProperty]
    private bool _isBusy;

    [RelayCommand(CanExecute = nameof(CanSave))]
    private async Task SaveAsync()
    {
        IsBusy = true;
        await _customerService.SaveAsync(Name);
        IsBusy = false;
    }

    private bool CanSave() => !string.IsNullOrWhiteSpace(Name);
}

A ViewModel kötése egy laphoz a következő használatával {x:Bind}:

<Page x:Class="MyApp.Views.CustomerPage"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <TextBox Text="{x:Bind ViewModel.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <Button Content="Save" Command="{x:Bind ViewModel.SaveCommand}" />
        <ProgressRing IsActive="{x:Bind ViewModel.IsBusy, Mode=OneWay}" />
    </StackPanel>
</Page>

Az oldal mögöttes kódja elérhetővé teszi azt a ViewModel tulajdonságot, amelyre a {x:Bind} hivatkozik:

// CustomerPage.xaml.cs
public sealed partial class CustomerPage : Page
{
    public CustomerViewModel ViewModel { get; }

    public CustomerPage()
    {
        // Resolve via DI; see Architecture patterns for WinUI 3 desktop apps
        // for how to configure App.GetService<T>() with Microsoft.Extensions.DependencyInjection.
        ViewModel = App.GetService<CustomerViewModel>();
        InitializeComponent();
    }
}

Az MVVM függőséginjektálással, konfigurációval és vállalati mintákkal való kombinálásával kapcsolatos útmutatásért tekintse meg a WinUI 3 asztali alkalmazások architektúramintáit.

Lásd még

Témakörök

Részletes adatkötés
{x:Bind} kódbővítmény
MVVM-teljesítménytippek WinUI-alkalmazásokhoz
Architektúraminták WinUI 3 asztali alkalmazásokhoz

WinUI 3 és MVVM-erőforrások

CommunityToolkit MVVM dokumentációja
WinUI-katalógus – adatkötési minták
Template Studio for WinUI