Premier article sur Silverlight. Nous allons ici utiliser rapidement le fait de pouvoir installer l’application OOB (Out of Browser) et du coup, pouvoir profiter du Cross-Domain et récupérer des XML sans ce souci.

Ici nous allons créer rapidement un client Twitter qui ira récupérer les derniers Twit d’un compte voulu. Puis nous allons ajouter l’effet iPhone Scroller pour rappeler une application mobile.

Le résultat : (il faut impérativement installer l’application)

Du côté de notre XAML, nous allons définir une ListBox qui va contenir nos éléments. Et créer aussi la zone de recherche de Tweets.

<Canvas Width="700" Height="500" x:Name="MyCanvas" Background="AliceBlue">
 <TextBlock x:Name="welcome_text" FontFamily="Arial" FontSize="20" Foreground="Black" Margin="5" Grid.Row="0"></TextBlock>
 <StackPanel x:Name="MyScrollElement" Width="700">
 <ListBox x:Name="listBox1" Width="700" IsHitTestVisible="False" Background="Transparent">
 <ListBox.ItemTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal" Height="80">
 <Image Source="{Binding ImageSource}" Height="30" VerticalAlignment="Top" Margin="0,0,5,0"/>
 <StackPanel>
 <TextBlock Text="{Binding UserName}" Foreground="Black" FontSize="16" />
 <TextBlock Text="{Binding Message}" TextWrapping="Wrap" Foreground="Gray" FontSize="13" Width="500"/>
 </StackPanel>
 </StackPanel>
 </DataTemplate>
 </ListBox.ItemTemplate>
 </ListBox>
 </StackPanel>
 <Border x:Name="border_twitter" HorizontalAlignment="Right" Width="320" VerticalAlignment="Top" BorderBrush="AliceBlue" CornerRadius="8" BorderThickness="1" Margin="370,10,10,0" Background="DeepSkyBlue">
 <Grid>
 <TextBlock Margin="10" Text="Voir le Twitter de " Foreground="White" Width="100" HorizontalAlignment="Left"/>
 <TextBox KeyDown="test_twitter" Text="Flex" x:Name="twitter_voir" Width="150" Height="23" Margin="110,6" HorizontalAlignment="Left" VerticalAlignment="Top"/>
 </Grid>
 </Border>
 </Canvas>

La partie intéressante est donc la ListBox, elle va contenir l’image du Twitter, le titre du Tweet et son contenu. Ensuite, sur le code-behing, nous allons commencé par créer un élément TwitterItem :

public class TwitterItem
{
public string UserName { get; set; }
public string Message { get; set; }
public string ImageSource { get; set; }
}

Qui va contenir donc les informations du Tweet. Puis, étant donné que notre application nécessite l’installation Out-of-Browser, nous allons l’indiquer à l’utilisateur en testant l’installation de l’appli :

if (Application.Current.IsRunningOutOfBrowser)
{
WebClient twitter = new WebClient();
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=flex"), UriKind.RelativeOrAbsolute);
}
else
{
this.welcome_text.Text = "Merci d'installer l'application pour l'utiliser.\nPour cela, faites un Clic Droit puis 'Installer l'application'";
this.border_twitter.Visibility = Visibility.Collapsed;
}

Si elle n’est pas installée, nous affichons un texte à l’utilisateur lui demandant de le faire, sinon nous allons chercher le fichier XML que nous voulons utiliser. Par défaut, nous affichons le Twitter de Flex … Ce qui est assez paradoxal. Bref, ensuite, il faut créer la méthode qui va remplir notre ListBox :

void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
return;

XElement xmlTweets = XElement.Parse(e.Result);
this.listBox1.ItemsSource = from tweet in xmlTweets.Descendants("status")
select new TwitterItem
{
ImageSource =
tweet.Element("user").Element("profile_image_url").Value.ToString(),
Message =
tweet.Element("text").Value.ToString(),
UserName =
tweet.Element("user").Element("screen_name").Value.ToString()
};
}

Voila, une simple boucle et on récupère les éléments du Twitter. N’oubliez pas la référence System.Xml.Linq pour utiliser cela.