Beispieldaten auf der Entwurfsoberfläche und zum Prototyping

Hinweis

 Der Grad, in dem Sie Beispieldaten benötigen – und wie viel es Ihnen hilft – hängt davon ab, ob Ihre Bindungen die {Binding}-Markuperweiterung oder die {x:Bind}-Markuperweiterung verwenden. Die in diesem Thema beschriebenen Techniken basieren auf der Verwendung eines DataContext-, sodass sie nur für {Binding}-geeignet sind. Aber wenn Sie {x:Bind} verwenden, zeigen Ihre Bindungen zumindest Platzhalterwerte auf der Entwurfsoberfläche (auch für Elementsteuerelemente) an, sodass Sie nicht ganz so viel Bedarf an Beispieldaten haben.

Es kann unmöglich oder unerwünscht sein, dass Ihre App möglicherweise aus Gründen des Datenschutzes oder der Leistung Echtzeitdaten auf der Designoberfläche in Microsoft Visual Studio oder Blend für Visual Studio anzeigt. Damit Ihre Steuerelemente mit Daten aufgefüllt werden können (sodass Sie an den Layouts, Vorlagen und anderen visuellen Eigenschaften Ihrer App arbeiten können), gibt es verschiedene Möglichkeiten, wie Sie Entwurfszeit-Beispieldaten verwenden können. Beispieldaten können auch wirklich nützlich und zeitsparend sein, wenn Sie eine Skizzen-App (oder einen Prototyp) erstellen. Sie können Beispieldaten zur Laufzeit in Ihrer Skizze oder Ihrem Prototyp verwenden, um Ihre Ideen zu veranschaulichen, ohne eine Verbindung mit echten Live-Daten aufzubauen.

Beispiel-Apps, die {Binding} veranschaulichen

• Laden Sie die App Bookstore1 herunter.
• Laden Sie die App Bookstore2 herunter.

Hinweis

Screenshots in diesem Artikel wurden aus einer früheren Version von Visual Studio erstellt. Möglicherweise stimmen sie nicht genau mit Ihrer Entwicklungsumgebung überein, wenn Sie Visual Studio 2019 verwenden.

Festlegen von DataContext im Markup

Es ist eine ziemlich gängige Entwicklerpraxis, imperativen Code (in Code-Behind) zu verwenden, um den DataContext einer Seite oder eines Benutzersteuerelements auf eine Instanz eines View-Models festzulegen.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Aber wenn Sie dies tun, ist Ihre Seite nicht so "designbar" wie es sein könnte. Der Grund dafür ist, dass beim Öffnen Ihrer XAML-Seite in Visual Studio oder Blend für Visual Studio der imperative Code, der den DataContext--Wert zuweist, niemals ausgeführt wird (tatsächlich wird keiner Ihrer Code-Behind-Dateien ausgeführt). Die XAML-Tools analysieren natürlich Ihr Markup und instanziieren alle darin deklarierten Objekte, aber sie instanziieren den Seitentyp selbst nicht. Das Ergebnis ist, dass Sie keine Daten in Ihren Steuerelementen oder im Dialogfeld Datenbindung erstellen sehen werden, und Ihre Seite wird schwieriger zu stylen und zu gestalten.

Die erste Lösung besteht darin, diese DataContext--Zuweisung auszukommentieren und stattdessen den DataContext- in Ihrem Seitenmarkup festzulegen. Auf diese Weise werden Ihre Live-Daten zur Entwurfszeit und zur Laufzeit angezeigt. Öffnen Sie dazu zuerst die XAML-Seite. Dann klicken Sie im Fenster Dokumentgliederung auf das entwurfsmäßige Root-Element (in der Regel mit der Beschriftung [Page]), um es auszuwählen. Suchen Sie im Fenster Eigenschaften die DataContext Eigenschaft (innerhalb der Kategorie "Allgemein") und ändern Sie sie. Wählen Sie den Typ des Ansichtsmodells im Dialogfeld Objekt auswählen, und klicken Sie dann auf OK.

