Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Windows Phone 7 - Simple Gamer Card Xbox LIVE® application using Silverlight on Windows Phone 7.

Introduction

Gamer Card est une application vous permettant de visualiser les informations d'un Gamertag depuis Xbox LIVE ® telles que le Gamerscore, les jeux récemment joués et l'avatar en utilisant Silverlight sur Windows Phone 7.

Application Xbox LIVE® Gamer Card simple en utilisant Silverlight sur Windows Phone 7

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express pour Windows Phone, ensuite sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual C#, ensuite Silverlight for Windows Phone, puis Application Windows Phone dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Image non disponible

Étape 2

Une page Application Windows Phone nommée MainPage.xaml devrait alors apparaître :

Image non disponible

Étape 3

Sélectionnez Projet, ensuite Ajouter une référence… La fenêtre Ajouter une référence devrait apparaître, sélectionnez System.Xml.Linq dans la liste .NET :

Image non disponible

Étape 4

Ajoutez la référence à System.Xml.Linq en cliquant sur OK. Sélectionnez Projet, puis Ajouter une classe… et sélectionnez le modèle Classe s'il ne l'est pas déjà, ensuite modifiez le Nom en Gamer.cs :

Image non disponible

Étape 5

Ajoutez la nouvelle classe au Projet en cliquant sur Ajouter, puis dans la vue de code de la nouvelle Classe, au-dessus de namespace GamerCard, tapez ceci :

 
Sélectionnez
using System.ComponentModel;
using System.Collections.Generic;

Également dans la vue de code, au-dessus de public class Gamer, tapez la sous-classe suivante :

 
Sélectionnez
public class Game
{
  public string Title { get; set; }
  public Uri Image { get; set; }
}

Puisque nous en sommes à la vue de code, à la fin de la ligne public class Gamer, tapez ceci :

 
Sélectionnez
: INotifyPropertyChanged

Et toujours dans la vue de code, en dessous du « { » de la ligne public class Gamer, tapez les déclarations et l'événement suivants :

 
Sélectionnez
private string _tag;
private string _zone;
private string _reputation;
private Uri _avatar;
private Uri _picture;
private int _score;
private SolidColorBrush _account;
private List<Game> _played = new List<Game>();

public SolidColorBrush Gold = new
SolidColorBrush(Color.FromArgb(255, 225, 215, 0));
public SolidColorBrush Silver = new
SolidColorBrush(Color.FromArgb(255, 194, 194, 194));

public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
  if (PropertyChanged != null)
  {
    PropertyChanged(this, new PropertyChangedEventArgs(info));
  }
}
Image non disponible

Étape 6

En étant toujours dans la vue de code pour Gamer.cs, en dessous du « } » de private void NotifyPropertyChanged(String info), tapez les propriétés suivantes :

 
Sélectionnez
public string Tag
{
  get { return _tag; }
  set 
  { 
    _tag = value;
    NotifyPropertyChanged("Tag");
  }
}

public string Zone
{
  get { return "Zone:" + _zone; }
  set
  {
    _zone = value;
    NotifyPropertyChanged("Zone");
  }
}

public string Reputation
{
  get { return "Rep:" + _reputation; }
  set
  {
    _reputation = value;
    NotifyPropertyChanged("Reputation");
  }
}

public Uri Avatar
{
  get { return _avatar; }
  set
  {
    _avatar = value;
    NotifyPropertyChanged("Avatar");
  }
}

public Uri Picture
{
  get { return _picture; }
  set
  {
    _picture = value;
    NotifyPropertyChanged("Picture");
  }
}

public int Score
{
  get { return _score; }
  set 
  {
    _score = value;
    NotifyPropertyChanged("Score");
  }
}

public SolidColorBrush Account
{
  get { return _account; }
  set
  {
    _account = value;
    NotifyPropertyChanged("Account");
  }
}

public List<Game> Played
{
  get { return _played; }
  set
  {
    _played = value;
    NotifyPropertyChanged("Played");
  }
}
Image non disponible
Image non disponible

Étape 7

