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 byeugenedotnet.

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="{StaticResourcePhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Twitter" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--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">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <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"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <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" />
</Grid>

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.

<phone:PhoneApplicationPage 
   .........
       ....
       ......
   shell:SystemTray.IsVisible="True"
   shell:SystemTray.Opacity=".8">
        
        <shell:SystemTray.ProgressIndicator>
            <shell:ProgressIndicator IsIndeterminate="True"Text="Loading..." />
        </shell:SystemTray.ProgressIndicator>

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
public MainPage()
{
    InitializeComponent();
    Loaded += new RoutedEventHandler(MainPage_Loaded);
    
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    pi = Microsoft.Phone.Shell.SystemTray.ProgressIndicator;
}

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>();

/// <summary>
/// Go Button Event handler  
/// </summary>
private void btnGo_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrEmpty(txtSearchTerm.Text.Trim()))
    {
        WebClient client = new WebClient();
        client.DownloadStringCompleted += newDownloadStringCompletedEventHandler(client_DownloadStringCompleted);

        //Let's do our main job
        client.DownloadStringAsync(newUri("http://search.twitter.com/search.atom?q=" + txtSearchTerm.Text.Trim()));

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

/// <summary>
/// EvenHandler for Asyn completion request
/// </summary>
void client_DownloadStringCompleted(object sender,DownloadStringCompletedEventArgs e)
{
    XDocument doc = XDocument.Parse(e.Result);
    XNamespace ns = "http://www.w3.org/2005/Atom";
    var items = from item in doc.Descendants(ns + "entry")
                select new Tweet()
                {
                    Message = item.Element(ns + "title").Value,
                    Image = new Uri((from XElement xe initem.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").Value
                                      ).First<String>()),

                };

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

    foreach (Tweet t in items)
    {
        _tweet.Add(t);
    }

    //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 .



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



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