Exemples de données sur la surface de conception et pour le prototypage

Il peut être impossible ou indésirable (peut-être pour des raisons de confidentialité ou de performances) pour que votre application affiche des données actives sur l’aire de conception dans Microsoft Visual Studio ou Blend pour Visual Studio. Pour que vos contrôles soient remplis avec des données (afin que vous puissiez travailler sur la disposition, les modèles et les autres propriétés visuelles de votre application), il existe différentes façons d’utiliser des exemples de données au moment du design. Les exemples de données peuvent également être très utiles et économiser du temps lorsque vous développez une application brouillon (ou prototype). Vous pouvez utiliser des exemples de données dans votre croquis ou prototype au moment de l’exécution pour illustrer vos idées sans se connecter à des données réelles et actives.

Exemples d’applications qui illustrent {Binding}

• Téléchargez l’application Bookstore1 .
• Téléchargez l’application Bookstore2 .

Définition de DataContext dans le balisage

Il s’agit d’une pratique assez courante pour les développeurs d’utiliser du code impératif (en code-behind) pour définir les dataContext de contrôle utilisateur à une instance de modèle d’affichage.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Mais si vous faites cela, votre page n’est pas aussi « personnalisable » que cela pourrait être. La raison est que lorsque votre page XAML est ouverte dans Visual Studio ou Blend pour Visual Studio, le code impératif qui attribue la valeur DataContext n’est jamais exécuté (en fait, aucun de votre code-behind n’est exécuté). Les outils XAML analysent bien sûr votre balisage et instancient tous les objets déclarés dans celui-ci, mais ils n’instancient pas réellement le type de votre page lui-même. Le résultat est que vous ne verrez pas de données dans vos contrôles ou dans la boîte de dialogue Créer une liaison de données , et que votre page sera plus difficile à mettre en forme et à mettre en page.

