Geeks With Blogs
Max's Blog .NET, Windows Phone, SQL Server and other exciting stuff

Hi,

Just as I promised a few months back, here is my tutorial for developing a simple Silverlight Twitter client. I was battling to get this done, but in the mean time I decided to attend the Sydney Silverlight User Group. I met Brendan there and he has helped me a lot to accomplish this. Thanks to him and SDDN. The basis of this tutorial is derived from the technique as prescribed in here. So let's get started without any further delay. In this post, we will look into creating the necessary UI elements for Login page.

Software Requirements:

  1. Visual Studio 2010 Beta 2 Ultimate – Note you need beta 2 and not RC, as for SL4 it's compatible only with Beta 2. Get it here.
  2. Download Silverlight 4 beta tools from here.

  1. Name it something and say yes when it asks to create a Web project.
  2. Now this type of project would create a skeleton for you to play around, which is fantastic, you don't have to do all the hacks we used to do in SL version 2 and lower.
  3. Now add a new Silverlight page to Views folder, by right clicking and choosing add > new item and say Silverlight Page and name it "Login.xaml".

  4. Now go to MainPage.xaml, which is the xaml for the main page. Goto the first element within the <uriMapper:UriMapper> change the first element to something like this below which says what is the default page that gets loaded when the application runs. Here we are saying that it is the Login page.

    <uriMapper:UriMapping Uri="" MappedUri="/Views/Login.xaml"/>

  5. Now go to stackpanel which holds the hyperlinks in the MainPage.xaml and add this to the beginning of the existing "home" hyperlink.

    <HyperlinkButton x:Name="Login" Style="{StaticResource LinkStyle}"

    NavigateUri="/Login" TargetName="ContentFrame" Content="Login"/>

    <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

  6. Now let us dive into the UI for Login page. I've used the legendary grid for positioning my elements in here. This what the Login page will look like.

  7. There should be a grid there named LayoutRoot, within that, let us create a Grid with 4 rows and 2 columns. The basic ideology of grids in SL is that, you create the layout first and then say for each control in the page to be within which column and row of the grid.

    <Grid Height="120" Width="212" HorizontalAlignment="Center" VerticalAlignment="Center">

<Grid.RowDefinitions>

<RowDefinition Height="40"></RowDefinition>

     <RowDefinition Height="25"></RowDefinition>

<RowDefinition Height="25"></RowDefinition>

<RowDefinition Height="25"></RowDefinition>

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="60"></ColumnDefinition>

<ColumnDefinition Width="230"></ColumnDefinition>

</Grid.ColumnDefinitions>

        </Grid>

  1. All the elements that need to be within this grid must be within the Grid node. And each of those elements will have Grid.Column and Grid.Row to specify the column and row numbers.
  2. Here comes the individual Login block element, you can always use the powerful designer to drag and position your controls. Because of that, you will have funny margins in the controls.

     <TextBlock Foreground="White" HorizontalAlignment="Center" FontSize="20" Text="Login" Grid.Column="1" Margin="21,0,155,0"></TextBlock>

    <TextBlock HorizontalAlignment="Left" Foreground="White" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Width="Auto">Username</TextBlock>

    <TextBox Width="150" Name="TwitterUsername" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"></TextBox>

    <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Foreground="White" VerticalAlignment="Center" Width="Auto">Password</TextBlock>

    <PasswordBox Grid.Row="2" Grid.Column="1" Width="150" Name="TwitterPassword" HorizontalAlignment="Left"></PasswordBox>

    <Button Name="btnTwitterCredentialsSubmit" Grid.Row="3" HorizontalAlignment="Center" Width="105" Click="btnTwitterCredentialsSubmit_Click" Content="Submit" Margin="0,0,125,0" Grid.Column="1"></Button>

  3. I think I am gonna stop it here for now, blog post is becoming too lengthy. I think this tutorial will go for at least 10 posts. So catch you soon in the next post with more information. In the next part, we will setup a global class to storing and accessing the username and password, retrieving your friends status updates, no access to few pages if the user is not logged in, set your status. We will add more features to make it a more feature rich.
  4. Here is the complete Login.xaml and the completed MainPage.xaml.
  5. If you've any comments / suggestions / questions, please leave a feedback for contact me.
Posted on Sunday, February 28, 2010 9:41 AM Silverlight | Back to top


Comments on this post: Silverlight Twitter Client - Part 1

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Max | Powered by: GeeksWithBlogs.net