Utiliser des données au moment du design avec le concepteur XAML dans Visual Studio
Certaines dispositions sont difficiles à visualiser sans données. Dans ce document, nous allons examiner l’une des approches que les développeurs travaillant sur des projets bureautiques peuvent utiliser pour simuler des données dans le concepteur XAML. Cette approche est effectuée à l’aide de l’espace de noms « d: » ignoré existant. Avec cette approche, vous pouvez rapidement ajouter des données au moment du design à vos pages ou contrôles sans avoir à créer un ViewModel fictif complet, ou simplement tester comment une modification de propriété peut affecter votre application sans vous soucier que ces modifications affecteront vos builds de mise en production. Toutes les données d : sont utilisées uniquement par le Concepteur XAML et aucune valeur d’espace de noms ignorée n’est compilée dans l’application.
Notes
si vous utilisez Xamarin.Forms, consultez Données au moment du design Xamarin.Forms
Concepts de base des données au moment du design
Les données au moment du design sont des données fictives que vous définissez pour faciliter la visualisation de vos contrôles dans le Concepteur XAML. Pour commencer, ajoutez les lignes de code suivantes à l’en-tête de votre document XAML s’ils ne sont pas déjà présents :
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Après avoir ajouté les espaces de noms, vous pouvez placer d: devant n’importe quel attribut ou contrôle pour l’afficher uniquement dans le Concepteur XAML, mais pas au moment de l’exécution.
Par exemple, vous pouvez ajouter du texte à un TextBlock qui contient généralement des données liées.
<TextBlock Text="{Binding Name}" d:Text="Name!" />
Dans cet exemple, sans d:Text, le Concepteur XAML n’affiche rien pour le TextBlock. Au lieu de cela, il affiche « Name ! » où le TextBlock aura des données réelles au moment de l’exécution.
Vous pouvez utiliser d: avec des attributs pour n’importe quel contrôle UWP ou WPF .NET Core, comme les couleurs, les tailles de police et l’espacement. Vous pouvez même l’ajouter au contrôle lui-même.
<d:Button Content="Design Time Button" />
Dans cet exemple, le bouton apparaît uniquement au moment du design. Utilisez cette méthode pour placer un espace réservé pour un contrôle personnalisé ou essayer différents contrôles. Tous les attributs et contrôles d: sont ignorés pendant l’exécution.
Aperçu des images au moment du design
Vous pouvez définir une source au moment du design pour les images liées à la page ou chargées dynamiquement. Ajoutez l’image que vous souhaitez afficher dans le Concepteur XAML à votre projet. Vous pouvez ensuite afficher cette image dans le Concepteur XAML au moment du design :
<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />
Notes
L’image de cet exemple doit exister dans la solution.
Données au moment du design pour ListViews
ListViews est un moyen populaire d’afficher des données dans votre application de bureau. Toutefois, ils sont difficiles à visualiser sans aucune donnée. Vous pouvez utiliser cette fonctionnalité pour créer un élément ItemSource ou Items de données au moment du design inclus. Le Concepteur XAML affiche ce qui se trouve dans ce tableau dans votre ListView au moment du design.
Exemple WPF .NET Core
Pour utiliser le type system:String, veillez à inclure xmlns:system="clr-namespace:System;assembly=mscorlib dans votre en-tête XAML.
<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>
L’exemple précédent montre un ListView avec trois TextBlocks dans le Concepteur XAML.
Vous pouvez également créer un tableau d’objets de données. Par exemple, les propriétés publiques d’un objet de données City peuvent être construites en tant que données au moment du design.
namespace Cities.Models
{
public class City
{
public string Name { get; set; }
public string Country { get; set; }
}
}
Pour utiliser la classe en XAML, vous devez importer l’espace de noms dans le nœud racine.
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>
Ici, l’avantage est que vous pouvez lier vos contrôles à une version statique au moment du design de votre modèle.
Exemple UWP
x:Array n’est pas pris en charge dans UWP. Par conséquent, nous pouvons utiliser <d:ListView.Items> à la place. Pour utiliser le type system:String, veillez à inclure http://schemas.microsoft.com/winfx/2009/xaml dans votre en-tête XAML.
<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>
Utiliser des données au moment du design avec des types et des propriétés personnalisés
Cette fonctionnalité par défaut fonctionne uniquement avec les contrôles et propriétés de la plateforme. Dans cette section, nous allons suivre les étapes nécessaires pour vous permettre d’utiliser vos propres contrôles personnalisés en tant que contrôles au moment du design, une nouvelle fonctionnalité disponible pour les clients utilisant Visual Studio 2019 version 16.8 ou ultérieure. Il existe trois conditions requises pour activer ceci :
Un espace de noms xmlns personnalisé
xmlns:myControls="http://MyCustomControls"Version au moment du design de votre espace de noms. Pour ce faire, vous pouvez simplement ajouter /design à la fin.
xmlns:myDesignTimeControls="http://MyCustomControls/design"Ajout de votre préfixe au moment du design à mc:Ignorable
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d myDesignTimeControls"
Une fois que vous avez effectué toutes ces étapes, vous pouvez utiliser votre préfixe myDesignTimeControls pour créer vos contrôles au moment du design.
<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>
Création d’un espace de noms xmlns personnalisé
Pour créer un espace de noms xmlns personnalisé dans WPF .NET Core, vous devez mapper votre espace de noms XML personnalisé à l’espace de noms CLR dans lequel se trouvent vos contrôles. Pour ce faire, ajoutez l’attribut au niveau de l’assembly XmlnsDefinition dans votre fichier AssemblyInfo.cs. Le fichier se trouve dans la hiérarchie racine de votre projet.
[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]
Dépannage
Si vous rencontrez un problème qui n’est pas répertorié dans cette section, veuillez nous informer à l’aide de l’outil Signaler un problème.
Configuration requise
Les données au moment du design nécessitent Visual Studio 2019 version 16.7 ou ultérieure.
Prend en charge les projets bureautiques Windows qui ciblent Windows Presentation Foundation (WPF) pour .NET Core et UWP. Cette fonctionnalité est également disponible pour .NET Framework dans le Canal préversion. Pour l’activer, accédez à Outils>Options>Environnement>Fonctionnalités en préversion, sélectionnez Nouveau concepteur XAML WPF pour .NET Framework, puis redémarrez Visual Studio.
À compter de Visual Studio 2019 version 16.7, cette fonctionnalité fonctionne avec tous les contrôles in-the-box à partir de frameworks WPF et UWP. La prise en charge des contrôles tiers est désormais disponible dans la version 16.8.
Le Concepteur XAML a cessé de fonctionner
Essayez de fermer et de rouvrir le fichier XAML, et de nettoyer et de reconstruire votre projet.