So sieht das resultierende Markup aus.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

Und so sieht die Entwurfsoberfläche jetzt aus, da Ihre Bindungen aufgelöst werden können. Beachten Sie, dass der Pfad Picker im Dialog Datenbindung erstellen nun basierend auf dem DataContext-Typ und den Eigenschaften, an die Sie binden können, gefüllt ist.

Das Dialogfeld Datenbindung erstellen benötigt nur einen Typ, mit dem es arbeitet, aber die Eigenschaften der Bindungen müssen mit Werten initialisiert werden. Wenn Sie sich zur Entwurfszeit nicht an Ihren Clouddienst wenden möchten (aufgrund von Leistung, Zahlung für Datenübertragung, Datenschutzprobleme, diese Art von Sache), kann Ihr Initialisierungscode überprüfen, ob Ihre App in einem Designtool (z. B. Visual Studio oder Blend für Visual Studio) ausgeführt wird, und in diesem Fall nur Beispieldaten zur Verwendung zur Entwurfszeit laden.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

Sie können einen Ansichtsmodell-Lokator verwenden, wenn Sie Parameter an den Initialisierungscode übergeben müssen. Ein Ansichtsmodell-Locator ist eine Klasse, die Sie in Anwendungsressourcen einfügen können. Sie verfügt über eine Eigenschaft, die das Ansichtsmodell verfügbar macht, und die DataContext- ihrer Seite wird an diese Eigenschaft gebunden. Ein weiteres Muster, das der Locator oder das Ansichtsmodell verwenden kann, ist die Abhängigkeitsinjektion, die einen Entwurfszeit- oder Laufzeitdatenanbieter erstellen kann, von denen jeder eine gemeinsame Schnittstelle implementiert.

"Beispieldaten der Klasse und Entwurfszeit-Attribute"

Wenn aus irgendeinem Grund keine der Optionen im vorherigen Abschnitt für Sie funktioniert, haben Sie weiterhin zahlreiche Optionen für Entwurfszeitdaten über XAML-Toolsfunktionen und Attribute zur Entwurfszeit zur Verfügung. Eine gute Option ist das Feature "Beispieldaten aus Klasse erstellen" in Blend für Visual Studio. Sie finden diesen Befehl auf einer der Schaltflächen oben im Bereich Daten.

Sie müssen lediglich eine Klasse für den zu verwendenden Befehl angeben. Der Befehl führt dann zwei wichtige Dinge für Sie aus. Zunächst wird eine XAML-Datei generiert, die Beispieldaten enthält, die für die Befüllung einer Instanz Ihrer ausgewählten Klasse und aller Member geeignet sind (tatsächlich funktioniert das Tool mit XAML- oder JSON-Dateien gleichermaßen gut). Zweitens füllt sie den Datenbereich mit dem Schema der ausgewählten Klasse auf. Anschließend können Sie Mitglieder aus dem Bereich Daten auf die Entwurfsoberfläche ziehen, um verschiedene Aufgaben auszuführen. Je nachdem, was Sie ziehen und wohin Sie es ablegen, können Sie vorhandenen Steuerelementen Verknüpfungen hinzufügen (unter Verwendung von {Binding}) oder neue Steuerelemente erstellen und gleichzeitig verknüpfen. In beiden Fällen legt der Vorgang auch einen Entwurfszeitdatenkontext (d:DataContext) für Sie (sofern noch nicht festgelegt) im Layoutstamm Ihrer Seite fest. Dieser Entwurfszeitdatenkontext verwendet das d:DesignData-Attribut , um seine Beispieldaten aus der XAML-Datei abzurufen, die generiert wurde (was Sie übrigens in Ihrem Projekt finden und bearbeiten können, damit es die gewünschten Beispieldaten enthält).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

