Didacticiel Windows Phone 4: Conception de l'interface utilisateur Windows Phone

Didacticiel Windows Phone 4: Conception de l'interface utilisateur Windows Phone
Didacticiel Windows Phone 4: Conception de l'interface utilisateur Windows Phone

Vidéo: Didacticiel Windows Phone 4: Conception de l'interface utilisateur Windows Phone

Vidéo: Didacticiel Windows Phone 4: Conception de l'interface utilisateur Windows Phone
Vidéo: Apex Legends Season 6 – Battle Pass Trailer - YouTube 2024, Mars
Anonim

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.

Image
Image

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.

Image
Image

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.

Image
Image

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.

Image
Image

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.

Conseillé: