• Re-Using Styles for Different Types: the TargetType of the Style can be a parent type of the target object as long as it only sets properties of the parent type.
  So for example the Fill property of both an Ellipse and Rectangle can be styled by using a Style that’s TargetType is set to Shape (as both Ellipse and Rectangle inherit from Shape)
• Inheriting Styles using the BasedOn property: Styles can be inherited from one another using the BasedOn property. Single inheritance is supported and the depth of inheritance is not limited.
• Implicit styling: Implicit styles allow defining a default style for all instances of a given type within the scope of the control. This feature has been introduced in Silverlight 4.
• Style Precedence: Styles are only applied to a property if that property is not animated, has no local value set and has no value set in a template. This precedence is the same as the dependency property precedence.
• Style Setter Precedence: setters specifying the value of the same property may be declared within the same Style. The last one of them has the highest precedence and will be used.

You can read the (much more detailed) full article on my Scott Logic blog. The next part of the series will cover further advanced topics such as using Styles in code behind and exploring the relationship between styles and dependency properties from a practical perspective.

• What are Styles?
  Styles are basically list of property-value pairs. Defining a style consists declaring the TargetType property and the list of Setters.
• Defining Styles in XAML
  Defining styles in XAML is the easiest and most common method. They can either be defined in the Resources section or inline.
• Styles defined in XAML can be referenced in code-behind.
• Altering visual templates of an object doesn’t always end at styling. More powerful way of customizing the look and feel of objects involves using Control Templates and Themes.

You can read the (much more detailed) full article on my Scott Logic blog. This part has meant to be an introduction, the next parts will dig into more advanced Style usage scenarios.

My entry, Tweet For Your Team shows the tweets of the two teams simultaneously. It measures the live intensity of the tweets (how many are written per minute for each team) and also analyzes their mood by matching keywords and using simple rules to decide whether a tweet carries positive or negative emotions for the team.

The entry also allows visitors to get involved and cheer for or against their team with a single click sending a shout visible to other users off the application. See this post on further details on the application functionality.

Winners of the competition were announced just before the World Cup 2010 final and I was happy to see my entry being selected one of the two winners. As the judging panel wrote in their summary:
“Gergely created a really engaging application that you could easily sit and watch and interact with during any live World Cup match.” And “The performance of the application is really impressive considering tweet rates for Spain alone have been seen to hit 3500 tweets per minute.”

You can read more about the application in the following previous posts:

• World Cup 2010 Real Time Twitter Mashup
• Cheer For Your Team With a Click on TweetForYourTeam.com!
• Video on how TweetForYourTeam works

And of course you can see it in action at TweetForYourTeam.com!

Cheer By a Single Click

In the original version of TweetForYourTeam one was able to engage in cheering for or against a team by sending a tweet to Twitter. In the current update an easier method has been implemented. Under each teams two buttons have been placed that allow one to cheer for or against the team by hitting the button.

Whenever one sends a cheer (or anti-cheer), a cool animation happens on the screen. At the same time this cheer is sent back to the server and immediately appears on all other users’ screen real-time, using Kwwika’s real time notification streaming. So whenever you cheer, everyone else gets to see the same effect go off on their screen.

Hear The Crowd

Sound effects have been added to the application as well. A constant humming vuvuzela sound has been added as background “music” for TweetForYourTeam. The volume of the vuvuzela can be controlled or muted. Also, both supporting and cheering against team trigger a sound effect. These effects not make the application resemble the atmosphere of a World Cup 2010 game even more.

Under the Hood

Implementing sending and receiving notifications of cheering was the biggest feature in this update. However, actually this part took the least time to implement: I’ve spent probably triple the amount of time looking for sound effects and styling the new buttons then writing and reading cheer events.

Until this update the application was only reading the Kwwika stream similar to the way I’ve described in my tutorial on Kwwika’s Twitter streaming.

In this update I’ve had to push data into Kwwika whenever someone clicked on a cheer button and read this data from there, while simultaneously streaming the tweets as well. Implementing this task was actually simpler than I thought thanks to the easy to use topic concept in Kwwika. Each Kwwika stream has a unique URL that one can subscribe to, this is called the topic. So I’ve used a designated topic for writing and reading the cheer events: in this case the /KWWIKA/COMPS/WC2010/COLLABORATE topic. Writing data to this topic was even easier then reading them, a single Publish call had to be made to the Kwwika.IConnection object.

