Cet article a fait l'objet d'une traduction automatique.

XAML et C++

Présentation de C++/CX et XAML

Andy Rich

Télécharger l'exemple de code

Tout d'abord, le code est idéal pour concevoir un algorithme de tri rapide, mais il n'est pas nécessairement le meilleur moyen de faire une interface utilisateur attrayante et la technologie de l'interface utilisateur fournie par Microsoft pour les développeurs C++ a reflété cette préférence.La dernière amélioration importante à la technologie Microsoft UI pour C++, sorti en 2008, a été un nouvel ensemble de contrôles MFC qui fourni le style des contrôles de ruban.Avant que Windows Forms, une technologie d'interface utilisateur Microsoft .NET Framework tout d'abord sorti avec Visual Studio .NET en février 2002.Tout puissant, tous deux de ces technologies étaient principalement axés sur le code sous-jacent qui ont créé les éléments d'interface utilisateur et a exigé le couplage des données et l'interface utilisateur.

Ces dernières années, les développeurs c# et Visual Basic ont bénéficié d'améliorations importantes à leur technologie d'interface utilisateur sous la forme de cadres de l'interface utilisateur basée sur XAML (Windows Presentation Foundation, ou WPF et Silverlight).Ces cadres a apporté les développeurs de nouvelles options de conception d'interface utilisateur, en leur donnant la liberté à leurs algorithmes de code sans vous soucier de comment l'interface utilisateur serait présentée et la liberté de concevoir leur interface utilisateur sans se soucier du code derrière elle.Enfin, avec Windows 8, les développeurs C++ peuvent tirer parti d'une infrastructure d'interface utilisateur moderne, basée sur XAML pour créer des applications pour Windows 8.

Pourquoi XAML ?

XAML est un langage de balisage basé sur XML qui permet de définir l'apparence de votre application sans avoir besoin de comprendre comment l'interface utilisateur est construit dans le code.Windows Runtime (WinRT) analyse ces informations au moment de l'exécution, construit les classes de contrôle approprié et génère l'arborescence d'interface utilisateur.Votre code peut manipuler ces objets et, lorsque écrit correctement, l'apparence de l'interface utilisateur peut être significativement modifiée sans toucher le code associé à tous les.Cela facilite une division du travail entre un développeur qui travaille sur le code dans les coulisses et un concepteur d'interface utilisateur qui met l'accent sur l'aspect de l'application elle-même.

Visual Studio 2012 est également étroitement intégré avec le mélange, une puissance­outils de concepteur de ful spécifiquement optimisée pour l'utilisation de XAML et du code HTML.Mélange fournit davantage de contrôle WYSIWYG (y compris la conception de l'animation) et expose plus de propriétés sur les objets XAML que le concepteur intégré de Visual Studio.

Pourquoi C + c++ / CX ?

Les développeurs ont une gamme de technologies à choisir lorsque vous écrivez une application Windows Store : HTML et JavaScript, c# ou Visual Basic avec XAML et C++.En C++, vous pouvez créer des applications avec C + c++ / CX et XAML ou DirectX, ou une combinaison des deux.En outre, vous pouvez créer une application qui est un hybride de ces technologies, telles que l'écriture d'un composant dans C + c++ / CX qui sert ensuite d'un app Store Windows construit avec JavaScript/HTML.

Il y a un certain nombre de raisons pour que vous choisissiez de C++ pour écrire une application Windows Store.Tout d'abord, le C + c++ / CX liaison au service d'exécution Windows est 100 % natifs et contenant des références.Cela signifie que très peu de traitement supplémentaire.En second lieu, C++ a la capacité de tirer parti des bibliothèques existantes (telles que coup de pouce).Enfin, C++ prend en charge les surfaces Direct3D et Direct2D natives à l'intérieur du magasin Windows apps, qui permet de construire des jeux et autres applications gourmandes en ressources graphiques avec des performances exceptionnelles.Faible surcharge et haute performance ne signifie pas seulement que votre application s'exécute plus rapidement. Il peut aussi être plus maigre, en utilisant moins d'instructions pour accomplir les mêmes tâches, qui réduit la consommation d'énergie et donne à vos utilisateurs meilleure autonomie de batterie.

Bonjour monde de C + c++ / CX et XAML

Visual Studio 2012 fournit un certain nombre de modèles qui illustrent des fonctionnalités avancées de Windows Store apps.Le modèle de grille est une application riche en fonctionnalités avec plusieurs vues, prend en charge pour les transitions de paysage et portrait, avancées de liaison de données et suspendre et reprendre les capacités.Cependant, il n'est pas très approprié pour démontrer les principes de base.Au lieu de cela, créez une nouvelle application C++ Windows Store en utilisant le modèle vierge App (XAML).

