Partager via

Concevoir des applications Windows Store avec Blend pour Visual Studio 2013

  • Article

Blend for Visual Studio est une collection d'outils de conception inclus avec Visual Studio 2013 qui permet de concevoir visuellement des applications Windows Store générées à l'aide de JavaScript, VB, C# ou C++.

Blend s'installe lors de l'installation de Visual Studio. Pour rechercher Blend, tapez Blend dans la zone Rechercher.

Vous pouvez également ouvrir un projet dans Blend à partir de Visual Studio. Une fois le projet ouvert dans Visual Studio, puis appliquez l’une des méthodes suivantes :

  • Dans le menu Affichage, cliquez sur Ouvrir dans Blend.

  • Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis cliquez sur Ouvrir dans Blend.

    Commande Ouvrir dans Blend dans Visual Studio

Pour les applications Windows Store générées à l'aide de JavaScript, Blend comprend une suite d'outils HTML5 et CSS3 qui sert à effectuer des tâches. Vous pouvez, par exemple, créer rapidement des animations CSS3, définir et gérer des styles et déboguer du code HTML et CSS. Pour plus d'informations, consultez « Concevoir des applications Windows Store (HTML) » plus loin dans cet article.

Pour créer une première application Windows Store HTML avec Blend, consultez Créer votre première application Windows Store avec Blend, partie 1 : la page maître (HTML et JavaScript).

Pour les applications Windows Store générées à l'aide de VB, C# ou C++, Blend comprend une suite d'outils XAML qui permet de mieux effectuer certaines tâches, par exemple appliquer des styles à des contrôles, créer et définir des modèles et créer une liaison avec des exemples de données. Pour plus d'informations, consultez « Concevoir des applications Windows Store (XAML) » plus loin dans cet article.

