What started it

Are you using Twitter? Do you like it or absolutely loathe it? I do like it but one thing I don’t like is constantly checking twitter.com to see if someone tweeted something interesting. So a new idea was born and the wasting of time began.

The idea

Actually it’s pretty simple, I wanted an application that showed a pop-up of some kind that shows me the latest tweet for a minute or so and then disappear, similar to the new e-mail popup of Outlook. Another feature I wanted to make is that when I mouse over on the pop-up the app shows me the last 10 tweets from my timeline.

Problem #1

First things first, how to get the last tweets from Twitter? As all programmers are lazy (see http://blogoscoped.com/archive/2005-08-24-n14.html) I’ve started looking for a library that could do this for me. Lo’ and behold: LINQ To Twitter. A wrapper around the Twitter web services written by Joe Mayo (Microsoft MVP) in C#.

So, problem #1 was solved.

Problem #2

The next problem was one of UI. How to display a nice pop-up that gives access to the rest of the application? What I wanted to do is create a window that slides in from the top of the screen when a new Tweet is posted and when the mouse is over it, expand to show the last 10 tweets. Because a default window border doesn’t look all that nice I’ve decided to use a transparent window:

XAML:

<Window

 Background="Transparent"
 AllowsTransparency="True">
 <Grid>
  <Border>
   <ScrollViewer>
    <ItemsControl />
   </ScrollViewer>
  </Border>
 </Grid>
</Window>

As you can see it’s a pretty simple UI but that’s exactly what I wanted. What you see is a transparent Window with a Border and ScrollViewer (the green bit) that hosts an ItemsControl, nothing fancy so far. The next step was to set the initial position of the window. A simple RenderTransform took care of that:

XAML:

<Border.RenderTransform>
<TranslateTransform Y="-360"  />
</Border.RenderTransform>

The ItemTemplate of the tweets is also quite straightforward:

XAML:

<DataTemplate>
  <Border>
    <StackPanel Orientation="Vertical">
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
        <TextBlock Text="{Binding Path=User.Name}" />
        <TextBlock Text=" at " />
        <TextBlock Text="{Binding Path=CreatedAt}" />
      </StackPanel>
      <TextBlock Text="{Binding Path=Text}" TextWrapping="Wrap" />
    </StackPanel>
  </Border>
</DataTemplate>

The result looks like this:

Fancy UI

The important part of the application was to “popup” (or down actually) when a new tweet is available and when the mouse enters the application so all tweets are shown. To do this three storyboards are needed:

1.       Animate to the new tweet view

2.       Animate to the full view

3.       Animate to the hidden view

The storyboards all animate the RenderTransform of the Border that hosts the controls.

XAML:

<Storyboard  x:Key="Hidden">
  <DoubleAnimation
    Storyboard.TargetProperty="Opacity"
    To="0.4"
    Duration="0:0:0.2" />
  <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
    To="-370"
    Duration="0:0:0.2"
    BeginTime="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="NewTweet">
  <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
    To="-295"
    Duration="0:0:0.2" />
   <DoubleAnimation
    Storyboard.TargetProperty="Opacity"
    To="1"
    Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key"AllTweets">
  <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
    To="-20"
    Duration="0:0:0.2" />
  <DoubleAnimation
    Storyboard.TargetProperty="Opacity"
    To="1"
    Duration="0:0:0.2" />
</Storyboard>

These storyboards are started by various events in the application. For example: MouseEnter and MouseLeave on the Border trigger the AllTweets and Hidden Storyboards.

Timeline

So far so good, the UI is basically finished and all that remains is to fill the application with the tweets from my timeline. For this I’ve created a Timeline class that contains the TwitterContext and a simple timer for the refresh action. The grunt of this class is the following LINQ statement:

LINQ:

var statusTweets =
from tweet in  this.context.Status
where tweet.Type == statusType
            && tweet.ScreenName == this.screenName
            && tweet.Count == maximumTweetsPerRefresh
            && tweet.CreatedAt > lastTweetDate
select tweet;

This statement will retrieve all tweets from the timeline specified with screenName that have been created since the last refresh.  If this results in 1 or more tweets the Timeline class will raise the NewTweetsAvailable event to notify the application that new tweets are available to display.

The event handler simply pushes the new tweets to the ItemsControl and starts the NewTweet storyboard to pop-down the window so the latest tweet is visible.

Wrap up

As you can see it’s really simple to build an application that shows the latest tweets in your Twitter timeline. Of course there are a few features that are missing, for example the storyboards, but I’ll blog about them a bit later. Be sure to check #TwitCast for updates

Update:

TwitCast is now listed on Codeplex at http://twitcast.codeplex.com/