Verwenden von Entwurfszeitdaten mit dem XAML-Vorschauprogramm

Artikel
07/13/2023

Einige Layouts sind ohne Daten schwer zu visualisieren. Verwenden Sie diese Tipps, um die Vorschau Ihrer datenintensiven Seiten im XAML-Vorschauprogramm optimal zu nutzen.

Warnung

Die XAML-Vorschauversion wurde in Visual Studio 2019, Version 16.8 und Visual Studio für Mac Version 8.8 veraltet und durch die XAML-Hot Reload-Funktion in Visual Studio 2019, Version 16.9 und Visual Studio für Mac Version 8.9 ersetzt. Weitere Informationen zu XAML-Hot Reload finden Sie in der Dokumentation.

Hinweis

Wenn Sie Windows Presentation Foundation (WPF) oder UWP verwenden, finden Sie weitere Informationen unter Verwenden von Entwurfszeitdaten mit dem XAML-Designer für Desktopanwendungen.

Grundlagen der Entwurfszeitdaten

Entwurfszeitdaten sind gefälschte Daten, die Sie festgelegt haben, um Die Visualisierung Ihrer Steuerelemente im XAML-Vorschauprogramm zu erleichtern. Fügen Sie zunächst die folgenden Codezeilen zur Kopfzeile Ihrer XAML-Seite hinzu:

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Nachdem Sie die Namespaces hinzugefügt haben, können Sie ein beliebiges Attribut oder Steuerelement platzieren d: , um es im XAML-Vorschauprogramm anzuzeigen. Elemente mit d: werden zur Laufzeit nicht angezeigt.

Beispielsweise können Sie einer Bezeichnung Text hinzufügen, an die normalerweise Daten gebunden sind.

<Label Text="{Binding Name}" d:Text="Name!" />

In diesem Beispiel d:Textzeigt die XAML-Vorschau ohne die Bezeichnung nichts an. Stattdessen wird "Name!" angezeigt, wobei die Bezeichnung zur Laufzeit echte Daten enthält.

Sie können ein beliebiges Attribut für ein Xamarin.Forms Steuerelement verwendend:, z. B. Farben, Schriftgrößen und Abstände. Sie können es sogar dem Steuerelement selbst hinzufügen:

<d:Button Text="Design Time Button" />

In diesem Beispiel wird die Schaltfläche nur zur Entwurfszeit angezeigt. Verwenden Sie diese Methode, um einen Platzhalter für ein benutzerdefiniertes Steuerelement einzufügen, das vom XAML-Vorschauprogramm nicht unterstützt wird.

Anzeigen von Vorschaubildern zur Entwurfszeit

Sie können eine Entwurfszeitquelle für Bilder festlegen, die an die Seite gebunden oder dynamisch geladen werden. Fügen Sie in Ihrem Android-Projekt dem Ordner Resources > Drawable das Bild hinzu, das Sie im XAML-Vorschauprogramm anzeigen möchten. Fügen Sie das Image in Ihrem iOS-Projekt dem Ordner Ressourcen hinzu. Sie können dieses Bild dann zur Entwurfszeit im XAML-Vorschauprogramm anzeigen:

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

Entwurfszeitdaten für ListViews

ListViews sind eine beliebte Möglichkeit, Daten in einer mobilen App anzuzeigen. Ohne echte Daten lassen sie sich jedoch nur schwer visualisieren. Um Entwurfszeitdaten mit ihnen zu verwenden, müssen Sie ein Entwurfszeitarray erstellen, das als ItemsSource verwendet werden kann. Die XAML-Vorschau zeigt an, was sich in diesem Array in Ihrer ListView zur Entwurfszeit befindet.

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Item One</x:String>
                <x:String>Item Two</x:String>
                <x:String>Item Three</x:String>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding ItemName}"
                          d:Text="{Binding .}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

In diesem Beispiel wird eine ListView mit drei TextCells im XAML-Vorschauprogramm angezeigt. Sie können zu einem vorhandenen Datenmodell in Ihrem Projekt wechseln x:String .

Sie können auch ein Array von Datenobjekten erstellen. Beispielsweise können öffentliche Eigenschaften eines Monkey Datenobjekts als Entwurfszeitdaten erstellt werden:

namespace Monkeys.Models
{
    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
    }
}

Um die Klasse in XAML zu verwenden, müssen Sie den Namespace im Stammknoten importieren:

xmlns:models="clr-namespace:Monkeys.Models"

<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Der Vorteil besteht darin, dass Sie an das tatsächliche Modell binden können, das Sie verwenden möchten.

Alternative: Hartcodieren eines statischen ViewModel

Wenn Sie keine Entwurfszeitdaten zu einzelnen Steuerelementen hinzufügen möchten, können Sie einen Pseudodatenspeicher für die Bindung an Ihre Seite einrichten. Informationen zum Binden an ein statisches ViewModel in XAML finden Sie im Blogbeitrag von James Montemagno zum Hinzufügen von Entwurfszeitdaten .

Problembehandlung

Anforderungen

Entwurfszeitdaten erfordern eine Mindestversion von Xamarin.Forms 3.6.

IntelliSense zeigt Wellenlinien unter meinen Entwurfszeitdaten an

Dies ist ein bekanntes Problem und wird in einer kommenden Version von Visual Studio behoben. Das Projekt wird weiterhin fehlerfrei erstellt.

Der XAML-Vorschaumodus funktioniert nicht mehr.

Schließen Sie die XAML-Datei, und öffnen Sie sie wieder. Bereinigen Sie außerdem das Projekt, und erstellen Sie es neu.

Freigeben über