Die verschiedenen xmlns-Deklarationen bedeuten, dass Attribute mit dem d: Präfix nur zur Entwurfszeit interpretiert und zur Laufzeit ignoriert sind. Das d:DataContext-Attribut beeinflusst nur den Wert der DataContext-Eigenschaft zur Entwurfszeit; es hat zur Laufzeit keine Auswirkung. Sie können, wenn Sie möchten, sowohl d:DataContext als auch DataContext im Markup festlegen. d:DataContext- wird zur Entwurfszeit außer Kraft setzen, und DataContext- wird zur Laufzeit außer Kraft setzen. Dieselben Außerkraftsetzungsregeln gelten für alle Entwurfszeit- und Laufzeitattribute.

Das Attribut d:DataContext und alle anderen Entwurfszeitattribute sind im Thema Design-Time Attribute dokumentiert, das weiterhin für UWP-Apps (Universelle Windows-Plattform) gültig ist.

CollectionViewSource hat keine DataContext-Eigenschaft, besitzt jedoch eine Source-Eigenschaft. Folglich gibt es eine d:Source--Eigenschaft, mit der Sie Entwurfszeit-only-Beispieldaten für eine CollectionViewSource-festlegen können.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Damit dies funktioniert, hätten Sie eine Klasse mit dem Namen Recordings : ObservableCollection<Recording>, und Sie würden die XAML-Beispieldatendatei so bearbeiten, dass sie nur ein Recordings-Objekt (mit Recording-Objekten darin) enthält, wie hier gezeigt.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Wenn Sie eine JSON-Beispieldatendatei anstelle von XAML verwenden, müssen Sie die Type-Eigenschaft festlegen.

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

Bisher haben wir d:DesignData verwendet, um Beispieldaten für die Entwurfszeit aus einer XAML- oder JSON-Datei zu laden. Eine Alternative dazu ist die d:DesignInstance-Markuperweiterung, die angibt, dass die Entwurfszeitquelle auf der Klasse basiert, die von der Type-Eigenschaft angegeben wird. Hier ist ein Beispiel.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

Die IsDesignTimeCreatable-Eigenschaft gibt an, dass das Designtool tatsächlich eine Instanz der Klasse erstellen soll, was bedeutet, dass die Klasse über einen öffentlichen Standardkonstruktor verfügt und sich selbst mit Daten befüllt (entweder real oder Beispiel). Wenn Sie IsDesignTimeCreatable nicht festlegen (oder wenn Sie es auf Falsefestlegen), werden keine Beispieldaten auf der Entwurfsoberfläche angezeigt. Das Designtool analysiert in diesem Fall die Klasse, um deren bindungsfähige Eigenschaften zu erkennen, und zeigt diese im Bereich Daten und im Dialogfeld Datenbindung erstellen an.

Beispieldaten für das Prototyping

Für die Prototyperstellung möchten Sie Beispieldaten sowohl zur Entwurfszeit als auch zur Laufzeit verwenden. Für diesen Anwendungsfall verfügt Blend für Visual Studio über die Funktion Neue Beispieldaten. Sie finden diesen Befehl auf einer der Schaltflächen oben im Bereich Daten.

Anstatt eine Klasse anzugeben, können Sie das Schema Ihrer Beispieldatenquelle direkt im Datenbereich entwerfen. Sie können auch Beispieldatenwerte im Datenbereich bearbeiten: Es ist nicht erforderlich, eine Datei zu öffnen und zu bearbeiten (obwohl Sie dies bei Bedarf dennoch tun können).

Das Feature Neue Beispieldaten verwendet DataContext-und nicht d:DataContext-, sodass die Beispieldaten während des Entwurfs und bei der Ausführung der Skizze oder des Prototyps verfügbar sind. Und das "Datenbereich" beschleunigt wirklich Ihre Entwurfs- und Bindungsaufgaben. Wenn Sie beispielsweise einfach eine Sammlungseigenschaft aus dem Daten-Panel auf die Entwurfsoberfläche ziehen, wird ein datengebundenes Elemente-Steuerelement und die erforderlichen Vorlagen erzeugt, die zum Erstellen und Ausführen bereit sind.