Do you love a team? Or hate one?

The bronze game and final on the World Cup is still to be played. Have your say (or click) and cheer for - or against! - one of the teams at TweetForYourTeam.com.

The application built in this short tutorial will be the following:

Why use a streaming service?

Getting tweets on a certain topic - in our case, the World Cup - can be done in three main ways:

• By polling Twitter using the Twitter API
• By using the Twitter streaming API
• By using a third party streaming service like Kwwika

Polling via the Twitter API requires quite the amount of work:

1. You have to use the Twitter Search API and filter for the #worldcup tag (and perhaps other keywords)
2. You have to handle errors from Twitter (in case the API is down at the moment of polling)
3. You have to be aware not to poll too often: the Twitter Search API quota limitations are quite vaguely phrased, but it’s obvious that polling very often isn’t supported
4. And finally, you have to handle filtering the results on the client side: basically making sure messages aren’t duplicated

The Twitter Streaming API requires to implementing an application consuming the Twitter stream. Unfortunately at the moment I’m unaware of any Silverlight solutions for this, however based on a tutorial of consuming the Twitter API in Python, this method should be easier to implement then the polling version. This post does not focus on implementing the application this way though.

Third party streaming is probably the fastest and easiest way to develop such an application. These services take care of polling/streaming the tweets from Twitter and stream it to the application. Currently the only such service I’m aware of is Kwwika. (Kosmix seem to use such streaming themselves, but currently don’t offer any service to the public).

Streaming World Cup Tweets - With a Few Lines of Code

Using the Kwwika Silverlight API is surprisingly easy. There are three steps to do in order to start receiving tweets: initialize a connection, subscribe to a channel and handle the callback when tweets arrive.

1. Initalizing the connection

The code for the initalization is as follows:

string apiKey = "7d476620-8a67-11df-a4ee-0800200c9a66"; // Demo key. To use other channels than the one in this demo, request an API key at kwwika.com 
string domain = "gergelyorosz.com"; // Your application domain
Kwwika.Service.ConnectionCreated += new Kwwika.ConnectionCreatedEventHandler(Service_ConnectionCreated);
Kwwika.Service.Connect(apiKey, domain);

During initialization a callback method has to be provided that’s called once the connection is ready.

2. Subscribing to a stream

Subscribing for a stream (in this case the uncategorized World Cup Tweets) is as follows:

public partial class MainPage : UserControl, Kwwika.ISubscriptionListener
{
    private Kwwika.IConnection _kwwikaConnection;
 
    /// 
    /// Called when thte Kwwika connection has been initialized
    /// 
    void Service_ConnectionCreated(Kwwika.ConnectionCreatedEventArgs e)
    {
        _kwwikaConnection = e.Connection;
        // Subscribe to the topic to be pushed: for now let's choose the World Cup "Other" topic
        _kwwikaConnection.Subscribe("/KWWIKA/TWITTER/SEARCHES/WC2010/OTHER", this);
    }
}

A Kwwika.ISubscriptionListener type object can subscribe to a channel through the connenction object. For the simplicity of the code I’ve made the MainPage UserControl implement the ISubscriptionListener interface and have subscribe to the channel.

3. Handling incoming tweets

After having subscribed, the ISubscriptionListener objects two methods, TopicUpdated and TopicError methods get called whenever a message has arrived. The code for this is as follows:

    /// 
    /// Kwwika.ISubscriptionListener implementation: called when new data has been pushed
    /// 
    public void TopicUpdated(Kwwika.ISubscription sub, Dictionary values, bool isImage)
    {
        // If a new result comes in, parse it and insert it!
        if (values.ContainsKey("Text"))
        {
            var message = new TwitterMessage()
            {
                Text = values["Text"],
                ScreenName = values["ScreenName"],
                CreatedAt = values["CreatedAt"],
                UserFollowersCount = values["UserFollowersCount"],
                Id = values["Id"],
                UserProfileImage = new Uri(values["UserProfileImageUrl"], UriKind.Absolute),
            };
            this.Dispatcher.BeginInvoke(new Action(() => { _twitterMessages.Insert(0, message); }));
        }
    }
 
    /// 
    /// Kwwika.ISubscriptionListener implementation: called when an error occured during pushing the data
    /// 
    ///
 
    ///
 
    public void TopicError(Kwwika.ISubscription sub, Kwwika.CommandErrorType error)
    {
        // TODO: handle if an error occurs during the streaming
    }

