Thursday, 18 August 2011

SystemTray and Progressbar in window phone 7 Twitter search application

Here’s another post about the Window phone 7. In this post we’ll create an Window phone that will utilize the System Tray progress bar for waiting while the work is being done in background. This application is simple twitter search application that I’ve already created back in silverlight post “Twitter search application”.


If you want to know more about the the SystemTray in window phone then Here is nice blog post by eugenedotnet.

Lets get start, Open the visual studio 2010-> New project –> Silverlight phone application.
Name it whatever you like and go to the MainPage.XAML. Design a UI like this:
Here is the markup for this:

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Twitter" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Height="383" HorizontalAlignment="Left" Margin="12,201,0,0" Name="TweetList" VerticalAlignment="Top" Width="425">
                <Grid Margin="10">
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*" />
                    <Image Source="{Binding Image}" Grid.Column="0" Margin="3" Width="50" Height="50" Stretch="UniformToFill"/>
                    <TextBlock Text="{Binding Message}" FontSize="14" Margin="3" Grid.Column="1" TextWrapping="Wrap"/>
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="25,25,0,0" Name="textBlock1" Text="Search Twitter: " VerticalAlignment="Top" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="114,50,0,0" Name="txtSearchTerm" Text="" VerticalAlignment="Top" Width="323" />
    <Button Content="Go" Height="72" HorizontalAlignment="Left" Margin="114,108,0,0" Name="btnGo" VerticalAlignment="Top" Width="90" Click
="btnGo_Click" />

Now set the property for the SystemTray to Enable the ProgressBar and you can also set the opacity property to a value equal to or less than 1. Also you can set the Text property of the ProgressIndicator.

            <shell:ProgressIndicator IsIndeterminate="True" Text="Loading..." />

To make the ProgressIndicator visible in the code behind file of MainPage.XAML. Take care that you need to get the instance of systemTray progress bar indicator when the PhoneApplicationPage is completely loaded.

ProgressIndicator pi;
// Constructor
    Loaded +=
new RoutedEventHandler

void MainPage_Loaded(object sender, RoutedEventArgs
    pi = Microsoft.Phone.Shell.

Now you can set the IsVisible property using the object pi to True or False. So we don’t need to discuss the code for sending the request to the Twitter and downloading the result as its already discussed Here.
Create a Tweet class that will work as Entity class to hold the searched tweets

public class Tweet
public string Message { get; set
; }
public Uri Image { get; set; }

here is the complete code for button click event.

ObservableCollection<Tweet> _tweet = new ObservableCollection<Tweet>();

Go Button Event handler 
/// </summary>
private void btnGo_Click(object sender, RoutedEventArgs
if (!string
WebClient client = new WebClient
        client.DownloadStringCompleted +=
new DownloadStringCompletedEventHandler

//Let's do our main job
        client.DownloadStringAsync(new Uri(""
+ txtSearchTerm.Text.Trim()));

//Show the indicator
        pi.IsVisible = true
        TweetList.ItemsSource = _tweet;
MessageBox.Show("Please enter some text to search"

EvenHandler for Asyn completion request
/// </summary>
void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs
XDocument doc = XDocument
XNamespace ns = ""
var items = from item in doc.Descendants(ns + "entry"
select new Tweet
                    Message = item.Element(ns +
                    Image =
new Uri((from XElement xe in item.Descendants(ns + "link"
where xe.Attribute("type").Value == "image/jpg" || xe.Attribute("type").Value == "image/png" || xe.Attribute("type").Value == "image/gif"
                                     select xe.Attribute("href"


//Remove last search if any
(_tweet.Count != 0)

foreach (Tweet t in

//Hide the loading progress bar
    pi.IsVisible = false;

And you are done. Run the application and enter some term to search and press Go button. You will see the Loading message with some animation on top.

Note: Well, This is not serious not but make sure you are connected to internet to get the search result Winking smile.


And here’s the search results from twitter for the entered term.


I hope enjoyed this blog Smile Please leave a comment… if you like it.