Datenbindungen und MVVMData binding and MVVM

„Model-View-ViewModel“ (MVVM) ist ein Entwurfsmuster für Benutzeroberflächenarchitekturen zum Entkoppeln von UI-Code und Nicht-UI-Code.Model-View-ViewModel (MVVM) is a UI architectural design pattern for decoupling UI and non-UI code. Mit MVVM definieren Sie Ihre Benutzeroberfläche deklarativ in XAML und verwenden Datenbindungsmarkup, um es mit anderen Ebenen zu verknüpfen, die Daten und Befehle enthalten.With MVVM, you define your UI declaratively in XAML and use data binding markup to link it to other layers containing data and commands. Die Datenbindungsinfrastruktur bietet eine lose Kopplung, bei der die Benutzeroberfläche und die verknüpften Daten synchronisiert bleiben und Benutzereingaben an die entsprechenden Befehle weitergeleitet werden.The data binding infrastructure provides a loose coupling that keeps the UI and the linked data synchronized and routes user input to the appropriate commands.

Da es eine lose Kopplung bietet, reduziert die Verwendung der Datenbindung harte Abhängigkeiten zwischen verschiedenen Arten von Code.Because it provides loose coupling, the use of data binding reduces hard dependencies between different kinds of code. Dies vereinfacht das Ändern einzelner Codekomponenten (Methoden, Klassen, Steuerelemente usw.), ohne dass dies zu unbeabsichtigten Nebeneffekten in anderen Einheiten führt.This makes it easier to change individual code units (methods, classes, controls, etc.) without causing unintended side effects in other units. Diese Entkopplung ist ein Beispiel für die Trennung von Belangen, bei der es sich um ein wichtiges Konzept in vielen Entwurfsmustern handelt.This decoupling is an example of the separation of concerns, which is an important concept in many design patterns.

Vorteile von MVVMBenefits of MVVM

Die Entkopplung Ihres Codes bietet zahlreiche Vorteile, einschließlich:Decoupling your code has many benefits, including:

  • Ermöglichen eines iterativen, explorativen Programmierstils.Enabling an iterative, exploratory coding style. Isolierte Änderungen sind weniger riskant, und man kann leichter damit experimentieren.Change that is isolated is less risky and easier to experiment with.
  • Vereinfachung von Komponententests.Simplifying unit testing. Codekomponenten, die voneinander isoliert sind, können einzeln und außerhalb von Produktionsumgebungen getestet werden.Code units that are isolated from one another can be tested individually and outside of production environments.
  • Unterstützung der Teamzusammenarbeit.Supporting team collaboration. Entkoppelter Code, der gut entworfene Schnittstellen einhält, kann von separaten Personen oder Teams entwickelt und später integriert werden.Decoupled code that adheres to well-designed interfaces can be developed by separate individuals or teams, and integrated later.
  • Verbesserung der Verwaltbarkeit.Improving maintainability. Das Korrigieren von Fehlern in entkoppeltem Code führt mit geringerer Wahrscheinlichkeit zu Regressionen in anderem Code.Fixing bugs in decoupled code is less likely to cause regressions in other code.

Anders als beim MVVM verwendet eine App mit einer stärker konventionellen „CodeBehind“-Struktur in der Regel Datenbindungen für reine Anzeigedaten und reagiert auf Benutzereingaben durch direkte Verarbeitung von Ereignissen, die von Steuerelementen verfügbar gemacht werden.In contrast with MVVM, an app with a more conventional "code-behind" structure typically uses data binding for display-only data, and responds to user input by directly handling events exposed by controls. Die Ereignishandler werden in CodeBehind-Dateien (z. B. MainPage.xaml.cs) implementiert und sind häufig eng an die Steuerelemente gekoppelt, die üblicherweise Code enthalten, der die Benutzeroberfläche direkt manipuliert.The event handlers are implemented in code-behind files (such as MainPage.xaml.cs), and are often tightly coupled to the controls, typically containing code that manipulates the UI directly. Dadurch wird es schwierig oder sogar unmöglich, ein Steuerelement zu ersetzen, ohne den Code für die Ereignisbehandlung aktualisieren zu müssen.This makes it difficult or impossible to replace a control without having to update the event handling code. Bei dieser Architektur häufen CodeBehind-Dateien häufig Code an, der sich nicht direkt auf die Benutzeroberfläche bezieht, wie z. B. Datenbankzugriffscode, der schließlich dupliziert und für die Verwendung mit anderen Seiten geändert wird.With this architecture, code-behind files often accumulate code that isn't directly related to the UI, such as database-access code, which ends up being duplicated and modified for use with other pages.

