Partager via

Utiliser des exemples de données au moment du design avec le Concepteur XAML dans Visual Studio

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

Exigences

La fonctionnalité Exemple de données nécessite la version de Visual Studio 2019 16.10 ou version 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.

Notions de base de la fonctionnalité Exemples de données

La fonctionnalité Exemple de données est destinée uniquement à la visualisation au moment du design. Il apparaît uniquement dans le concepteur XAML, et non dans l’application en cours d’exécution. À ce titre, elle est appliquée à la version au moment du design 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.

Remarque

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 les exemples de données dans votre contrôle ListView, Listbox ou DataGrid. Par exemple:

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

Capture d’écran montrant des exemples de données sur une grille de données.

Dans cet exemple, sans d:ItemsSource="{d:SampleData}", le Concepteur XAML affiche une grille de données vide. Au lieu de cela, avec d:SampleData, il affiche désormais des exemples de données par défaut générés.

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 à afficher. Par exemple : d:ItemsSource="{d:SampleData ItemCount=2}".

Exemples de données avec des modèles de données

La fonctionnalité Exemple de données fonctionne pour les contrôles ListBox, ListViewou 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.

Les exemples de données sont générés uniquement pour les éléments des modèles de données qui utilisent des liaisons. Des exemples de données sont générés 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>

Capture d’écran montrant des exemples de données dans un affichage de liste avec un modèle de données.

Exemples de données avec actions suggérées

Pour activer ou désactiver facilement des données d'exemple pour un contrôle depuis le concepteur, vous pouvez utiliser la fonctionnalité Actions suggérées. Actions suggérées est une ampoule sur le concepteur qui s’affiche en haut à droite quand vous sélectionnez un contrôle. Vous pouvez activer des exemples de données en sélectionnant votre contrôle, en sélectionnant l’ampoule, puis en sélectionnant Afficher les exemples de données. Par exemple:

Capture d’écran montrant des exemples de données avec des actions suggérées.

Exemples de données avec l’interface IValueConverter

La fonctionnalité Sample Data ne prend pas entièrement en charge les convertisseurs ni l’interface IValueConverter. Toutefois, vous pouvez faire en sorte qu'il fonctionne en effectuant une ou les deux opérations suivantes :

  • 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 convertit votre valeur en type d’origine.

Dépannage

Si votre exemple de données n’affiche rien ou ne parvient 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, veuillez nous informer à l’aide de l’outil Signaler un problème.

Contenu connexe

  • Last updated on