Developpement Windows Phone - partie 2

  • Article

Créer l’interface utilisateur sur Windows Phone

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Créer l’interface utilisateur sur Windows Phone

Normalement, vous utilisez Silverlight pour des applications Windows Phone et XNA pour créer des jeux Windows Phone. Le XAML est le langage déclaratif utilisé par Silverlight pour créer l’interface, et ainsi c'est ce que vous utilisez pour créer une interface graphique pour une application mobile, tels les contrôles, formats, textes et autres contenus affichés à l'écran. Si vous êtes familiers avec la programmation web, vous pouvez penser au XAML comme identique au HTML mais en plus puissant. Comme le HTML, le XAML est fait d'éléments et d'attributs. Pourtant, le XAML est basé sur du XML et se doit donc de suivre les règles XML qui incluent le fait d'être correctement formés. Vous pourriez demander "Pourquoi devrais-je m'intéresser au XAML si je compte simplement utiliser des outils comme Visual Studio ou Expression Web pour créer l'interface?". Même s'il existe des outils qui génèrent les balises, vous devrez inévitablement regarder sous la surface pour comprendre ou optimiser le XAML. De plus, il est parfois plus facile de coder l'interface utilisateur à la main lorsque vous voulez un fin contrôle ou que vous voulez savoir ce qu'il se passe précisément.

Ce tutoriel contient les sections suivantes:

Exemple XAML

L'exemple suivant est un simple morceau de XAML qui crée un bouton.

XAML

  1. <Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0">
  2. <Button Height="72"Width="160"Content="Click Me" />
  3. </Grid>

Lorsque vous lancez l'application, cela ressemble à ce qui suit :

image_thumb1

Le contrôle Button est spécifié par l'élément <Button>. Les attributs Width et Height spécifient la taille du bouton. La balise <Grid> est générée lorsque vous créez une nouvelle application Windows Phone dans Visual Studio, et est utilisée pour positionner des objets. Pour en apprendre plus sur la mise en page avec SilverLight, consultez le tutoriel Mise en page sur l’écran.

Vous pouvez utiliser Visual Studio pour générer le XAML, par exemple, en faisant glisser un bouton depuis la boite à outils sur la surface de design.
image4_thumb

L'exemple suivant montre le XAML que Visual Studio peut générer. (Votre XAML peut être légèrement différent.)

XAML

  1. <Grid x:Name="ContentGrid" Grid.Row="1">
  2. <Button Content="Button" Height="72" HorizontalAlignment="Left"
  3. Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
  4. </Grid>

Notez que Visual Studio ajoute quelques attributs complémentaires tels que HorizontalAlignment et Margin, pour positionner le bouton. Cette "plomberie" supplémentaire pourrait être indésirable si vos besoins sont spécifiques. Bien sûr, vous pouvez changer ces attributs en utilisant l'interface Visual Studio (voir setting control properties in VS pour un exemple précis), mais dans certains cas, vous préfèreriez juste éditer directement le XAML .

