Verwenden von Entwurfszeitdaten mit dem XAML-Designer in Visual Studio
Einige Layouts sind ohne Daten schwer zu visualisieren. In diesem Dokument lernen Sie einen der Ansätze kennen, die Entwickler, die an Desktopprojekten arbeiten, zum Simulieren von Daten im XAML-Designer verwenden können. Hierfür wird der vorhandene ignorierbare Namespace „d:“ verwendet. Mit diesem Ansatz können Sie Ihren Seiten oder Steuerelementen schnell Entwurfszeitdaten hinzufügen, ohne dass ein vollständiges simuliertes ViewModel erstellt werden muss. Außerdem können Sie einfach testen, wie eine Eigenschaftsänderung sich auf Ihre Anwendung auswirken kann, ohne befürchten zu müssen, dass sie sich auf die Releasebuilds auswirkt. Alle d:-Daten werden nur vom XAML-Designer verwendet, und es werden keine Werte aus ignorierbaren Namespaces in die Anwendung kompiliert.
Hinweis
Wenn Sie Xamarin.Forms verwenden, finden Sie weitere Informationen im Artikel zu Entwurfszeitdaten in Xamarin.Forms.
Grundlegende Informationen zu Entwurfszeitdaten
Entwurfszeitdaten sind simulierte Daten, die Sie festlegen, um die Steuerelemente im XAML-Designer besser visualisieren zu können. Fügen Sie zunächst dem Header Ihres XAML-Dokuments die folgenden Codezeilen hinzu, wenn sie nicht bereits vorhanden sind:
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Nach dem Hinzufügen der Namespaces können Sie vor alle Attribute oder Steuerelemente d: schreiben, um sie nur im XAML-Designer anzuzeigen und nicht zur Laufzeit.
Beispielsweise können Sie Text in einem TextBlock-Element hinzufügen, an das normalerweise Daten gebunden sind.
<TextBlock Text="{Binding Name}" d:Text="Name!" />
In diesem Beispiel würde der XAML-Designer ohne d:Text für das TextBlock-Element nichts anzeigen. Stattdessen zeigt es „Name!“ an, wobei der Textblock zur Laufzeit echte Daten enthält.
Sie können d: mit Attributen für jedes beliebige UWP- oder WPF-.NET Core-Steuerelement verwenden, z. B. für Farben, Schriftgrade und Abstände. Sie können „d:“ sogar dem Steuerelement selbst hinzufügen.
<d:Button Content="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 anzuzeigen oder um verschiedene Steuerelemente zu testen. Alle d:-Attribute und -Steuerelemente werden zur Laufzeit ignoriert.
Anzeigen von Vorschaubildern zur Entwurfszeit
Sie können für Bilder, die an die Seite gebunden sind oder dynamisch geladen werden, eine Quelle für die Entwurfszeit festlegen. Fügen Sie das Bild, das Sie im XAML-Designer anzeigen möchten, dem Projekt hinzu. Sie können dieses Bild dann zur Entwurfszeit im XAML-Designer anzeigen:
<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />
Hinweis
Das Bild in diesem Beispiel muss sich in der Projektmappe befinden.
Entwurfszeitdaten für ListView-Elemente
ListView-Elemente sind eine beliebte Möglichkeit zum Anzeigen von Daten in Desktop-Apps. Allerdings sind sie ohne Daten schwer zu visualisieren. Sie können dieses Feature verwenden, um ein ItemSource- oder Item-Inlineelement für die Entwurfszeitdaten zu erstellen. Der XAML-Designer zeigt den Inhalt dieses Arrays in Ihrem ListView-Element zur Entwurfszeit an.
WPF .NET Core-Beispiel
Wenn Sie den Typ „system:String“ verwenden möchten, denken Sie daran, xmlns:system="clr-namespace:System;assembly=mscorlib in den XAML-Header aufzunehmen.
<StackPanel>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type system:String}">
<system:String>Item One</system:String>
<system:String>Item Two</system:String>
<system:String>Item Three</system:String>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
Das obige Beispiel zeigt ein ListView-Element mit drei TextBlock-Elementen im XAML-Designer.
Sie können auch ein Array von Datenobjekten erstellen. Beispielsweise können öffentliche Eigenschaften eines City-Datenobjekts als Entwurfszeitdaten erstellt werden.
namespace Cities.Models
{
public class City
{
public string Name { get; set; }
public string Country { get; set; }
}
}
Wenn Sie die Klasse in XAML verwenden möchten, müssen Sie den Namespace in den Stammknoten importieren.
xmlns:models="clr-namespace:Cities.Models"
<StackPanel>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type models:City}">
<models:City Name="Seattle" Country="United States"/>
<models:City Name="London" Country="United Kingdom"/>
<models:City Name="Panama City" Country="Panama"/>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
<TextBlock Text="{Binding Country}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
Der Vorteil dieser Vorgehensweise ist, dass Sie Ihre Steuerelemente an eine statische Entwurfszeitversion Ihres Modells binden können.
UWP-Beispiel
x:Array wird in UWP nicht unterstützt. Verwenden Sie daher stattdessen <d:ListView.Items>. Wenn Sie den Typ „system:String“ verwenden möchten, denken Sie daran, http://schemas.microsoft.com/winfx/2009/xaml in den XAML-Header aufzunehmen.
<StackPanel>
<ListView>
<d:ListView.Items>
<system:String>Item One</system:String>
<system:String>Item Two</system:String>
<system:String>Item Three</system:String>
</d:ListView.Items>
</ListView>
</StackPanel>
Verwenden von Entwurfszeitdaten mit benutzerdefinierten Typen und Eigenschaften
Dieses Feature funktioniert standardmäßig nur mit Plattformsteuerelementen und -eigenschaften. In diesem Abschnitt werden die Schritte beschrieben, die erforderlich sind, damit Sie Ihre eigenen benutzerdefinierten Steuerelemente als Designzeit-Steuerelemente verwenden können. Dies ist eine neue Funktion, die Kunden in der Version 16.8 oder höher von Visual Studio 2019 zur Verfügung steht. Es gibt drei Anforderungen, um diese Funktion nutzen zu können:
benutzerdefinierter xmlns-Namespace
xmlns:myControls="http://MyCustomControls"Entwurfszeitversion des Namespace: Fügen Sie hierzu einfach „/design“ an das Ende an.
xmlns:myDesignTimeControls="http://MyCustomControls/design"Hinzufügen des Entwurfszeitpräfixes zu „mc:Ignorable“
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d myDesignTimeControls"
Nachdem Sie alle Schritte ausgeführt haben, können Sie das Präfix myDesignTimeControls verwenden, um die Designzeit-Steuerelemente zu erstellen.
<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>
Erstellen eines benutzerdefinierten xmlns-Namespace
Sie müssen den benutzerdefinierten XML-Namespace dem CLR-Namespace zuordnen, in dem sich die Steuerelemente befinden, um einen benutzerdefinierten xmlns-Namespace in WPF .NET Core zu erstellen. Dies erreichen Sie, indem Sie das XmlnsDefinition-Attribut auf Assemblyebene in Ihrer AssemblyInfo.cs-Datei hinzufügen. Die Datei befindet sich im Stammverzeichnis des Projekts.
[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]
Problembehandlung
Wenn ein Problem auftritt, das in diesem Abschnitt nicht aufgeführt ist, informieren Sie uns über das Tool Problem melden.
Anforderungen
Für Entwurfszeitdaten ist Visual Studio 2019, Version 16.7 oder höher erforderlich.
Windows-Desktopprojekte für Windows Presentation Foundation (WPF) für .NET Core und für UWP werden unterstützt. Dieses Feature ist auch im Vorschaukanal für .NET Framework verfügbar. Navigieren Sie zu Extras>Optionen>Umgebung>Vorschaufeatures, klicken Sie auf New WPF XAML Designer for .NET Framework (Neuer WPF-XAML-Designer für .NET Framework), und starten Sie anschließend Visual Studio neu, um das Feature zu aktivieren.
Ab Visual Studio 2019, Version 16.7 funktioniert dieses Feature für alle Standardsteuerelemente aus WPF- und UWP-Frameworks. Unterstützung für Steuerelemente von Drittanbietern ist jetzt im Release 16.8 verfügbar.
Der XAML-Designer 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.