Une fois l'application créée, trouver MainPage.xaml dans Explorateur de solutions et ouvrez-le.Il s'ouvre pour modification dans le concepteur XAML intégré, qui est divisé en deux volets : le mode Design affiche un rendu de l'interface utilisateur et l'affichage XAML présente le code.Mise à jour ou l'autre volet met à jour l'autre aussi bien.Cela vous donne la liberté de faire glisser des contrôles pour faciliter le montage ou pour contrôler précisément la disposition en éditant le code.

Ouvrez la boîte à outils, développez contrôles communs de XAML et faites glisser un contrôle TextBlock sur l'aire de conception.Ouvrez la fenêtre Propriétés, et vous trouverez des options pour le style de cette instance du contrôle TextBlock.Dans le champ nom, nommez le TextBlock « myText. » Cela correspond à l'attribut x: Name en XAML.Cet attribut permet de référencer le TextBlock par nom, ailleurs dans le fichier XAML et dans le codebehind.Et, parce que c'est le seul contrôle sur la page, vous pourriez faire ainsi très large : Développez la catégorie de texte et modifier la taille de la police à 72px.Le résultat final doit ressembler à Figure 1.Vous remarquerez que lorsque vous effectuez ces modifications dans l'inspecteur des propriétés, le balisage XAML est également mis à jour.

Figure 1 contrôle de TextBlock et XAML connexe

Ensuite, faites glisser un contrôle Button depuis la boîte à outils et placez-la à gauche du TextBlock.Afficher les événements disponibles pour le contrôle Button en cliquant sur l'icône d'éclair à la droite du champ nom dans la fenêtre Propriétés et puis double-cliquez sur le champ pour l'événement Click.Visual Studio génère un rappel approprié automatiquement et commute l'affichage au codebehind pour cet événement.Dans la vue source XAML, la balise générée doit ressembler à ce qui suit :

<Button Click="Button_Click_1" />

Vous pourriez faire la même chose dans le code en ajoutant le clic = attribut de la balise XAML et puis donnez un nom ou permettant la saisie semi-automatique sélectionner un pour vous. Quoi qu'il en soit, vous pouvez cliquez droit sur l'événement et choisissez naviguer à événement gestionnaire pour naviguer dans le codebehind.

Maintenant, ajoutez le code suivant pour le rappel :

this->myText->Text =
    "Hello World from XAML!";

Générer et exécute l'application pour vérifier que lorsque vous cliquez sur le bouton, le rappel modifie le texte dans le TextBlock (Figure 2).

Figure 2 mise à jour de TextBlock

Beaucoup les coulisses ici, alors je veux passer du temps à déconstruire la magie qui fait de ce lieu.

Ce qui est C + c++ / CX ?

C + c++ / CX est l'extension du langage fournit une interopérabilité entre le code C++ natif et l'exécution de Windows. C'est une liaison entièrement native qui permet de définir, instancier et utiliser des objets tout en offrant un accès à des fonctionnalités C++ natif et la syntaxe avec lequel vous êtes familier du Runtime. Figure 3 répertorie les concepts de base. (Bien que C + c++ / CX est semblable à bien des égards au C + + / Common Language Infrastructure ou CLI, syntaxe, c'est une extension du langage distinct et entièrement autochtone.)

Figure 3 C + c++ / CX Concepts

Partiel de Classes et de XAML Code de génération dans l'Explorateur de Solution, accédez à MainPage.xaml.h, qui contient une définition partielle de la classe MainPage XAML :

