While sitting on the couch last weekend, I had the idea for putting up a Twitter panel on my site - you should see it off to the right. I figured since this is a Silverlight site, that it might be nice to actually have some Silverlight on it. I got the Twitter panel mostly done in 2-3 hours, and ended up using a few Silverlight features I haven't blogged about yet on the site - hence this blog post.

This post contains:

• Binaries for the Twitter panel so you can use it on your own site
• Passing in startup parameters from the object embed code
• A simple reusable Twitter assembly for Silverlight
• Source code for the Twitter panel
• Using Fluid UI to animate items added to the ListBox

(click 'read more' to keep reading..)

Downloading and Setting up the Twitter Panel
Attached to this post is the main Silverlight XAP - TwitterPanel.xap. This XAP depends on having System.Xml.Linq.zip in the same folder, which you can download here.

Here is what the object embed code looks like on my site:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
        width="220" height="480"> 
    <param name="source" value="/_SLEmbeds/TwitterPanel/TwitterPanel.xap" /> 
    <param name="onerror" value="onSilverlightError" /> 
    <param name="windowless" value="true" /> 
    <param name="background" value="transparent" /> 
    <param name="initParams" value="TwitterUsername=@SmartyP,TwitterResponseCount=20,ExcludeReplies=True" />
    <param name="minRuntimeVersion" value="4.0.50401.0" /> 
    <param name="autoUpgrade" value="true" /> 
</object>

Note that the initParams parameter is specifying the Twitter username, the number of responses to show, and whether or not to exclude replies in the Twitter panel. To use the panel on your site just change out your Twitter name for mine in the TwitterUsername parameter.

You'll also note that the windowless and background embed parameters are what allow the background of the panel to be transparent. You can also modify the size of the panel by editing the width and height parameters on the object embed code as well.

Reading Startup Parameters via Object Embed Parameters in Silverlight
Attached to this post is the source code for the Twitter panel (SilverlightTwitterPanel.zip). In there you can see how we read in the embed parameters mentioned above. These parameters can be read from StartupEventArgs on the Application_Startup event:

private void Application_Startup(object sender, StartupEventArgs e)
{
    // set defaults in case parameters weren't provided, or can't be parsed            
    string twitterUsername = DEFAULT_TWITTER_USERNAME;
    int responseCount = DEFAULT_RESPONSE_COUNT;
    bool excludeReplies = DEFAULT_EXCLUDE_REPLIES;

    // init params are provided via the embed code in the HTML page under the variable 'initParams'
    if (e.InitParams != null)
    {
        if (e.InitParams.Keys.Contains("TwitterUsername")) 
            twitterUsername = e.InitParams["TwitterUsername"];
                
        if (e.InitParams.Keys.Contains("TwitterResponseCount")) 
            int.TryParse(e.InitParams["TwitterResponseCount"], out responseCount);

        if (e.InitParams.Keys.Contains("ExcludeReplies")) 
            bool.TryParse(e.InitParams["ExcludeReplies"], out excludeReplies);
    }

    var mainPage = new MainPage(twitterUsername, responseCount, excludeReplies);
    this.RootVisual = mainPage;
}

A Simple Twitter Feed Parsing Library
Also attached to this post is SPCoding.TwitterLibrary.dll - a Silverlight 3 assembly to read in Twitter feeds. When I started to write this panel I looked at my ImageWind.net source code and stole out a few base classes - those are what I used to create the attached assembly. Keep in mind this assembly is only for reading in Twitter search responses. The library is broken up into 3 classes:

TwitterEntry.cs - a class that defines a Tweet object
TwitterResponseParser.cs - a parser that converts XML into a collection of TwitterEntry objects via LINQ to XML
WebRequestEngine.cs - a class to queue up Twitter searches and handle their responses

Using the attached assembly is pretty straightforward. You build your search query (API documentation here) and pass it into the EnqueueXMLRequest() method:

Uri searchQuery = new Uri("http://search.twitter.com/search.atom?from=SmartyP", UriKind.Absolute);
WebRequestEngine.EnqueueXMLRequest(searchQuery, (ex, xml) => TwitterFeedQueryResponded(ex, xml));

Then, in the TwitterFeedQueryResponded() method you just need to pass the XML response into the TwitterResponseParser's ParseSearchResponse() method. This method will return you a collection of TwitterEntry objects which you can then use in your app however you'd like:

List<TwitterEntry> allEntries = TwitterResponseParser.ParseSearchResponse(twitterXML);

Using Fluid UI to Animate in Added ListBox Items
One other thing worth noting in the attached code is that it is using the new Fluid UI abilities in Blend 4. By modifying some of the new LayoutStates available in ListBoxItemStyle, we can do transitions when items are added to a ListBox - this is how the animation of the items sliding in is done. In the base state of the template the main grid has a opacity of 0%, and in the AfterLoaded state it has an opacity of 100%. There is also a RenderTransform to animate the object in from the left.

If you are unfamiliar with Fluid UI in Blend 4, check out this post by Adam Kinney.

Keep in mind that the panel I created met my needs - it does not auto-refresh itself every so often, which might be something you'd be interested in. Hopefully the code provided will be enough to help you in coming up with your own Silverlight powered Twitter panel for your own website.