Retournez au concepteur de vues MainPage en sélectionnant l'onglet MainPage.xaml. Ensuite dans le volet XAML, entre les lignes <Grid x:Name="ContentGrid" Grid.Row="1"> et </Grid> , tapez le code XAML suivant :

 
Sélectionnez
<Grid x:Name="ContentMain">
  <Grid.RowDefinitions>
    <RowDefinition Height="80"/>
    <RowDefinition Height="120"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="40"/>
  </Grid.RowDefinitions>
  <Grid x:Name="Toolbar" Grid.Row="0">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <!-- Toolbar -->
  </Grid>
  <Grid x:Name="Score" Margin="5" Grid.Row="1">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- Score -->
  </Grid>
  <Grid x:Name="Display" Margin="5" Grid.Row="2">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <!-- Display -->
  </Grid>
  <Grid x:Name="Info" Margin="5" Grid.Row="3">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <!-- Info -->
  </Grid>
</Grid>


XAML :

Image non disponible


Design :

Image non disponible

Étape 8

Puis dans la section Contrôles Windows Phone de la Boîte à outils, sélectionnez le contrôle TextBox :

Image non disponible

Étape 9

Dessinez un TextBox sur la section barre d'outils (plus petite section supérieure) du Grid de la page, en dessous du titre de la page, et dans le volet XAML en dessous de la ligne <!-- Toolbar -->, modifiez TextBox1 comme ceci :

 
Sélectionnez
<TextBox Grid.Column="0" Name="Subject"/> 

Voir ci-dessous :

Image non disponible

Étape 10

Puis dans la section Contrôles Windows Phone de la Boîte à outils, sélectionnez le contrôle Button :

Image non disponible

Étape 11

Dessinez un bouton sur la section barre d'outils en glissant un bouton de la Boîte à outils sur la section barre d'outils du Grid sur la page, ensuite dans le volet XAML, modifiez la ligne Button1 comme ceci :

 
Sélectionnez
<Button Grid.Column="1" Content="lookup" Click="Lookup_Click"/>

Voir ci-dessous :

Image non disponible

Étape 12

Dans le volet XAML pour MainPage.xaml, en dessous de la ligne <!-- Score -->, tapez le code XAML (Image et TextBlock)suivant :

 
Sélectionnez
<Image Grid.Column="0" Width="100" Height="100" 
Source="{Binding Path=Picture}"/>
<TextBlock Grid.Column="1" Margin="10" VerticalAlignment="Center" 
Style="{StaticResource PhoneTextExtraLargeStyle}" 
Foreground="{Binding Account}" Text="{Binding Path=Score}"/>


XAML :

Image non disponible

Design :

Image non disponible

Étape 13

Puisque nous en sommes au volet XAML pour MainPage.xaml, en dessous de la ligne <!-- Display -->, tapez le code XAML (ItemsControl et Image)suivant :

 
Sélectionnez
<ItemsControl Grid.Column="0" ItemsSource="{Binding Path=Played}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <Image Height="60" Width="60" Margin="0,5,5,0" 
        Source="{Binding Path=Image}"/>
        <TextBlock TextWrapping="Wrap" 
        Text="{Binding Path=Title}"/>
      </StackPanel>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
<Image Grid.Column="1" Width="200" Source="{Binding Path=Avatar}"/>

XAML :

Image non disponible
Image non disponible


Design :

Image non disponible

Étape 14

Toujours dans le volet XAML pour MainPage.xaml, en dessous de la ligne <!-- Info -->, tapez le code TextBlock XAML suivant :

 
Sélectionnez
<TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Path=Zone}"/>
<TextBlock Grid.Column="1" FontWeight="Bold" Text="{Binding Path=Reputation}"/>

XAML :

Image non disponible


Design :

Image non disponible

Étape 15

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de namespace GamerCard, tapez ceci :

 
Sélectionnez
using System.Xml.Linq;
using System.Text.RegularExpressions;

Également dans la vue de code, au-dessus de public MainPage(), tapez les déclarations suivantes :

 
Sélectionnez
private XElement xml;
private Gamer gamer = new Gamer();

Puisque nous en sommes au constructeur public MainPage(), en dessous de InitializeComponent();, tapez ceci :

 
Sélectionnez
ApplicationTitle.Text = "GAMER CARD";
 
Sélectionnez
PageTitle.Text = "gamer card";
Subject.Text = "RoguePlanetoid";
Image non disponible

Étape 16