App-EbenenApp layers

Bei Verwendung des MVVM-Musters wird eine App in die folgenden Ebenen unterteilt:When using the MVVM pattern, an app is divided into the following layers:

  • Die Modellebene definiert die Typen, die Ihre Geschäftsdaten darstellen.The model layer defines the types that represent your business data. Dies umfasst alles, was erforderlich ist, um die Kerndomäne der App zu modellieren, und umfasst häufig Kernlogik der App.This includes everything required to model the core app domain, and often includes core app logic. Diese Ebene ist vollständig unabhängig von den Ansichts- und Ansichtsmodellebenen und befindet sich häufig teilweise in der Cloud.This layer is completely independent of the view and view-model layers, and often resides partially in the cloud. Bei einer vollständig implementierten Modellebene können Sie bei Bedarf mehrere verschiedene Client-Apps erstellen, z. B. UWP- und Web-Apps, die mit denselben zugrunde liegenden Daten funktionieren.Given a fully implemented model layer, you can create multiple different client apps if you so choose, such as UWP and web apps that work with the same underlying data.
  • Die Ansichtsebene definiert die Benutzeroberfläche mithilfe von XAML-Markup.The view layer defines the UI using XAML markup. Das Markup enthält Datenbindungsausdrücke (z. B. x:Bind), die die Verbindung zwischen bestimmten Benutzeroberflächenkomponenten und verschiedenen Ansichtsmodell- und Modellmembern definieren.The markup includes data binding expressions (such as x:Bind) that define the connection between specific UI components and various view-model and model members. CodeBehind-Dateien werden manchmal als Teil der Ansichtsebene verwendet, um zusätzlichen Code aufzunehmen, der zum Anpassen oder Manipulieren der Benutzeroberfläche erforderlich ist, oder um Daten aus Ereignishandlerargumenten zu extrahieren, bevor eine Ansichtsmodellmethode aufgerufen wird, die die Arbeit ausführt.Code-behind files are sometimes used as part of the view layer to contain additional code needed to customize or manipulate the UI, or to extract data from event handler arguments before calling a view-model method that performs the work.
  • Die Ansichtsmodellebene stellt Datenbindungsziele für die Ansicht bereit.The view-model layer provides data binding targets for the view. In vielen Fällen macht das Ansichtsmodell das Modell direkt verfügbar oder stellt Member bereit, die bestimmte Modellmember umschließen.In many cases, the view-model exposes the model directly, or provides members that wrap specific model members. Das Ansichtsmodell kann auch Member zum Nachverfolgen von Daten definieren, die für die Benutzeroberfläche relevant sind, aber nicht für das Modell, wie z. B. die Anzeigereihenfolge einer Liste von Elementen.The view-model can also define members for keeping track of data that is relevant to the UI but not to the model, such as the display order of a list of items. Das Ansichtsmodell fungiert außerdem als Ort für die Integration anderer Dienste, z. B. dem Datenbankzugriffscode.The view-model also serves as an integration point with other services such as database-access code. Bei einfachen Projekten benötigen Sie möglicherweise keine separate Modellebene, sondern nur ein Ansichtsmodell, das alle benötigten Daten kapselt.For simple projects, you might not need a separate model layer, but only a view-model that encapsulates all the data you need.

Einfaches und erweitertes MVVMBasic and advanced MVVM