Streaming World Cup Tweets: the Complete Source Code

After taking care of creating a connection, subscribing to it and handling message updates, all that’s left is updating the UI. This I’ve done using a ListBox that has an ObservableCollection of twitter messages bound to it. The source of the backend is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
 
namespace TwitterPushSearch
{
public partial class MainPage : UserControl, Kwwika.ISubscriptionListener
{
    /// <summary>
    /// Collection of twitter messages 
    /// </summary>
    private ObservableCollection<TwitterMessage> _twitterMessages = new ObservableCollection<TwitterMessage>();
 
    private Kwwika.IConnection _kwwikaConnection;
 
    public MainPage()
    {
        InitializeComponent();
 
        _twitterMessages.CollectionChanged += (e, s) => { TwitterMessages.UpdateLayout(); };
        TwitterMessages.ItemsSource = _twitterMessages;
 
        // Init the push connection
        string apiKey = "7d476620-8a67-11df-a4ee-0800200c9a66"; // Demo key. To use other channels than the one in this demo, request an API key at kwwika.com 
        string domain = "gergelyorosz.com"; // Your application domain
        Kwwika.Service.ConnectionCreated += new Kwwika.ConnectionCreatedEventHandler(Service_ConnectionCreated);
        Kwwika.Service.Connect(apiKey, domain);
    }
 
    /// <summary>
    /// Called when thte Kwwika connection has been initialized
    /// </summary>
    void Service_ConnectionCreated(Kwwika.ConnectionCreatedEventArgs e)
    {
        _kwwikaConnection = e.Connection;
        // Subscribe to the topic to be pushed: for now let's choose the World Cup "Other" topic
        _kwwikaConnection.Subscribe("/KWWIKA/TWITTER/SEARCHES/WC2010/OTHER", this);
    }
 
    /// <summary>
    /// Kwwika.ISubscriptionListener implementation: called when new data has been pushed
    /// </summary>
    public void TopicUpdated(Kwwika.ISubscription sub, Dictionary<string, string> values, bool isImage)
    {
        // If a new result comes in, parse it and insert it!
        if (values.ContainsKey("Text"))
        {
            var message = new TwitterMessage()
            {
                Text = values["Text"],
                ScreenName = values["ScreenName"],
                CreatedAt = values["CreatedAt"],
                UserFollowersCount = values["UserFollowersCount"],                   
                Id = values["Id"],
                UserProfileImage = new Uri(values["UserProfileImageUrl"], UriKind.Absolute),
            };
            this.Dispatcher.BeginInvoke(new Action(() => { _twitterMessages.Insert(0, message); }));
        }
    }
 
    /// <summary>
    /// Kwwika.ISubscriptionListener implementation: called when an error occured during pushing the data
    /// </summary>
    /// <param name="sub"></param>
    /// <param name="error"></param>
    public void TopicError(Kwwika.ISubscription sub, Kwwika.CommandErrorType error)
    {
        // TODO: handle if an error occurs during the streaming
    }
}
 
public class TwitterMessage
{
    public string Text { get; set; }
 
    public string ScreenName { get; set; }
 
    public string CreatedAt { get; set; }
 
    public string UserFollowersCount { get; set; }
 
    public string Id { get; set; }
 
    public Uri UserProfileImage { get; set; }
}
}

The code for the XAML:

