♪
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 :
: INotifyPropertyChangedEt 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▲
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.