Wie bei jedem beliebigen Entwurfsmuster gibt es mehr als eine Möglichkeit zum Implementieren von MVVM, und viele verschiedene Verfahren werden als Teil von MVVM angesehen.As with any design pattern, there is more than one way to implement MVVM, and many different techniques are considered part of MVVM. Aus diesem Grund gibt es mehrere verschiedene MVVM-Frameworks von Drittanbietern, die die verschiedenen XAML-basierten Plattformen, einschließlich UWP, unterstützen.For this reason, there are several different third-party MVVM frameworks supporting the various XAML-based platforms, including UWP. Diese Frameworks enthalten jedoch im Allgemeinen mehrere Dienste für die Implementierung entkoppelter Architektur, wodurch die exakte Definition von MVVM etwas mehrdeutig wird.However, these frameworks generally include multiple services for implementing decoupled architecture, making the exact definition of MVVM somewhat ambiguous.

Obwohl anspruchsvolle MVVM-Frameworks sehr nützlich sein können, insbesondere bei Projekten auf Unternehmensebene, gehen in der Regel mit der Übernahme eines bestimmten Musters oder Verfahrens Kosten einher, und die Vorteile sind nicht immer einsichtig, abhängig von der Skalierung und Größe Ihres Projekts.Although sophisticated MVVM frameworks can be very useful, especially for enterprise-scale projects, there is typically a cost associated with adopting any particular pattern or technique, and the benefits are not always clear, depending on the scale and size of your project. Glücklicherweise können Sie nur die Verfahren übernehmen, die einen deutlichen und konkreten Vorteil bieten, und andere ignorieren, bis Sie sie benötigen.Fortunately, you can adopt only those techniques that provide a clear and tangible benefit, and ignore others until you need them.

Insbesondere können Sie einen großen Vorteil erzielen, indem Sie einfach die gesamte Leistungsfähigkeit der Datenbindung verstehen und anwenden und Ihre App-Logik trennen und in die zuvor beschriebenen Ebenen aufteilen.In particular, you can get a lot of benefit simply by understanding and applying the full power of data binding and separating your app logic into the layers described earlier. Dies können Sie erreichen, indem Sie nur die vom Windows SDK bereitgestellten Funktionen, ohne Einbeziehung externere Frameworks, verwenden.This can be achieved using only the capabilities provided by the Windows SDK, and without using any external frameworks. Besonders die Markuperweiterung {x:Bind} vereinfacht die Datenbindung und erhöht deren Leistungsfähigkeit gegenüber früheren XAML-Plattformen, indem viele der früher erforderlichen Codebausteine überflüssig werden.In particular, the {x:Bind} markup extension makes data binding easier and higher performing than in previous XAML platforms, eliminating the need for a lot of the boilerplate code required earlier.

Weitere Anleitungen zur Verwendung des einfachen, sofort einsatzbereiten MVVM finden Sie im Kundenauftragsdatenbank-Beispiel auf GitHub.For additional guidance on using basic, out-of-the-box MVVM, check out the Customers Orders Database sample on GitHub. Viele der anderen UWP-App-Beispiele verwenden ebenfalls eine einfache MVVM-Architektur, und das Beispiel für eine App mit Verkehrsinformationen enthält sowohl eine CodeBehind- als auch eine MVVM-Version, zusammen mit Anmerkungen, die die MVVM-Konvertierung beschreiben.Many of the other UWP app samples also use a basic MVVM architecture, and the Traffic App sample includes both code-behind and MVVM versions, with notes describing the MVVM conversion.

Siehe auchSee also

ThemenTopics

Datenbindung im DetailData binding in depth
Markuperweiterung {x:Bind}{x:Bind} markup extension

BeispieleSamples

Kundenauftragsdatenbank-BeispielCustomers Orders Database sample
VanArsdel-BestandsbeispielVanArsdel Inventory sample
Beispiel für eine App mit VerkehrsinformationenTraffic App sample