L'une des meilleures choses à propos de l'utilisation d'un langage déclaratif comme le XAML est d'avoir une séparation claire entre le balisage qui créé l'UI et le code qui fait agir l'application. Par exemple, un designer de votre équipe pourrait dessiner une interface puis donner le XAML à un développeur qui ajouterait le code procédural. Même si le développeur et le designer sont la même personne (comme c'est souvent le cas), vous pouvez garder votre interface dans les fichiers XAML (.xaml) et votre code procédural dans les fichiers de code-behind (.cs et .vb).

XAML est juste du code procédural (en plus simple)

Les éléments XAML, tel que <Button /> , sont l'équivalent de l'instanciation des objets dans le code procédural. Par exemple, considérez le code XAML suivant.

XAML

  1. <Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0">
  2. <Button Height="72"Width="160"Content="Click Me" />
  3. </Grid>

Le code suivant montre comment ce XAML peut être écrit en C# ou en Visual Basic.

C#

  1. // Initialise le bouton

  2. Button myButton = new Button();

  4. // dfini ses proprits myButton.Width = 160;

  5. myButton.Height = 72;

  6. myButton.Content = "Click Me";

  8. // Attache le bouton l'arbre visuel en tant qu'enfant

  9. // de l'objet Grid (nomm 'ContentPanel').En d'autres mots, positionne

  10. // le bouton dans l'interface.

  11. ContentPanel.Children.Add(myButton);

Visual Basic

  1. ' Initialise le bouton

  2. Dim myButton As New Button()

  4. ' Set its properties

  5. myButton.Width = 160

  6. myButton.Height = 72

  7. myButton.Content = "Click Me"

  9. ' Attache le bouton l'arbre visuel en tant qu'enfant

  10. ' the Grid object (named 'ContentPanel'). En d'autres mots, positionne

  11. ' le bouton dans l'interface.

  12. ContentPanel.Children.Add(myButton)

Pour l'UI, le XAML a l'avantage d'être plus facile à lire et plus compact que du code procédural. Pourtant, il est parfois nécessaire d'utiliser le code procédural pour créer l'UI dynamiquement.

Propriétés

Voici les deux façons possibles de spécifier une propriété en XAML.

  • La syntaxe par attribut d'élément
  • La syntaxe par balise d'élément

La syntaxe par attribut est la syntaxe attribute="value" que vous avez vu dans les exemples précédents et avec laquelle vous êtes peut-être familier au travers du langage HTML. Dans l'exemple suivant, un Rectangle est créé. Fill est un attribut qui est configuré sur un nom de couleur prédéfini.

XAML

  1. <Rectangle Fill="Red" />

Alternativement, vous pourriez spécifier la valeur de la couleur en utilisant la syntaxe par balise d'élément.

XAML

  1. <Rectangle>
  2. <Rectangle.Fill>
  3. <SolidColorBrush Color="Red" />
  4. </Rectangle.Fill>
  5. </Rectangle>

Dans ce cas, vous spécifiez explicitement l'objet SolidColorBrush qui est le type requis par la propriété Fill plutôt que de simplement utiliser la chaine "Red". De cet exemple, vous pouvez déduire que la syntaxe par balise est simplement un moyen plus verbeux de faire la même chose. C'est néanmoins régulièrement utile car toutes les propriétés ne peuvent être spécifiées par une simple chaine de caractère. Par exemple, si vous avez besoin de spécifier des propriétés multiples d'un objet utilisé en tant que valeur d'une propriété, vous aurez probablement besoin d'utiliser la syntaxe par balise. L'exemple suivant créé un Rectangle, mais au lieu d'un simple fond rouge, il utilise un dégradé.

XAML

  1. <!-- This rectangle is painted with a diagonal linear gradient. -->
  2. <Rectangle Width="200" Height="200">
  3. <Rectangle.Fill>
  4. <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
  5. <GradientStop Color="Yellow" Offset="0.0" />
  6. <GradientStop Color="Red" Offset="0.25" />
  7. <GradientStop Color="Blue" Offset="0.75" />
  8. <GradientStop Color="LimeGreen" Offset="1.0" />
  9. </LinearGradientBrush>
  10. </Rectangle.Fill>
  11. </Rectangle>

Lorsque vous exécutez l'application, cela ressemble à ce qui suit
image_thumb6

Comme vous pouvez le voir, la propriété Fill utilise un objet complet (LinearGradientBrush) pour créer le dégradé. Dans ce genre de cas, vous avez besoin d'utiliser la syntaxe par balise plutôt que simplement spécifier la valeur en tant que chaine assignée à un attribut.

XAML et l'Arbre Visuel

En XAML, vous avez des éléments (tels que <Button> et <Grid> ) qui peuvent avoir d'autres éléments (nœuds) sous eux (enfants). Cette relation parent/enfant spécifie différentes choses telles que la façon dont les objets sont positionnés sur l'écran et comment ils répondent aux évènements déclenchés par l'utilisateur. Considérez l'exemple suivant :
image_thumb8

XAML

  1. <Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
  2. <StackPanel Margin="20" Background="Blue" >
  3. <TextBlock Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
  4. <TextBlock Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
  5. <TextBlock Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
  6. </StackPanel>
  7. </Grid>

Le StackPanel bleu est contenu dans un composant Grid rouge. Les éléments TextBlock sont contenus dans le StackPanel (les éléments TextBlock sont des enfants du StackPanel). De plus, les éléments TextBlock sont empilés les uns sur les autres dans l'ordre dans lequel ils sont déclarés dans le XAML.

Le diagramme hiérarchique suivant montre la relation entre les éléments.

image_thumb10

A côté de la façon de déterminer comment le contenu est présenté, l'arbre visuel peut aussi avoir un effet sur la façon dont les évènements sont pris en compte. Beaucoup d'évènements standards (appelés routed events) remontent telles des "bulles" le long de l'arbre. Par exemple, vous pouvez attacher un gestionnaire d'évènement au StackPanel qui se déclenche lorsque le bouton gauche de la souris est cliqué (évènement MouseLeftButtonDown). Le XAML suivant montre comment ajouter un gestionnaire d'évènement MouseLeftButtonDown, nommé commonMouseHandler, au StackPanel.

XAML

  1. <Grid Background="Red" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  2. <StackPanel Margin="20" Background="Blue" MouseLeftButtonDown="commonMouseHandler">
  3. <TextBlock Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
  4. <TextBlock Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
  5. <TextBlock Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
  6. </StackPanel>
  7. </Grid>

L'exemple suivant montre le code procédural pour traiter l'évènement.

C#

  1. private void commonMouseHandler(object sender, RoutedEventArgs e)
  2. {
  3. FrameworkElement feSource = e.OriginalSource as FrameworkElement;
  4. switch (feSource.Name)
  5. {
  6. case "firstTextBlock":
  7. firstTextBlock.Text = firstTextBlock.Text + " Click!";
  8. break;
  9. case "secondTextBlock":
  10. secondTextBlock.Text = secondTextBlock.Text + " Click!";
  11. break;
  12. case "thirdTextBlock":
  13. thirdTextBlock.Text = thirdTextBlock.Text + " Click!";
  14. break;
  15. }
  16. }

Visual Basic

  1. Private Sub commonMouseHandler(ByVal sender As System.Object, _
  2. ByVal e As System.Windows.Input.MouseButtonEventArgs)
  3. Dim feSource As FrameworkElement = e.OriginalSource
  4. Select Case feSource.Name
  5. Case "firstTextBlock"
  6. firstTextBlock.Text = firstTextBlock.Text & " Click!"
  7. Case "secondTextBlock"
  8. secondTextBlock.Text = secondTextBlock.Text & " Click!"
  9. Case "thirdTextBlock"
  10. thirdTextBlock.Text = thirdTextBlock.Text & " Click!"
  11. End Select
  12. End Sub

Pour essayer cet exemple, cliquez sur les objets TextBlock suivants. Lorsque vous cliquez sur un TextBlock, l'évènement est capturé par le TextBlock, mais l'évènement remonte ensuite à son élément parent (le StackPanel), qui traite l'évènement.

Le diagramme suivant montre comment l'évènement remonte dans l'arbre.

image_thumb12

C'est parce que l'évènement continue à travers l'arbre que vous pouvez également "écouter" l'évènement MouseLeftButtonDown au sein de l'élément Grid.

Bien plus qu'une interface utilisateur statique

Vous pouvez faire plus qu'afficher une interface statique grâce au XAML. Vous pouvez créer des animations, inclure des vidéos, et lier vos données simplement en utilisant le balisage. Vous apprendrez plus à propos de ces utilisations du XAML dans les autres tutoriels; pourtant, voici un exemple simple d'animation codée avec du XAML. Cliquez sur le Rectangle pour voir l'effet.

XAML

  1. <StackPanel Background="#FDF5E6">
  2. <StackPanel.Resources>
  3. <Storyboard x:Name="myStoryboard">
  4. <DoubleAnimationUsingKeyFrames
  5. Storyboard.TargetName="myRectangle"
  6. Storyboard.TargetProperty="Height">
  7. <!-- This key frame resets the animation to its starting
  8. value (30) at the beginning of the animation. -->
  9. <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
  10. <!-- Spline animations are used to create acceleration. This
  11. SplineDoubleKeyFrame creates an animation that starts out slow
  12. and then speeds up. The rectangle "falls". -->
  13. <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"
  14. KeyTime="0:0:0.8" />
  15. <!-- This spline animation creates the "bounce" at the end where
  16. the rectangle shortens its length quickly at first and then
  17. slows down and stops. -->
  18. <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
  19. KeyTime="0:0:1.5" />
  20. </DoubleAnimationUsingKeyFrames>
  21. </Storyboard>
  22. </StackPanel.Resources>
  23. <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue"
  24. Width="200" Height="30" />
  25. </StackPanel>

C#

  1. // When the user clicks the rectangle, the animation begins.
  2. private void Mouse_Clicked(object sender, MouseEventArgs e)
  3. {
  4. myStoryboard.Begin();
  5. }

Visual Basic

  1. // When the user clicks the rectangle, the animation begins.
  2. private void Mouse_Clicked(object sender, MouseEventArgs e)
  3. {
  4. myStoryboard.Begin();
  5. }

Ceci est un exemple d'utilisation du XAML pour spécifier le comportement du contenu plutôt que la mise en page ou une autre interface statique. L'élément Storyboard définit quelques propriétés générales de l'animation, tel que l'objet qui sera animé. Les éléments enfants du Storyboard, tel que LinearDoubleKeyFrame, déterminent comment l'animation s'exécutera. Pour en savoir plus sur les animations, voir Silverlight Animations.

Et ensuite?

XAML est un langage simple basé sur du XML et est utilisé pour créer l'interface dans vos applications Windows Phone ou vos applications Silverlight. Bien que vous pourriez utiliser un outil WYSIWYG tel que Visual Studio ou Expression Blend pour créer votre interface utilisateur, il est important de comprendre le balisage généré par ces outils pour que vous puissiez le personnaliser si nécessaire. Au fil de la lecture des autres exemples de tutoriels, vous verrez ce puissant langage en action.

Le tutoriel sur l'utilisation des contrôles est le suivant dans la série. Il introduit les contrôles tels que les boutons et le texte.

Cliquez ici pour revenir au sommaire de la liste d’articles