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/

var voyages = from voyage in entities.Voyage
              select new { Number = voyage.Number, ETA = voyage.StartTime };

dataGridTest.ItemsSource = voyages;

XAML

<DataGrid Name="dataGridTest">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Number" Binding="{Binding Path=Number}" />
        <DataGridTextColumn Header="ETA" Binding="{Binding Path=ETA}" />
    </DataGrid.Columns>
</DataGrid>

Seems straightforward enough, doesn’t it? Well it does but when you try to run it, it’ll crash and burn with the following exception:

InvalidOperationException: A TwoWay or OneWayToSource binding cannot work on the read-only property ‘Number’

The reason that the InvalidOperationException gets thrown is that the Binding used to bind the column to a property is a TwoWay binding, by default!

But why should (and is) this be a problem? Well, because the result from the LINQ is a new class that contains only get-properties. This is by design because an anonymous type can only contain get-only properties as is written on MSDN:

Anonymous types provide a convenient way to encapsulate a set of read-only properties into a single object without having to first explicitly define a type.

There are two workarounds for this problem, one is simply to add Mode=OneWay to the Binding property of the DataGridTextColumn. This will tell the DataGrid (ultimately the Binding) that it should not attempt to write data back to the bound object.

The other workaround is not to use an anonymous type. If you need to be able to change data in the result set this is probably the way to go. By defining a type that contains the properties you want to bind on you can tell LINQ to return that specific type and not an anonymous one.

For example:

C#

public class VoyageResult {
    public int Number { get; set; }
    public DateTime ETA { get; set; }
}
var voyages = from voyage in entities.Voyage
              select new VoyageResult()
              {
                   Number = voyage.Number,
                   ETA = voyage.StartTime
              };

voyages will now contain a list of VoyageResults instead of a generated anonymous type (with exactly the same properties!) If you bind this list to the DataGrid it will use the default TwoWay binding without complaints.