Windows 8 : développer sa première application Modern UI L'application ImageHelper

Vous êtes prêt à développer votre première application Windows 8. Pour cet exemple, nous partirons du modèle d'application vide. Une application vide correspond à un projet d'une seule page. Elle ne comprend aucun contrôle prédéfini ni disposition. Il s'agit du point de départ le plus simple, avec une infrastructure de base pour que vous puissiez démarrer sur les chapeaux
de roues.

Vous pouvez écrire l'application vous-même en suivant les indications ou télécharger la version finale à partir du site Pearson, ou du site dédié à cet ouvrage. Le projet et la solution se nomment ImageHelper.

La première étape consiste à construire l'interface utilisateur appropriée. Pour cela, nous utilisons une technologie nommée XAML (nous y reviendrons en détail au Chapitre 3). Il s'agit d'un langage déclaratif qui permet de créer différents objets et de définir leurs attributs et leurs éléments enfants en XML (Extensible Markup Language). Il est généralement employé pour préciser les éléments de l'interface utilisateur de l'application.

Dans le fichier MainPage.xaml, le modèle a déjà généré un élément Grid. Il nous faut ensuite définir deux lignes de la grille en plaçant le code suivant entre les balises Grid d'ouverture et de fermeture :

<Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

Ces définitions demandent au moteur d'affichage de créer une ligne inférieure qui réserve suffisamment d'espace pour ses éléments enfants et affecte l'espace restant à la ligne supérieure. En effet, Auto signifie qu'un dimensionnement automatique en fonction du contenu de l'élément doit être réalisé, tandis que le caractère * signifie "occuper l'intégralité de l'espace restant".

Ensuite, après la balise de fermeture </Grid.RowDefinition>, mais avant la balise de fermeture </Grid>, insérez un espace réservé pour afficher une image. Elle doit être centrée dans la ligne supérieure. En cas de redimensionnement, elle doit conserver ses proportions. Pour centrer l'image, nous utilisons les propriétés d'alignement. La propriété Stretch précise comment le moteur d'exécution doit assurer le redimensionnement de l'image afin qu'elle tienne dans l'espace disponible. La valeur Uniform demande le maintien de ses proportions :

<Image x:Name="ImageTarget" Grid.Row="0"
   HorizontalAlignment="Center" VerticalAlignment="Center"
   Stretch="Uniform"/>

Enfin, ajoutez un StackPanel pour afficher deux boutons juste après l'image précédente. Cet élément empile ses éléments enfants l'un à côté de l'autre. Dans notre exemple, le premier bouton permettra de prendre une nouvelle photo, tandis que le second l'enregistrera. L'attribut Margin ajoute simplement un espace entre les boutons afin qu'ils ne soient pas trop serrés :

<StackPanel Grid.Row="1" Margin="10"
      HorizontalAlignment="Center" Orientation="Horizontal">
   <Button x:Name="CaptureButton" Content="Prendre une photo"
      Click="CaptureButton_Click_1"/>
   <Button x:Name="SaveButton" Content="Enregistrer la photo"
      Click="SaveButton_Click_1" Margin="20 0 0 0"/>
</StackPanel>

Si vous entrez le code au fur et à mesure au lieu d'examiner la version téléchargée, vous devez remarquer l'apparition d'un menu contextuel après avoir saisi l'attribut Click (merci à IntelliSense). Choisissez l'option <Nouveau gestionnaire d'evenement> pour que le code du gestionnaire d'événements soit généré automatiquement. Si vous avez copié-collé le code, supprimez la valeur qui suit l'attribut Click et reprenez la saisie pour voir apparaître le menu contextuel.

Avant de tester cette nouvelle interface utilisateur, nous devons fixer certains paramètres de l'application. Ils lui donneront un nom convivial qui sera affiché sur l'écran d'accueil et définiront quelques comportements et capacités dont nous aurons besoin pour la mener à bien. Tout d'abord, dans l'explorateur de solution, double-cliquez sur le fichier Package.appxmanifest. Vous devez obtenir une fenêtre comparable à celle illustrée à la Figure 2.7.