Windows Phone 7 - Tutoriel 22 : Gamer Card

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

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Windows Phone 7 par le biais d'exemples pas à pas.

Langage : C#

Public visé : niveau Intermédiaire

Commentez ce tutoriel : Commentez ♪

- Titre : Windows Phone 7 - Tutoriel 22 : Gamer Card

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 23 mars 2012

- Mise à jour : 24 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

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

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Étape 18

- Étape 19

- Conclusion

- Liens

- Remerciements

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 :

Étape 2

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

É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 :

É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 :

É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 :

using System.ComponentModel;
using System.Collections.Generic;

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

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 :

: 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 :

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));
}
}

É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 :

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");
}
}

É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 :

<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 :

Design :

Étape 8

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

É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 :

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

Voir ci-dessous :

Étape 10

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

É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 :

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

Voir ci-dessous :

Étape 12

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

<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 :

Design :

É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 :

<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 :

Design :

Étape 14

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

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

XAML :

Design :

É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 :

using System.Xml.Linq;
using System.Text.RegularExpressions;

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

private XElement xml;
private Gamer gamer = new Gamer();

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

ApplicationTitle.Text = "GAMER CARD";

PageTitle.Text = "gamer card";
Subject.Text = "RoguePlanetoid";

É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 :

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))));
}

É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 :

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

É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 :

É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 :

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

Télécharger le code source du tutoriel.

Remerciements

Je tiens ici à remercier Peter Bull de 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.