WP7 - DOTNET : Twitter Client for Windows Phone 7 with Silverlight

This tutorial is going to be a special one; As you all know : windows phone 7 sdk came out really moments ago..

And guess what ? it supports Silverlight and XNA for heavier gaming.

So what does this mean?..This means all .NET developers are really really happy.

Here’s a tutorial of how to build a TINY – MINI -Demo Twitter client (in silverlight!) on windows phone 7. (we’ll be satisfied by just updating the status :) ).

The SDK can be downloaded here : http://developer.windowsphone.com/

Install the SDK (very easy to install to advanced set up needed).

After the SDK install is completed, open Visual Studio 2010 RC or Visual Studio 2010 Express RC.

Create a new project > select the tab Silverlight for windows phone > Windows Phone Application and name your project whatever you want.

Notice after the project creation, a cute design is already laid out.

Now let’s just change the 2 TextBoxs in MainPage.xaml (this is where your first window is set by default) text just to have something familiar to the application context :

<Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="Twitter Client" x:Name="textBlockPageTitle" 
Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text="Status" x:Name="textBlockListTitle" 
Style="{StaticResource PhoneTextPageTitle2Style}"/>
</Grid>
    

Launch your application now, the project is built and deployed to the phone emulator automatically.

And you should have something like this :

Get back to your project, in order to stop debugging just press SHIFT + F5 ( NO NEED TO CLOSE THE EMULATOR, SAVES YOU A LOT OF TIME)

Now let’s add a textbox + a button

For best design / layout results we’ll add another row definition, so all of our rows definitions look like this now :

 <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

Then we’ll add the Textbox and the button in the Grid called “ContentGrid” (already defined)

     <Grid x:Name="ContentGrid" Grid.Row="1">
           <TextBox Grid.Column="0" Name="txtStatus"
 FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
           <Button Grid.Column="1" Name="btnUpdate" Content="Click Me" 
HorizontalAlignment="Right" Padding="4"  Click="btnUpdate_Click" />
     </Grid>

You might notice the textbox is under the button and the layout isn’t that nice. So adjust manually with margins or with column definitions (or both).

Here’s an example :

<Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
                <TextBox Name="txtStatus" TextWrapping="Wrap" AcceptsReturn="True" 
FontSize="{StaticResource PhoneFontSizeExtraLarge}"  Height="262" Grid.Row="0" />
            <Button Name="btnUpdate" Content="Update Status"
 HorizontalAlignment="Center" Padding="4"  Click="btnUpdate_Click" Grid.Row="1" Width="287" />
</Grid>

We end up with something looking like this :

Now let’s get to the coding part :

First of all we have to add an event on the Button click; VS does it for us automatically by double clicking on the button.

So when the button is clicked we want to update our twitter status with the text that was entered in the textbox :

I’m using an HttpWebRequest here BUT there’s a ton of ways to do this, you can use already written librairies etc..

private void btnUpdate_Click(object sender, RoutedEventArgs e)
  {
      HttpWebRequest req = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml?status=" + txtStatus.Text);
      req.Method = "POST";
      req.Credentials = new NetworkCredential("youusername", "yourpassword");
      req.ContentType = "application/x-www-form-urlencoded";
      req.BeginGetResponse(new AsyncCallback(GetResponseCallback), req);
  }

As you might of noticed the username, and password is written in the code behind, that’s not at all the best practice : the best practice would be to use OAuth (with consumer and secret key ) ..therefore no need to use username and password.

For simplicity / demo reasons we’re just going to stick to this method ;) .

The BeginGetResponse method that I call at the last line of is to begin an Asynchronous request to the internet resource, so in our case twitter (why asynchronous you might ask ? so the application doesn’t just freeze while the request is made)

And now add the following code for the GetResponseCallback method :

private static void GetResponseCallback(IAsyncResult asynchronousResult)
    {
        HttpWebRequest request = (HttpWebRequest)asynchronousResult.AsyncState;
        HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(asynchronousResult);
        response.Close();
    }

For more  information about using HttpWebRequest and its methods check msdn!

Now run the whole thing!

TADAAM!!..

To take this further, an ideal thing is to build a real client, getting the friends timeline to show them in a list, adding RT and replies and Direct messages etc..

Good coding and hope you liked this tutorial!

Who said we need seesmic??! :p