Dans le cadre de notre série de didacticiels Windows Phone, nous allons maintenant apprendre à créer les éléments d'interface utilisateur pour HelloPhone application. L'application est très simple. Une fois terminé, l'interface utilisateur de l'application contiendra une légende, une zone de texte et un bouton.
Pour utiliser l'application, vous saisissez du texte dans la zone de texte, puis lorsque vous cliquez sur le bouton, l'application affiche une bannière avec le texte que vous avez saisi. Cela ressemblera à la figure suivante.
1. Dans Explorateur de solution, double-cliquez MainPage.xaml pour ouvrir ce fichier dans le concepteur.
Le concepteur fournit deux vues distinctes pour modifier les fichiers XAML, Conception et XAML vue. En mode Conception, vous disposez d'une conception d'émulateur dans laquelle vous pouvez faire glisser des contrôles de la boîte à outils, ainsi que sélectionner, redimensionner, déplacer et définir les propriétés des contrôles existants. En mode XAML, vous disposez d'un éditeur de balisage vous permettant de modifier le code XAML de la page. Vous pouvez travailler avec l'un ou l'autre des modes. Vous disposez également d'un mode divisé, la fenêtre de l'éditeur affichant simultanément les deux vues.
2. Dans cette tâche, nous nous concentrons principalement sur la modification manuelle du XAML. Une fois que la partie codage est terminée, vous pouvez revenir à la vue du concepteur pour voir les résultats. Vous pouvez également avoir une vue XAML en plein écran.
3. Dans le balisage XAML généré par le modèle d’application Windows Phone par défaut, localisez le la grille élément conteneur nommé LayoutRoot. Son but est d'organiser les éléments sur la page. À l'intérieur de RowDefinition propriété, insérer une ligne supplémentaire entre les deux lignes existantes et définir la valeur de son la taille propriété à Auto. Cette ligne comprendra bientôt une zone de texte et un bouton.
4. Racine la grille élément contient également des éléments imbriqués, chacun étant affecté à une ligne différente de la grille externe en définissant un Grid.Row propriété. Maintenant, localisez l'élément de grille nommé TitleGrid et Définissez la propriété text du premier élément de bloc de texte à l'intérieur de la grille interne sur Windows Phone 7 Series ». De même Bonjour téléphone est ajouté au bloc de texte suivant.
5. Maintenant, trouvez le la grille élément nommé ContentGrid, l'assigne à la ligne 1, qui est généralement vide au départ, et collez le balisage XAML suivant dans cet élément.
6. Pour compléter la conception de la page, ajoutez une troisième ligne contenant la bannière avec le message saisi par l'utilisateur. Pour créer cette ligne, insérez le balisage XAML suivant immédiatement avant la balise de fin de la grille externe.
7. Cliquez sur le Conception afficher et examiner la disposition des contrôles sur la page.
Dans notre prochain tutoriel, nous allons apprendre à "Gérer les événements de l'interface utilisateur".