My First Metro style app on Win 8 : Twitter client

To start with, if you are a .net developer and you already know XAMl and C# then you are already a metro app developer.  Follow this blog post to find out more.

Here are screenshots of metro app that I have developed.

Start

Home

Tweets

This app provides following features:

1. Tweet to your account.

2. View your followers and list of there tweets.

3. Details of your followers, Like No of tweets.

If you would like to create something like this or may be extend this further then these steps should help you in kicking off your metro app.

Setting Up Twitter and its API’s

To access your twitter account programmatically, you will need following.

1. For setting up twitter, first step will be to create your twitter developer account by visiting www.dev.twitter.com and creating an application with read-write access.  My last blog post has detailed steps for configuring your twitter dev account.

2. I am using TweetSharp binaries to tweet to my account, available for download at : https://github.com/danielcrenna/tweetsharp

Once you have configured twitter it’s time to jump to most exciting part i.e. writing your first metro app.

Launch visual studio 11 and create a solution with two projects inside it

image

1. Application Project: This is the Metro App project. I chose to use Application project because it contains minimal files required to get started from scratch.

2. Class Library – This will act as a data source for your metro app and will have necessary methods to pull information from twitter account.

Let’s start from ClassLibrary project and give it a name as: Tweeter and reference this project in your metro app project.

Before you move ahead expectation is that twitter account is configured and you have defined your access tokens/ secret key in a config/class file.  I have done this as a part of my last blog post.

In your class library project define a entity class : TwitterProfile

public class TwitterProfile
    {
        public string ProfileImageUrl { get; set; }
        public string ScreenName { get; set; }
        public int FollowerCount { get; set; }
        public int StatusCount { get; set; }
        public int Id { get; set; }
        public List<TwitterStatus> TwitterStatuses { get; set; }
    }

This entity class will hold data for a twitter profile, with details like ImageUrl, ScreenName…  If you want to show more details for twitter profile then extend this class by adding properties and by setting newly added properties in TweetHelper (described next).

Define another class which will pull information from your twitter account and fill data in TwitterProfile entity defined above:

public class TweetHelper
   {
       private static TwitterService twitterService = null;

       public void Tweet(string tweet)
       {
           twitterService = TwitterProxy.ConnectToTwitter();
           var result = twitterService.SendTweet(tweet);
       }

       public List<TwitterProfile> GetFollowers()
       {
           twitterService = TwitterProxy.ConnectToTwitter();
           var followers = twitterService.ListFollowers();
           var twitterProfiles = new List<TwitterProfile>();
           foreach (var follower in followers)
           {
               twitterProfiles.Add(
                   new TwitterProfile
                   {
                       ProfileImageUrl = follower.ProfileImageUrl,
                       ScreenName = follower.ScreenName,
                       FollowerCount = follower.FollowersCount,
                       StatusCount = follower.StatusesCount,
                       Id =  follower.Id
                   }
                   );
           }
           return twitterProfiles;
       }

       public List<TwitterStatus> GetTweetsForProfile(int profileId,int noOfTweets)
       {
           twitterService = TwitterProxy.ConnectToTwitter();
           var tweets = twitterService.ListTweetsOnSpecifiedUserTimeline(profileId, noOfTweets);
           return tweets.ToList();
       }

    }

Coming to application project, you can define a splash screen for your app by opening Package.AppxXManifest and specify the image to be used for splash screen.

AppManifest

In your start up page of metro app, i.e. MainPage.Xaml declare your grid like this:

<Grid x:Name=”LayoutRoot” ShowGridLines=”True” Background=”#FF0C0C0C” Margin=”100,20,100,20″>
       <Grid.RowDefinitions>
         <RowDefinition Height=”Auto”  />
         <RowDefinition />
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
           <ColumnDefinition/>
       </Grid.ColumnDefinitions>
     <StackPanel Grid.Row=”0″>
       <local:FollowingList/>
     </StackPanel>
     <StackPanel Grid.Row=”1″ VerticalAlignment=”Bottom”>
     <local:AppBar/>
     </StackPanel>
   </Grid>

I am using couple of UserControls in my home page (user control):

1. AppBar – This is the app bar that I have used from MSDN samples gallery and modified it by inserting a textbox and a button which can be used for tweeting. The code for appbar can be found here: http://code.msdn.microsoft.com/windowsapps/

2. FollowingList – This is the list which displays people I am following on twitter.  I am using a datatemplate to format the look and binding.

XAML:

<ListView
            BorderBrush=”#FF0C0C0C”
            x:Name=”followingsList”
            Width=”Auto”
            Height=”650″
             ItemTemplate=”{StaticResource FollowingListTemplate}”
            BorderThickness=”1″
            VerticalAlignment=”Stretch”
            ScrollViewer.VerticalScrollBarVisibility=”Auto”
            ScrollViewer.HorizontalScrollBarVisibility=”Auto” IsItemClickEnabled=”True”
            >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation=”Vertical”/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

        </ListView>

DataTemplate for Listview:

