Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4

First I would like to say that the code is from Scott Gu’s article Building a Windows Phone 7 Twitter Application using Silverlight. I am very excited that Silverlight will soon be capable of working on Windows Phones. Designing for the phone brings numerous design and user experience problems not associated with the average 20-30 inch computer monitors. About 6 months ago I began tackling those problems in my previous Blend tutorials for layout, animation and video within a iPhone interface.

Goal, I wanted to see if I could extend Scott’s app to do the following:

Add a custom design
Add functionality – currently you can only look up a user’s timeline. The goal would be to be able to post, search etc to Twitter, basically a full fledged Twitter application. This tutorial tackles the design.
Add a main screen to access the different screens with animation for the screen changes.

Challenges
Gradients in Blend 4 seem to not work well as of yet. A major part of my design was to use a gradient as a background but using a rectangle with a gradient produced banding. As a last resort I imported a gradient jpg and it produced slightly better results.

The 100% UI size in Blend is not the same as the emulator. If you want to design to the emulator the dimensions are 335×558.
If you want the UI in Blend to match the emulator set the layout to 70%.

To remove the default color of the list box Property=”Background” Value=”Transparent”

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

Screenshots of original app and new design applied

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="Lookup" HorizontalAlignment="Right" Height="79" Margin="0,190,0,0" VerticalAlignment="Top" Width="198" Click="lookup_Click" Background="#FF529DE9"/>
        	<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" Text="paulyanez" Foreground="#FF529DE9" SelectionBackground="#FF9B3030" CaretBrush="#FF0D325B"/>
        	<ListBox Height="516" Margin="2,284,2,0" x:Name="listBox1" VerticalAlignment="Top" Width="476" >
        		<ListBox.ItemContainerStyle>
        			<Style TargetType="ListBoxItem">
        				<Setter Property="Background" Value="Transparent"/>
        			</Style>
        		</ListBox.ItemContainerStyle>
        		<ListBox.ItemTemplate>
        			<DataTemplate>
        				<StackPanel Orientation="Horizontal" Height="110" Background="#33000000" Margin="-10,-10,-10,-10">
        					<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="10,10,8,10"/>
        					<StackPanel Width="370">
        						<TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" />
        					</StackPanel>
        				</StackPanel>
        			</DataTemplate>
        		</ListBox.ItemTemplate>
        	</ListBox>
        	<Image x:Name="header" Height="196" Source="Image3.png" Stretch="Fill" VerticalAlignment="Top" Margin="-2,0,0,0"/>
        </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;

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://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + username.Text ));
		}

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

			XElement xmlTweets = XElement.Parse(e.Result);

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