Pour créer une première application Windows Store HTML avec Blend, consultez Créer votre première application Windows Store avec Blend, partie 1 : la page maître (XAML et C#).

Pour plus d'informations sur les nouveautés de Blend, consultez Nouveautés pour les développeurs HTML dans Blend pour Visual Studio 2013 et Nouveautés de Visual Studio 2013 Preview pour créer des applications Windows Store XAML sur le blog de Visual Studio.

Utilisation de Blend avec Visual Studio

Visual Studio comporte des outils essentiels pour développer des applications Windows Store, notamment l'outil de gestion des licences des développeurs, le concepteur de manifeste et les outils d'encodage et d'empaquetage qui permettent de soumettre votre application au Windows Store.

En utilisant Blend conjointement avec Visual Studio, vous pouvez tirer parti d'outils de conception HTML et XAML puissants dans Blend pour personnaliser plus rapidement et plus facilement l'apparence de votre application. Vous pouvez vous concentrer sur la conception visuelle de votre application de bas en haut, notamment la structure, la disposition, les vues de données et l'apparence de votre application, au lieu de vous concentrer sur la syntaxe de votre code.

Pour plus d'informations sur l'utilisation de Blend avec Visual Studio, notamment les flux de travail conseillés et les meilleures pratiques, consultez Basculer vers Visual Studio et revenir.

Vous pouvez ouvrir et modifier les projets d'application Windows Store créés dans Visual Studio dans Blend, et ouvrir et modifier les applications Windows Store créées dans Blend dans Visual Studio.

Vous pouvez facilement basculer entre Blend et Visual Studio tout en travaillant sur un projet. Pour basculer de Visual Studio à Blend, cliquez avec le bouton droit sur le projet dans l'Explorateur de solutions, puis sur Ouvrir dans Blend. Pour basculer de Blend à Visual Studio, cliquez avec le bouton droit sur le projet dans le panneau Projets, puis sur Modifier dans Visual Studio.

Conseil

Vous pouvez ouvrir le même fichier projet simultanément dans Blend et dans Visual Studio sur le même ordinateur. Lorsque vous enregistrez une modification apportée à un fichier dans un outil puis basculez vers l'autre outil, vous êtes invité à recharger le fichier afin de consulter la dernière version du projet.

Concevoir des applications Windows Store (JavaScript & HTML)

Avec Blend, vous pouvez créer une nouvelle application Windows Store en utilisant l'un des modèles de projet HTML intégrés, ou ouvrir une application Windows Store existante créée dans Visual Studio. À l'instar de toute application Windows native, une application Windows Store générée à l'aide du code HTML5, CSS3 et JavaScript dispose d'un accès direct à la plateforme sous-jacente et peut partager des informations avec d'autres applications.

Vous pouvez modifier rapidement l'apparence de votre application à l'aide d'un ensemble puissant d'outils de conception HTML5 et CSS3 pour :

  • Créer et modifier des éléments HTML   Faites glisser les éléments HTML et les contrôles d'application Windows du panneau Composants vers la planche graphique, puis modifiez la hiérarchie, définissez les propriétés et appliquez les styles directement dans l'interface utilisateur. Consultez Créer un modèle d'élément et lui appliquer un style.

  • Afficher les états d'exécution   Utilisez le mode interactif pour accéder à votre application puis la modifier dans les états qui, sinon, ne seraient disponibles qu'au moment de l'exécution. Utiliser le mode interactif.

  • Afficher les données au moment du design   Créez une liaison avec les données et affichez-les dans votre application Windows Store afin de modifier plus facilement l'apparence de vos données au moment de l'exécution. Consultez Créer une liaison avec des données de film.

  • Incorporer des polices personnalisées   Utilisez le gestionnaire de familles de polices pour incorporer des polices personnalisées dans votre application Windows Store. Consultez Incorporer une police personnalisée.

  • Créer des animations CSS3   Créez et modifiez des animations CSS3 à l'aide de la chronologie d'animation d'images clés.

  • Définir et gérer des styles   Créez rapidement des styles CSS à l'aide du panneau Règles de style, puis utilisez le panneau Propriétés CSS pour appliquer les définitions de style, afficher la cascade CSS pour un élément (la règle virtuelle Propriétés gagnantes), ou déterminer comment Windows 8.1 calculera les valeurs de propriété CSS pour chaque élément (la règle virtuelle Valeurs calculées). Consultez Définir des règles de style CSS.

  • Déboguer du code HTML et CSS    Déboguez visuellement votre code HTML et CSS directement dans Blend en identifiant et résolvant les erreurs affichées dans le panneau Résultats.

Pour plus d'informations sur les nouveautés de la conception d'applications Windows Store créées avec JavaScript dans Blend, consultez le blog de Visual Studio.

Concevoir des applications Windows Store (VB/C#/C++ et XAML)

Avec Blend, vous pouvez créer une nouvelle application Windows Store en utilisant l'un des modèles de projet XAML intégrés, ou ouvrir une application Windows Store existante créée dans Visual Studio. À l'instar de toute application Windows native, une application Windows Store générée à l'aide de code XAML et VB, C# ou C++ dispose d'un accès direct à la plateforme sous-jacente et peut partager des informations avec d'autres applications.

Vous pouvez modifier rapidement l'apparence de votre application à l'aide d'un ensemble puissant d'outils de conception XAML pour :

  • Concevoir une disposition personnalisée   Utilisez des outils de disposition puissants, notamment des modèles, des contrôles intégrés, des règles et la prise en charge de l'alignement pour concevoir des dispositions personnalisées pour votre application Windows Store. Consultez Appliquer un style à la vue de données.

  • Créer des contrôles et leur appliquer un style   Faites glisser les contrôles sur l'aire de conception, puis appliquez-leur un style en modifiant les propriétés directement dans l'interface utilisateur. Appliquer un style à des images et à des éléments.

  • Créer et modifier des modèles de contrôle   Utilisez les outils de modification des modèles pour créer des modèles de contrôle personnalisés réutilisables dans l'ensemble de votre projet. Ajoutez-les à votre bibliothèque de contrôles pour les réutiliser dans d'autres projets que le projet en cours. Consultez Créer une image dans un contrôle utilisateur.

  • Créer et modifier des modèles de données   Créez des modèles qui définissent la façon dont vous souhaitez que vos données s'affichent dans votre application. Consultez Créer des liaisons de données et leur appliquer un style.

  • Afficher des exemples de données et des données au moment de la conception   Créez une liaison avec les données et affichez-les dans votre application Windows Store afin de modifier plus facilement l'apparence de vos données au moment de l'exécution. Consultez Définir le DataContext.

  • Utiliser les comportements pour ajouter une interactivité   Ajoutez une interactivité à votre application en faisant glisser un comportement intégré sur l'objet sur l'aire de conception et en modifiant les propriétés pour répondre à vos besoins. Consultez Ajouter un comportement intégré.

  • Modifier le balisage XAML   En plus des outils d'interface utilisateur qui permettent de créer et de modifier facilement des données XAML sans toucher au code, Blend comporte un éditeur XAML puissant qui permet de modifier directement le balisage XAML rapidement et facilement. Consultez Déboguer XAML dans Blend.

Pour plus d'informations sur les nouveautés de la conception d'applications Windows Store créées avec C#, C++ et VB dans Blend, consultez le blog de Visual Studio.

Ressources

En plus de la documentation Blend disponible dans le Centre de développement Windows, vous pouvez consulter de nombreuses ressources pour vous familiariser avec la création et la conception d'applications Windows Store, notamment :