En étant toujours dans la vue de code pour MainPage.xaml.cs, au-dessus de public MainPage() tapez les gestionnaires d'événements suivants :

 
Sélectionnez
private void Download(object Sender, DownloadStringCompletedEventArgs e)
{
  try
  {
    if (!e.Cancelled)
    {
      xml = XElement.Parse(Regex.Match(e.Result, @"\<body\>(.*?)\</body\>",
      RegexOptions.IgnoreCase).Value);
      // Tag
      gamer.Tag = Subject.Text;
      PageTitle.Text = gamer.Tag;
      // Avatar
      gamer.Avatar = new Uri(String.Format("http://avatar.xboxlive.com/avatar/{0}/avatar-body.png",
      gamer.Tag));
      // Account
      string gamerAccount = (from account in xml.Descendants("h3")
      where account.Attribute("class").Value.StartsWith("XbcGamertag")
      select account.Attribute("class").Value).Single();
      gamer.Account = gamerAccount.EndsWith("Gold") ? gamer.Gold : gamer.Silver;
      // Gamer Picture
      gamer.Picture = new Uri((from picture in xml.Descendants()
        where (string)picture.Attribute("class") == "XbcgcGamertile"
        select picture.Attribute("src").Value).Single());
      // Gamer Score
      gamer.Score = int.Parse((from score in xml.Descendants()
        where (string)score.Attribute("alt") == "Gamerscore"
        select score.Parent.ElementsAfterSelf("span").First()
      .Value).Single());
      // Reputation
      gamer.Reputation = (double.Parse(String.Join(String.Empty,
        Regex.Split((from rep in xml.Descendants("span")
        where rep.Value == "Rep"
        select rep.ElementsAfterSelf("span").First()
        .Element("img").Attribute("src").Value).Single(),
        "[^\\d,]"))) / 4).ToString();
      // Zone
      gamer.Zone = (from zone in xml.Descendants("span")
        where zone.Value == "Zone"
        select zone.ElementsAfterSelf("span").First().Value).Single();
      // Played
      var gamerPlayed = (from play in xml.Descendants("div").Elements("a")
        where (string)play.Parent.Attribute("class") == "XbcgcGames"
        select new
        {
          gamerTitle = play.Element("img").Attribute("title").Value,
          gamerImage = play.Element("img").Attribute("src").Value
        });
      List<Game> played = new List<Game>();
      foreach (var item in gamerPlayed)
      {
        Game game = new Game();
        game.Title = item.gamerTitle;
        game.Image = new Uri(item.gamerImage);
        played.Add(game);
      }
      gamer.Played = played;
      // Data Context
      this.DataContext = gamer;
    }
  }
  catch
  {
    // Ignore Errors
  }
}

private void Lookup_Click(object sender, RoutedEventArgs e)
{
  WebClient _client = new WebClient();
  _client.DownloadStringCompleted += Download;
  _client.DownloadStringAsync(new Uri(String.Format("http://gamercard.xbox.com/{0}.card",
  HttpUtility.UrlEncode(Subject.Text))));
}
Image non disponible
Image non disponible

Étape 17

Enregistrez le Projet maintenant que vous avez terminé l'application Windows Phone Silverlight. Sélectionnez l'option Windows Phone Emulator, ensuite sélectionnez Debug, puis Démarrer le débogage ou cliquez sur Démarrer le débogage :

Image non disponible

Dès que vous l'aurez fait, ce qui suit apparaîtra dans l'émulateur Windows Phone une fois chargé :

Image non disponible

Étape 18

Cliquez sur le TextBox et puis en utilisant le SIP ou le clavier saisissez un Gamertag à chercher, ensuite appuyez sur lookup pour afficher les informations de leur Gamercard :

Image non disponible

Étape 19

Vous pouvez ensuite Arrêter l'application en sélectionnant la fenêtre d'application Visual Studio 2010 et en cliquant sur le bouton Arrêter le débogage :

Image non disponible

Conclusion

Ceci est un exemple pour afficher les informations du Gamercard depuis Xbox LIVE®. Vous pouvez afficher la réputation sous forme d'étoiles, telle que sur le Gamercard (carte de joueur) réel. Ou, sinon, plutôt que de changer la couleur de premier plan pour de l'argenté ou du doré, ajoutez un dégradé. Vous pouvez également utiliser cette application comme base pour votre propre application Gamer Card - personnalisez-la !

Liens

Remerciements

Je tiens ici à remercier Peter Bull pour m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également Gurdil_le_nain pour sa relecture orthographique et ses propositions.