La première solution à essayer est de commenter l'DataContext et à définir l'DataContext dans le balisage de votre page à la place. Ainsi, vos données en direct s’affichent aussi bien au temps de conception qu'au temps d’exécution. Pour ce faire, ouvrez d’abord votre page XAML. Ensuite, cliquez pour sélectionner l'élément racine modifiable (généralement avec l'étiquette [Page]) dans la fenêtre Plan du document. Dans la fenêtre Propriétés , recherchez la propriété DataContext (à l’intérieur de la catégorie Commune) et modifiez-la. Sélectionnez le type de modèle d’affichage dans la boîte de dialogue Sélectionner un objet, puis cliquez sur OK.

Voici à quoi ressemble le balisage obtenu.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

Et voici à quoi ressemble maintenant la surface de conception, maintenant que vos liaisons peuvent être résolues. Notez que le sélecteur chemin d’accès dans la boîte de dialogue Créer une liaison de données est maintenant renseigné, en fonction du type DataContext et des propriétés auxquelles vous pouvez établir une liaison.

La boîte de dialogue Créer une liaison de données nécessite uniquement un type pour fonctionner, mais les liaisons ont besoin que les propriétés soient initialisées par des valeurs. Si vous ne souhaitez pas contacter votre service cloud au moment du design (en raison des performances, du paiement pour le transfert de données, des problèmes de confidentialité, ce genre de chose), votre code d’initialisation peut vérifier si votre application s’exécute dans un outil de conception (tel que Visual Studio ou Blend pour Visual Studio) et, dans ce cas, charger des exemples de données à utiliser au moment du design uniquement.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

Vous pouvez utiliser un localisateur de modèles d’affichage si vous devez passer des paramètres à votre code d’initialisation. Un localisateur de modèle d’affichage est une classe que vous pouvez placer dans les ressources d’application. Il a une propriété qui expose le modèle d’affichage, et le DataContext de votre page se lie à cette propriété. Un autre modèle que le localisateur ou le modèle de vue peut utiliser est l’injection de dépendances, qui peut construire un fournisseur de données au moment du design ou un fournisseur de données au moment de l’exécution (chacun implémentant une interface commune), le cas échéant.

« Exemples de données de classe » et attributs au moment du design

Si, pour une raison quelconque, aucune des options de la section précédente ne fonctionne pour vous, vous disposez toujours de nombreuses options de données au moment du design disponibles via les fonctionnalités des outils XAML et les attributs au moment du design. L’une des meilleures options est la fonctionnalité « Créer des données d'exemple de la classe » dans « Blend pour Visual Studio ». Vous pouvez trouver cette commande sur l’un des boutons en haut du panneau Données .

Il vous suffit de spécifier une classe à utiliser pour la commande. La commande effectue ensuite deux choses importantes pour vous. Tout d’abord, il génère un fichier XAML qui contient des exemples de données adaptés à l’hydratage d’une instance de votre classe choisie et de tous ses membres, de manière récursive (en fait, l’outil fonctionne également bien avec les fichiers XAML ou JSON). Ensuite, il remplit le panneau Données avec le schéma de votre classe choisie. Vous pouvez ensuite faire glisser des composants du panneau Data vers la surface de conception pour effectuer différentes tâches. Selon ce que vous faites glisser et où vous le déposez, vous pouvez ajouter des liaisons à des contrôles existants (à l’aide de {Binding}), ou créer de nouveaux contrôles et les lier en même temps. Dans les deux cas, l’opération définit également un contexte de données au moment du design (d :DataContext) pour vous (si elle n’est pas déjà définie) à la racine de mise en page de votre page. Ce contexte de données au moment du design utilise l’attribut d :DesignData pour obtenir ses exemples de données à partir du fichier XAML généré (ce qui, par la façon, vous êtes libre de trouver dans votre projet et de modifier afin qu’il contienne les exemples de données souhaités).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

Les différentes déclarations xmlns signifient que les attributs avec le préfixe d : sont interprétés uniquement au moment du design et sont ignorés au moment de l’exécution. Par conséquent, l’attribut d :DataContext affecte uniquement la valeur de la propriété DataContext au moment du design ; elle n’a aucun effet au moment de l’exécution. Vous pouvez même définir d :DataContext et DataContext dans le balisage si vous le souhaitez. d:DataContext remplacera à la conception, et d:DataContext remplacera à l'exécution. Ces mêmes règles de substitution s’appliquent à tous les attributs au moment du design et au moment de l’exécution.

L’attribut d :DataContext et tous les autres attributs au moment du design sont documentés dans la rubrique Design-Time Attributs , qui est toujours valide pour les applications de plateforme Windows universelle (UWP).

CollectionViewSource n’a pas de propriété DataContext , mais elle a une propriété Source . Par conséquent, il existe une propriété d :Source que vous pouvez utiliser pour définir des exemples de données uniquement au moment de la conception sur un CollectionViewSource.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Pour que cela fonctionne, vous devez disposer d'une classe nommée Recordings : ObservableCollection<Recording>et modifier l’exemple de fichier XAML de données afin qu’il contienne uniquement un objet Recordings (avec des objets Recording à l’intérieur), comme illustré ici.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Si vous utilisez un exemple de fichier de données JSON au lieu de XAML, vous devez définir la propriété Type .

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

Jusqu’à présent, nous utilisons d :DesignData pour charger des exemples de données au moment du design à partir d’un fichier XAML ou JSON. Une alternative à cela est l'extension de balisage d:DesignInstance, qui indique que la source à la conception est basée sur la classe spécifiée par la propriété Type. Voici un exemple.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

La propriété IsDesignTimeCreatable indique que l’outil de conception doit réellement créer une instance de la classe, ce qui implique que la classe a un constructeur public par défaut et qu’elle se remplit avec des données (réelles ou échantillon). Si vous ne définissez pas IsDesignTimeCreatable (ou si vous le définissez sur False), vous n’obtiendrez pas de données d'exemples affichées sur la surface de conception. Dans ce cas, tout l’outil de conception consiste à analyser la classe pour ses propriétés pouvant être liées et à les afficher dans le panneau Données et dans la boîte de dialogue Créer une liaison de données .

Exemples de données pour le prototypage

Pour le prototypage, vous souhaitez obtenir des exemples de données au moment de la conception et au moment de l’exécution. Pour ce cas d’usage, Blend pour Visual Studio dispose de la fonctionnalité Nouvel exemple de données . Vous pouvez trouver cette commande sur l’un des boutons en haut du panneau Données .

Au lieu de spécifier une classe, vous pouvez concevoir le schéma de votre exemple de source de données directement dans le panneau Données . Vous pouvez également modifier des exemples de valeurs de données dans le panneau Données : il n’est pas nécessaire d’ouvrir et de modifier un fichier (bien que vous puissiez toujours le faire si vous préférez).

La fonctionnalité New Sample Data utilise DataContext, et non d :DataContext, afin que les exemples de données soient disponibles lorsque vous exécutez votre croquis ou votre prototype, ainsi que pendant la conception. Et le panneau Data accélère vraiment vos tâches de conception et d'assemblage. Par exemple, le fait de faire glisser une propriété de collection à partir du panneau Data sur l’aire de conception génère un contrôle d’éléments liés aux données et les modèles nécessaires, prêts à être utilisés pour la construction et l'exécution.