Paul Yanez

This is part 2 of “Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4″. In this tutorial we will build a Twitter user profile screen. You will be able to display the user image, follower count, friend count, status post count, user description and load the user page background image.

View all parts of the tutorial
Part 1 – Search by Twitter User status
Part 2 – Display Twitter user details

Screenshot of user profile screen

XAML code

<phoneNavigation:PhoneApplicationPage
    x:Class="WindowsPhoneApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">

    <Grid x:Name="LayoutRoot" Background="#FF1D88EE">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="TitleGrid" Grid.Row="0"/>
        <Grid x:Name="ContentGrid" Grid.Row="1">
        	<Image x:Name="gradient" Margin="0,0,2,0" Source="Image1.png" Stretch="Fill" Height="800"/>
        	<Button x:Name="search_Button" Content="Search" HorizontalAlignment="Right" Height="79" Margin="0,190,0,0" VerticalAlignment="Top" Width="198" Click="lookup_Click" Background="#FF529DE9"/>
        	<Image x:Name="imgBackground" Margin="8,273,8,8" Stretch="UniformToFill"/>
        	<TextBox x:Name="username" Height="79" Margin="-4,190,184,0" TextWrapping="Wrap" VerticalAlignment="Top" Background="#FF124F8B" BorderBrush="White" Width="300" FontSize="24" SelectionForeground="#FF529DE9" Foreground="#FF529DE9" SelectionBackground="#FF9B3030" CaretBrush="#FF0D325B"/>
        					<Image x:Name="img" Width="100" Margin="24,312,0,388" HorizontalAlignment="Left"/>
        						<TextBlock x:Name="twittername" Margin="163,303,17,0" TextWrapping="Wrap" FontSize="40" Height="83" VerticalAlignment="Top" Foreground="Black" />

        	<Image x:Name="header" Height="196" Source="Image3.png" Stretch="Fill" VerticalAlignment="Top" Margin="-2,0,0,0"/>
        	<TextBlock x:Name="followers" Margin="170,0,21,323" TextWrapping="Wrap" FontSize="26.667" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock Margin="23,0,0,323" TextWrapping="Wrap" FontSize="26.667" HorizontalAlignment="Left" Width="150" Text="Followers:" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock x:Name="friends" Margin="170,0,21,272" TextWrapping="Wrap" FontSize="26.667" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock Margin="23,0,0,272" TextWrapping="Wrap" FontSize="26.667" HorizontalAlignment="Left" Width="150" Text="Friends:" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock x:Name="statuses" Margin="170,0,21,214" TextWrapping="Wrap" FontSize="26.667" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock Margin="23,0,0,214" TextWrapping="Wrap" FontSize="26.667" HorizontalAlignment="Left" Width="150" Text="Statuses:" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock x:Name="description" Margin="170,0,21,31" TextWrapping="Wrap" FontSize="26.667" Height="166" VerticalAlignment="Bottom" Foreground="Black" />
        	<TextBlock Margin="23,0,0,156" TextWrapping="Wrap" FontSize="26.667" HorizontalAlignment="Left" Width="150" Text="Description:" Height="41" VerticalAlignment="Bottom" Foreground="Black" />
        </Grid>
    </Grid>
</phoneNavigation:PhoneApplicationPage>

C# code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Windows.Media.Imaging;

namespace WindowsPhoneApplication2
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

		    private void lookup_Click(object sender, System.Windows.RoutedEventArgs e)
        {
        	WebClient twitter = new WebClient();
			twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
			twitter.DownloadStringAsync(new Uri("http://twitter.com/users/" + username.Text +".xml"));
		}

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

			XElement xmlTweets = XElement.Parse(e.Result);
			img.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_image_url").Value, UriKind.Absolute));
			twittername.Text = xmlTweets.Element("name").Value;
			followers.Text = xmlTweets.Element("followers_count").Value;
			friends.Text = xmlTweets.Element("friends_count").Value;
			statuses.Text = xmlTweets.Element("statuses_count").Value;
			description.Text = xmlTweets.Element("description").Value;
			imgBackground.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_background_image_url").Value, UriKind.Absolute));
		}
    }
}