<UserControl x:Class="TwitterPushSearch.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
 
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Vertical"  Width="400">
    <TextBlock FontWeight="Bold">The latest World Cup tweets:</TextBlock>
    <ScrollViewer Height="400">
        <ListBox x:Name="TwitterMessages" BorderThickness="0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border x:Name="MessageBorder" BorderThickness="1" BorderBrush="Gray" Padding="5,5,5,5">
                        <StackPanel Orientation="Vertical" Width="350" Margin="0,0,0,10">
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                <Border BorderThickness="1" BorderBrush="Gray" Margin="5,5,5,5" VerticalAlignment="Top">
                                    <Image Source="{Binding UserProfileImage}" Width="48" Height="48"/>
                                </Border>
                                <TextBlock Text="{Binding Text}" Width="210" TextWrapping="Wrap" Margin="0,5,5,5" VerticalAlignment="Top"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <HyperlinkButton Content="{Binding ScreenName}" NavigateUri="{Binding TwitterUserUrl}" TargetName="_blank" FontWeight="Bold" Margin="60,0,0,0"/>
                                <TextBlock Margin="5,0,0,0"> at</TextBlock>
                                <TextBlock Text="{Binding CreatedAtText}" Margin="5,0,0,0"/>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>            
        </ListBox>
    </ScrollViewer>
</StackPanel>
</UserControl>

The source for the complete application can be downloaded here: Twitter Push Client.zip.

Streaming Real-Time Data: Not Just World Cup Tweets, Not Just Tweets

Kwwika, the third party service I’ve used in this application is of course not limited to streaming only World Cup tweets, what’s more, not even limited to just tweets. They provide a service allowing distribution of any data real-time on numerous platforms: may that be tweets on a specific topic, chat messages, breaking news or any other real-time usage.

If you’re interested, feel free to contact them on usage terms, pricing and feature requests: I’ve found them to be extremely helpful and responsive.

What does it do?

The application streams tweets live from the two teams playing live or playing the next game (using the Kwwika service). It also shows the live score on the top (provided by Opta), so even if you’re not in front of a telly, you can be aware of it. Now, for the fun part…

The app monitors the tweet intensity, that is the number of tweets per minute for each side. Hours before the game this value is typically around 5-10/minute, right before the game it’s usually at least 300/minute and from there it pretty well reflects how nerve wracking the game is. The highest number I’ve experienced up to the semi finals. was around 3500/minute for Spain, when they shot - and missed - the second penalty against Paraguay in the quarter finals.

Tweet intensity is an interesting indicator, but an even more useful one is the mood meter. The application tries to evaluate the mood of each tweet coming in and decide whether it is more of a positive message (”yaaay!!”) or a negative one (”boooo!”). The tweets are colored according to this: red ones mean negative, green ones positive and yellow is neutral (or at least the application couldn’t decide).

Tweet intensity tends to pretty well reflect on the game: usually when a team is scored a goal it tends to go down… though it’s hard to predict by how much - sometimes the fans just keep sending positive messages to the team even after their team has gotten behind!

As mentioned before the application streams data in real time. When a game is on this literally means thousands of updates per second on the screen which is enough to make anyone dizzy after a few minutes. Because of this only turn the update speed up to real time if you’re ready for it!

Update: the application has been extended with new functionality. See this post on the new features.

The following video shows the application working during the Argentina-Germany semi-final:

How Does It Work?

The application does not poll the Twitter API directly, instead, it uses Kwwika, a newly launched real-time data delivery service. Kwwika takes care of gathering the data real time and streams it directly to the client application. Real-time match data is streamed by Opta live sports data through the Kwwika service as well.

The application is built in Silverlight. I could have chosen HTML5 + Javascript implementation as well as Kwwika provides a JSON API. However having experienced the update speed it’s safe to say that Silverlight was a good choice performance wise: it took some tweaking to be able to seamlessly visualize up to 50 updates per second on the screen.

Can I see it?

Visit Tweet For Your Team to try out the application. Since this is a live service, you’ll see the most action if you go right before or during the games - be sure to check it out during the semi-finals and the finals of the World Cup!

The application was originally built for the Kwwika World Cup 2010 Real-Time Push Web App competition sponsored by TellyLinks.com - wish me luck so that it will succeed there!

Printing a chart

There are lots of examples on blogs demonstrating printing on simple elements. However I wanted to test how the printing functionality performs when working with charts.