<DataTemplate x:Key=”FollowingListTemplate”>
            <Grid HorizontalAlignment=”Left” Background=”#FF0C0C0C”>
                <Button BorderBrush=”Black” Click=”Button_Click” Tag=”{Binding ProfileId}”>
                    <StackPanel Orientation=”Horizontal” Margin=”10,10,0,0″>
                        <Image Source=”{Binding ProfileImageUrl}” Height=”60″ Width=”60″ VerticalAlignment=”Center” Margin=”0,0,10,0″/>
                        <StackPanel Margin=”0,0,0,0″ Orientation=”Vertical”>
                            <TextBlock TextWrapping=”Wrap” Style=”{StaticResource ItemTitleStyle}” Width=”200″ VerticalAlignment=”Center” Text=”{Binding ScreenName}” HorizontalAlignment=”Left” FontFamily=”Segoe UI” />
                            <StackPanel Orientation=”Horizontal”>
                                <TextBlock TextWrapping=”Wrap” Style=”{StaticResource ItemSubtitleStyle}”  Text=”Follower Count : ” HorizontalAlignment=”Left”/>
                                <TextBlock TextWrapping=”Wrap” Style=”{StaticResource ItemSubtitleStyle}” Text=”{Binding FollowerCount}” />
                            </StackPanel>
                            <StackPanel Orientation=”Horizontal”>
                                <TextBlock TextWrapping=”Wrap” Style=”{StaticResource ItemSubtitleStyle}”  Text=”Tweets : ” HorizontalAlignment=”Left”/>
                                <TextBlock TextWrapping=”Wrap” Style=”{StaticResource ItemSubtitleStyle}” Text=”{Binding StatusCount}” />
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                </Button>
            </Grid>
        </DataTemplate>

In the code behind of followinglist user control, call following method from constructor to bind ListView control.

private void Initialize()
       {
           var th = new TweetHelper();
           var followers = th.GetFollowers();
           followingsList.ItemsSource = followers;
       }

Use following code on button click of Tweet button on AppBar control to tweet with your own text:

private void btnTweet_click(object sender, RoutedEventArgs e)
      {
          var th = new TweetHelper();
          th.Tweet(txtTweet.Text);
          txtTweet.Text = string.Empty;
      }

This should set up your home page.

For showing tweets when a particular profile is selected on home screen, we need another user control for that.
Create a TweetList user control:

XAML:

<Canvas Margin=”200,0,0,0″>
      <StackPanel Canvas.Left=”20″>
          <Button Style=”{StaticResource H1Style}”  x:Name=”BackButton”  Background=”Black” BorderThickness=”0″ Click=”BackButton_Click” >
              <Image Source=”images/back_gray.png”/>
          </Button>
      </StackPanel>
     
      <StackPanel Canvas.Left=”115″ Canvas.Top=”10″ HorizontalAlignment=”Right”>
          <Image  Source=”{Binding ProfileImageUrl}” Width=”60″ Height=”60″ />
      </StackPanel>

      <StackPanel Canvas.Left=”185″  Canvas.Top=”10″>
          <TextBlock  Style=”{StaticResource ItemTitleStyle}” Text=”{Binding ScreenName}” />
          <ListView
               Height=”650″
              Margin=”0,20,0,0″
              ScrollViewer.VerticalScrollBarVisibility=”Visible”
              ItemTemplate=”{StaticResource tweetList}”
              ItemsSource=”{Binding TwitterStatuses}”>
          </ListView>
      </StackPanel>
  </Canvas>

Here is data template for binding and styling listview, declare it in resources section of user control.

<DataTemplate x:Key=”tweetList”>
            <Grid>
               <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                   <TextBlock Grid.Row=”0″ TextWrapping=”Wrap” Width=”500″ Style=”{StaticResource ItemTitleStyle}” Text=”{Binding Text}”/>
                   <TextBlock Grid.Row=”1″ HorizontalAlignment=”Right” Style=”{StaticResource ItemSubtitleStyle}” Text=”{Binding CreatedDate}”/>
           </Grid>
</DataTemplate>

CodeBehind:

public sealed partial class TweetList
{
    public TweetList()
    {
        InitializeComponent();
    }

    public TweetList(TwitterProfile tp)
    {
        InitializeComponent();
        tp.TwitterStatuses = new List<TweetSharp.TwitterStatus>();
        var th = new TweetHelper();
        var tweets = th.GetTweetsForProfile(tp.Id, 20);
        tp.TwitterStatuses = tweets;
        this.DataContext = tp;
    }

    private void BackButton_Click(object sender, RoutedEventArgs e)
    {
        var mainPage = new MainPage();
        Window.Current.Content = mainPage;
        Window.Current.Activate();
    }

}

Don’t forget to add following code in home page to provide ability to navigate tweetlist usercontrol when an item is selected in listview.

private void Button_Click(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;
            var profile = btn.DataContext as TwitterProfile;
            var tweetListPage = new TweetList(profile);
            Window.Current.Content = tweetListPage;
            Window.Current.Activate();
        }

One of the things to observe here is that I am using content property of window to navigate to tweetlist user control.

This should set up your tweetlist user control.

In this blog post I have covered how you can create a basic personal twitter client for yourself by using your existing .net skills like XAML and C#.

This sample can be extended in many ways to learn keys features of Win8, here are some points I can think for extending this app:

Extending this app:

1. In place of splash screen image, use a custom animation.

2. Use pages instead of user control and provide ability to handle navigation using appbar.

3. Change the orientation of app when a user rotates the tablet.

4. Have a consistent app bar in the application.

Advertisements

5 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s