Utiliser des données d’échantillon au moment du design avec le concepteur XAML dans Visual Studio

  • Article

Certains contrôles dépendants des données, tels que ListView, ListBox et DataGrid, sont difficiles à visualiser sans données. Dans cet article, nous allons passer en revue une nouvelle approche qui permet aux développeurs qui travaillent sur des projets .NET Core Windows Presentation Foundation (WPF) ou des projets WPF .NET Framework avec le concepteur XAML dans Visual Studio d’activer des exemples de données dans ces contrôles.

Configuration requise

La fonctionnalité Exemple de données nécessite Visual Studio 2019 version 16.10 ou ultérieure.

La fonctionnalité prend en charge les projets de bureau Windows qui ciblent WPF pour .NET Core ou .NET Framework lorsque vous utilisez le nouveau concepteur. Pour activer le nouveau concepteur pour .NET Framework :

  1. Accédez à Outils>Options>Environnement>Fonctionnalité d'évaluation.
  2. Sélectionnez Nouveau concepteur XAML WPF pour .NET Framework, puis redémarrez Visual Studio.

Notions de base de la fonctionnalité Données d’échantillon

La fonctionnalité Données d’échantillon est uniquement destinée à la visualisation au moment du design. Elle apparaît uniquement dans le concepteur XAML, pas dans l’application en cours d’exécution. À ce titre, elle est appliquée à la version au moment de la conception de la ItemsSource propriété d:ItemsSource. Les données d’échantillon ont besoin de l’espace de noms au moment du design pour fonctionner.

Notes

Pour en savoir plus sur les propriétés au moment du design dans XAML, consultez Propriétés au moment du design 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 utiliser d:ItemsSource="{d:SampleData}" pour activer des exemples de données dans votre contrôle ListView, Listboxou DataGrid . Par exemple :

<DataGrid d:ItemsSource="{d:SampleData}"/>

Screenshot that shows sample data on a data grid.

Dans cet exemple, sans d:ItemsSource="{d:SampleData}", le concepteur XAML afficherait une grille de données vide. Au lieu de cela, avec d:SampleData, il affiche désormais les données d’échantillon générées par défaut.

Par défaut, cinq éléments sont affichés. Toutefois, vous pouvez utiliser la propriété ItemCount pour spécifier le nombre d’éléments que vous souhaitez afficher. Par exemple : d:ItemsSource="{d:SampleData ItemCount=2}".

Données d’échantillon avec des modèles de données

La fonctionnalité Données d’échantillon fonctionne pour les contrôles ListBox, ListView ou DataGrid lorsque vous utilisez des modèles de données. La fonctionnalité analyse le contrôle DataTemplate et tente de générer les données appropriées pour celui-ci.

Les données d’échantillon sont générées uniquement pour les éléments dans les modèles de données qui utilisent des liaisons. Des données d’échantillon sont générées même si les liaisons n’ont pas encore de source. Par exemple :

<ListView d:ItemsSource="{d:SampleData ItemCount=3}">
     <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="50" Source="{Binding ProfilePicture}"/>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding FirstName}" Margin="5"/>
                    <Label Content="{Binding LastName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Screenshot that shows sample data in a list view with a data template.

Données d’échantillon avec des actions suggérées

Pour activer ou désactiver facilement des données d’échantillon pour un contrôle à partir du concepteur, vous pouvez utiliser la fonctionnalité Actions suggérées. Actions suggérées est une ampoule sur le concepteur qui apparaît en haut à droite lorsque vous sélectionnez un contrôle. Vous pouvez activer les données d’échantillon en sélectionnant votre contrôle, en sélectionnant l’ampoule, puis en sélectionnant Afficher les données d’échantillon. Par exemple :

Screenshot that shows sample data with Suggested Actions.

Données d’échantillon avec l’interface IValueConverter

La fonctionnalité Données d’échantillon ne prend pas entièrement en charge les convertisseurs ou l’interface IValueConverter. Toutefois, vous pouvez la faire fonctionner en effectuant l’une des opérations suivantes ou les deux :

  • Assurez-vous que votre fonction Convert peut gérer un scénario où la valeur est déjà votre type cible.
  • Implémentez la fonction ConvertBack qui reconvertira votre valeur en type d’origine.

Dépannage

Si vos données d’échantillon n’affichent rien ou ne parviennent pas à afficher le type correct, vous pouvez essayer d’actualiser le concepteur ou de fermer et de rouvrir la page.

Si vous rencontrez un problème qui n’est pas répertorié dans cette section ou qui ne peut pas être résolu en actualisant la page, faites-le nous savoir à l’aide de l’outil Signaler un problème.

Contenu connexe