I chose to use the most widespread (and free) charting component, the Silverlight Toolkit. In my example I’ve created four charts and added printing support to all of them like this:

Chart chartToPrint; // The element to be printed
PrintDocument doc = new PrintDocument(); // Create the PrintDocument  object that will do the printing
doc.PrintPage += (s, args) =>
{
  // Set the chart that needs to be printed.
  // As soon as this is set, printing starts
  args.PageVisual = chartToPrint;
}

In the example the whole page can be printed as well by clicking on the Print whole page button. In this case the LayoutRoot element is passed as the PageVisual. Test the example yourself:

Auto scale the charts to fit the page

Printing worked good, however when printing a page the chart kept it’s original size which was only fraction of the page. I was looking for a way to increase the size of the printed chart to fill out the printed page.

The solution consisted of two steps. First, the Width and Height of the chart had to be set to the PrintableArea.Width and PrintableArea.Height value within the PrintPage event of the PrintDocument. Second, the effects of changing the chart size don’t take effect immediately and I only want to start printing once the chart has been resized. So I’ve registered the SizeChanged event of the chart to update the PageVisual of the printed page once the chart has been resized.

doc.PrintPage += (s, args) =>
{
    elementToPrint.Width = args.PrintableArea.Width;
    elementToPrint.Height= args.PrintableArea.Height;
    // Printing only starts when args.PageVisual != null
    // Only set args.PageVisual to elementToPrint once its size has been updated
    elementToPrint.SizeChanged += (s1, args1) =>
    {
       args.PageVisual = elementToPrint;
     };
}

(For a bit more detail on this step see the Auto scaling charts to fit the page section here)

I’ve created a new example that now supports printing without changing size and printing that auto scales the charts to match page size:

The source of this application can be downloaded from here: PrintingExample.zip.

For more detailed information on printing events and some more thoughts on auto scaling and multi page printing read my blog post Advanced Printing in Silverlight: Printing Charts and Auto Scaling on my Scott Logic blog.

After Silverlight 4 released I was hoping that this issue is fixed. However, I was disappointed to see that it still exists. My problem with this bug is that I’m working on a charting application that supports zooming. The easiest way to do this applying RenderTransforms and ScaleTransforms to the elements plotted. However due to this bug zooming is limited until the zoomed element size is 32K - this sets a practical limit of about 70-150x zoom (based on the original element size) which in my case is a serious limitation.

To experience the bug, here is an application that reproduces it. Enter 66000 into the square size field to experience the original green element being incorrectly displayed.

The source of the example can be downloaded from here: SilverlightLargePathsDrawingBug.zip

For this reason I have created a simple Javascript function returning the Silverlight version number installed on the client machine or returning -1 if Silverlight is not installed. The source code can be downloaded from here:
SilverlightVersion.js
The script can be used the following way:

var slVersion = GetSilverlightVersion();
if(slVersion != -1)
   document.writeln("Your Silverlight version is: <strong>" +slVersion + "</strong>" );
else
   document.writeln("<strong>Your do not have Silverlight installed on this computer</strong>");

And this is the script in action:

If you’re interested in how the script actually works and what the Silverlight version numbers mean, read the post on my ScottLogic blog: Determining Silverlight Version Installed - source code & explanation

Kairos Society is an invite-only foundation aimed to unite the world’s brightest young minds. Each year they hold a global summit where some of the most influential leaders are brought together with a select group of the world’s most innovative and entrepreneurial students. As part of the summit the 100 most innovative student projects are exhibited - I’ll also be one of the exhibitors as participant in the Green Watering Project.

I have been invited to this year’s summit based on the Green Watering project I’ve played marginal role in developing. The project is an integrated hardware and software solution aimed to dramatically reduce the amount of water used for irrigation. The project has received numerous awards so far including worldwide third place on the Microsoft Imagine Cup (the world’s premier student technology competition) in Paris, 2008, and first prize on the Innovation Accelerator in Silicon Valley, 2009.

I’m really excited about the summit - it psyched about exhibiting within the New York Stock Exchange, curious about the other projects and looking forward to networking with all the bright people!