public ref class MainPage sealed
{
public:
  MainPage();
protected:
  virtual void OnNavigatedTo(
    Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;
private:
  void Button_Click_1(
    Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
};

C'est la partie de la définition que vous pouvez éditer et modifier (par exemple, si vous souhaitez ajouter des données membres à la classe MainPage). Notez que la déclaration du gestionnaire d'événement Button_Click_1 a été insérée dans la définition de cette classe par Visual Studio lorsque vous avez double-cliqué sur l'événement Click plus tôt.

Faites un clic droit sur le nom de la classe MainPage et choisissez atteindre la définition. Vous devriez voir deux résultats : la définition MainPage.xaml.h et une définition partielle dans MainPage.g.h. La deuxième définition est générée pendant une génération, lorsque le compilateur XAML analyse MainPage.xaml et génère MainPage.g.h. MainPage.xaml.cpp comprend MainPage.xaml.h, qui comprend à son tour ce fichier généré. Ces définitions de classe sont combinées pour produire la classe finale. Cette technique permet aux utilisateurs et le générateur de code pour injecter des informations dans la définition de classe.

Accédez à la définition partielle de MainPage trouvé dans MainPage.g.h :

partial ref class MainPage : public ::Windows::UI::Xaml::Controls::Page,
  public ::Windows::UI::Xaml::Markup::IComponentConnector
{
public:
  void InitializeComponent();
  virtual void Connect(int connectionId, ::Platform::Object^ target);
private:
  bool _contentLoaded;
  private: ::Windows::UI::Xaml::Controls::TextBlock^ myText;
};

Vous pouvez voir que dans ce généré fichier, le x: Name = « myText » attribut sur le TextBlock a causé le compilateur XAML générer un membre de la classe nommé myText. Ici, vous pouvez également observer que MainPage hérite de la classe de base de XAML Windows Page et implémente l'interface IComponentConnector. (IComponent­connecteur et son procédé associé Connect sont qu'associer l'événement Click pour le rappel de Button_Click_1.)

Liaison de données en C + c++ / CX la liaison de données est un concept puissant qui vous permet d'associer facilement code et les données de votre interface utilisateur. Il permet également aux modèles de conception de haut niveau tels que Model-View-ViewModel (MVVM) qui fournissent l'excellente abstraction entre les données, le code et l'interface utilisateur.

C + c++ / CX, vous pouvez activer une classe à être dépendants de plusieurs façons :

• Attribut de la classe avec l'attribut peut être liée
• Implémentez l'interface ICustomPropertyProvider
• Mettre en œuvre l'IMap < String ^, Object ^ > interface

Je me concentrerai sur l'attribut pouvant être liée, mais je l'ai mentionné les autres interfaces parce que dans certains scénarios, ils ne sont plus appropriées. En particulier, l'attribut peut être liée génère des informations de liaison de données appropriées uniquement si la classe lié aux données est marquée publique. Chaque fois que vous souhaitez une classe privée à être pouvant être liées, vous devez implémenter une des autres interfaces répertoriées.

Dans votre application, ajoutez une nouvelle classe en un clic droit sur le projet et en choisissant Add, la classe pour faire apparaître l'Assistant Ajout de classe. Il n'y a pas d'option pour un C + c++ / classe CX (qui est ce dont vous avez besoin), ajoutez une classe native, en nommant cette personne. Visual Studio doit générer une classe Person.h et Person.cpp et ajoutez-les à votre projet.

La classe Person a besoin de plusieurs modifications (démontré en Figure 4) :

Figure 4 définition de la classe Person

// person.h
#pragma once
namespace App12 {
  [Windows::UI::Xaml::Data::Bindable]
  public ref class Person sealed
  {
  public:
    Person(void);
    property Platform::String^ Name;
    property Platform::String^ Phone;
  };
}
// person.cpp
#include "pch.h"
#include "person.h"
using namespace App12;
Person::Person(void)
{
  Name = "Maria Anders";
  Phone = "030-0074321";
}

• La définition de classe passe de classe à classe ref.
• La classe ref est marquée comme public et sealed. « Public » est nécessaire pour que le compilateur XAML trouver cette classe et de générer des informations de liaison de données. En outre, C + c++ / CX ne supporte pas les classes unsealed publics sans une classe de base pour la classe doit être scellée.
• Le ~Person(void) destructor est supprimée, car aucun destructeur n'est nécessaire pour cette classe.
• La classe est déplacée dans l'espace de noms utilisé par l'application (dans l'exemple illustré dans Figure 4, l'espace de noms est "App12", mais cela variera en fonction du nom que vous avez donné votre projet). Pour le Bindable attribuent à travailler (et pour satisfaire aux règles de métadonnées WinRT), la classe doit être dans un espace de noms.
• La classe est attribuée avec [Windows::UI::Xaml::Data::Bin­nibles]. Cet attribut indique au compilateur XAML qu'il doit générer des informations de liaison de données pour la classe.
• Deux propriétés de type Platform::String ^ : Nom et téléphone sont ajoutés. (Seules les propriétés peuvent être liés aux données.)

Maintenant, dans MainPage.xaml, ajoutez un deuxième TextBlock sous la première et style ça de la même façon. Dans le code XAML, modifiez l'attribut de texte des deux TextBlocks texte = « {Binding Name} » et Text = « {Binding téléphone} », respectivement. Cela indique à l'interface utilisateur pour trouver les propriétés nom et téléphone sur l'objet lié aux données et de les appliquer au champ de texte de la classe. Le code XAML doit ressembler à Figure 5. (Lorsque les attributs de texte sont modifiés pour être lié aux données, ils n'ont plus contenu lorsqu'elles sont présentées dans le concepteur ; Cela est prévu.)

Liaison de données de la figure 5 en XAML

Ensuite, dans MainPage.xaml.h, incluent Person.h et ajoutez un datamember privé du type Person ^ à la classe MainPage. Nommez-le m_Person. Enfin, dans MainPage.xaml.cpp, dans la méthode OnNavigatedTo, ajoutez le code suivant :

m_Person = ref new Person;
this->DataContext = m_Person;

Le XAML runtime appelle la méthode OnNavigatedTo juste avant que cette page s'affiche sur l'écran, donc c'est un endroit approprié pour mettre en place ce datacontext. Ce code va créer une nouvelle instance de la classe Person et liez-le à votre objet MainPage. Exécutez de nouveau l'application, et vous devriez voir que les propriétés Name et Phone ont été appliquées aux attributs de texte TextBlock.

L'infrastructure de liaison de données fournit également pour les objets liés aux données d'être averti si le contenu de la propriété change. Remplacez la méthode Button_Click_1 le code suivant :

this->m_Person->Name = "Anders, Maria";

Si vous exécutez à nouveau l'application et cliquez sur le bouton, vous verrez que le contenu TextBlock ne change pas. Pour ces matières soient mises à jour, la classe Person doit implémenter le INotify­interface PropertyChanged.

INotifyPropertyChanged contient un seul élément : un événement nommé PropertyChanged, de type PropertyChangedEventHandler ^. La propriété Name doit également sera remplacée par une propriété triviale une propriété entièrement déterminée (y compris un magasin de sauvegarde fournies par l'utilisateur) à l'appui de déclencher cet événement lorsque la propriété est modifiée. En outre, j'ai ajouté une fonction de commodité nommée NotifyPropertyChanged qui déclenche cet événement lorsqu'elle est appelée. C'est une banale de refactorisation, car plusieurs propriétés ont souvent besoin de notification. L'implémentation est illustrée dans Figure 6. (Cet exemple ne prévoit que la propriété Name pour les maladies à déclaration obligatoire. Un changement semblable devrait être faite pour la propriété téléphone.)

Figure 6 classe de personne avec la propriété Name à déclaration obligatoire

// person.h
#pragma once
namespace App12 {
  namespace WUXD = Windows::UI::Xaml::Data;
  [WUXD::Bindable]
  public ref class Person sealed : WUXD::INotifyPropertyChanged
  {
  public:
    Person(void);
    property Platform::String^ Name {
      Platform::String^ get();
      void set(Platform::String^ value);
    }
    property Platform::String^ Phone;
    virtual event WUXD::PropertyChangedEventHandler^ PropertyChanged;
  private:
    void NotifyPropertyChanged(Platform::String^ prop);
    Platform::String^ m_Name;
  };
}
// person.cpp
#include "pch.h"
#include "person.h"
using namespace App12;
using namespace Platform;
using namespace WUXD;
Person::Person(void)
{
  Name = "Maria Anders";
  Phone = "030-0074321";
}
String^ Person::Name::get(){ return m_Name; }
void Person::Name::set(String^ value) {
  if(m_Name != value) {
    m_Name = value;
    NotifyPropertyChanged("Name");
  }
}
void Person::NotifyPropertyChanged(String^ prop) {
  PropertyChangedEventArgs^ args = 
    ref new PropertyChangedEventArgs(prop);
  PropertyChanged(this, args);
}

Relançant l'application avec INotifyPropertyChanged modifications apportées devrait permettre le changement de nom lorsque l'on clique sur le bouton.

ItemsControls et Collections en C + c++ / CX et XAML

XAML offre riche contrôles d'interface utilisateur, y compris les contrôles peuvent données lient à une collection d'objets. Ceux-ci sont collectivement appelés ItemsControls. Je vais me concentrer sur un en particulier, appelé ListView.

Ouvrez MainPage.xaml et supprimez le contenu de l'objet Grid racine, remplaçant par juste une classe ListView. Nommez cette myListView de classe, comme illustré ici :

<!-- ListView inside MainPage -->
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">*
  <ListView x:Name="myListView" />
</Grid>

Collections dans C + c++ / CX The Runtime Windows ne fournit pas de classes de collection ; il seulement fournit des interfaces pour les collections. Chaque projection (JavaScript, c# ou Visual Basic et C + c++ / CX) est responsable de fournir ses propres classes de collection. C + c++ / CX, ces implémentations sont présents dans l'en-tête de collection.h (qui est déjà inclus dans le pch.h du modèle application vide). Il existe deux classes principales collection définies dans l'espace de noms Platform::Collections : Platform::Collections::Vector <T> pour représenter les listes de données et Platform::Collections::Map < T, U > pour la représentation des dictionnaires. ItemsControls généralement s'attendre à une liste d'objets, d'itérable alors vecteur <T> est appropriée dans ce scénario.

Dans MainPage.xaml.cpp, remplacez la méthode OnNavigatedTo pour « nouvelle ref » un vecteur < personne ^ > et le remplir avec plusieurs classes de la personne. Puis l'assigner à la propriété ItemsSource de myListView :

void MainPage::OnNavigatedTo(NavigationEventArgs^ e)
{
  (void) e; // Unused parameter
  auto vec =
    ref new Platform::Collections::Vector<Person^>;
  vec->Append(ref
    new Person("Maria Anders","030-0074321"));
  vec->Append(ref new Person("Ana Trujillo","(5) 555-4729"));
  // etc.
...
myListView->ItemsSource = vec;
}

Styles ListView Enfin, il faut dire la ListView comment chaque élément individuel de style. ListView sera ensuite effectuer une itération sur son ItemsSource et, pour chaque élément dans la collection, générer l'interface utilisateur appropriée et lier son DataContext à cet élément. Pour affecter un style ListView, vous devez définir ses ItemTemplate, comme illustré à la Figure 7. Notez que les propriétés du texte à l'intérieur du modèle des liaisons de données appropriées pour un objet Person.

Figure 7 MainPage de ListView intérieur avec style ItemTemplate

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <ListView x:Name="myListView">
    <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Vertical">
          <TextBlock Text="{Binding Name}" FontSize="20" />
          <TextBlock Text="{Binding Phone}" FontSize="12" />
        </StackPanel>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

Lorsque vous générez et exécutez cette application, il doit ressembler à Figure 8.

Figure 8 la ListView fini

Pour en savoir plus

Références sur XAML pour Windows 8 et C + c++ / CX sont assez rares pour le moment. Pour plus d'informations sur XAML, je recommande à la recherche de références qui parlent de XAML dans Silverlight, comme bon nombre des mêmes concepts s'appliquent et de nombreux contrôles sont nommés de même ou les mêmes et ont les mêmes fonctionnalités. Le codebehind pour ces références seront c#, donc une traduction ou interprétation est nécessaire. Il s'agit essentiellement d'une opération mécanique, mais lors de l'exécution dans la fonctionnalité qui est représentée par la bibliothèque de classes de Base .NET, vous devez examiner les bibliothèques Runtime C, bibliothèque de modèles Standard ou autres bibliothèques C++ (ou le Runtime Windows) pour accomplir ces tâches. Heureusement, toutes ces bibliothèques jouent gentiment avec C + c++ / CX.

Autres ressources sont les modèles disponibles dans Visual Studio 2012 pour la création d'applications Windows Store, en particulier la grille App et Split App. Ces modèles montrent de nombreuses fonctionnalités avancées d'une application bien faite et déchiffrer leurs secrets peut conduire à une meilleure compréhension des structures sous-jacentes.

Enfin, je recommande que vous regardiez projet « Hilo, » une application à grande échelle, rédigée à l'aide de C++ et XAML. Le code et la documentation de cette application peuvent être trouvées à hilo.codeplex.com. Ce projet a été développé par les Microsoft patterns & pratiques de l'équipe et montre moderne, standard C++ ; le portage des bibliothèques C++ existants afin qu'ils peuvent être utilisés dans les applications Windows Store ; et de nombreuses méthodes conseillées lorsque vous utilisez C + c++ / CX.

J'espère que je vous ai donné un aperçu de ce que vous pouvez faire avec C + c++ / CX et avec XAML, mais c'est juste la surface. Comme avec toute nouvelle technologie, vous pouvez vous attendre à passer de nombreuses nuits blanches, parcourir les forums et la documentation et avec le nez enfoui dans les ouvrages techniques. Mais la puissance et la capacité de C + c++ / CX et XAML méritent d'apprendre davantage au sujet. Ils vous permettra d'écrire rapides des applications riches en beaucoup moins de temps.

Andy Rich est ingénieur de développement logiciel de Microsoft et a passé les dernières années de neuf essais le compilateur frontal C++. Plus récemment, il fut l'un des testeurs primaires du C + c++ / extensions de langage CX et travaillé en étroite collaboration avec l'équipe XAML à tester le scénario XAML/C++.

Merci aux experts techniques suivants d'avoir relu cet article : Tim Heuer, Marian Luparu et Tarek Madkour