Twitter, using simple SMS length messages, has changed how people stay connected.  Here's how to build a Silverlight web client to access the Twitter API and display your tweets in a layout of your choosing.  The Twitterlight code provides a solid starting point for communicating with any RESTful service interface, and you'll also see how to overcome Silverlight's cross-domain call limitations by leveraging a local proxy web service.

Steve Holstad Steve's Blog Difficulty: Intermediate Time Required: Greater than 10 hours Cost: Free Software: Microsoft Visual Studio, Silverlight 2.0 Alpha September Refresh, (NEW) Silverlight 2.0 Beta 1, ComponentOne Sapphire Toolset Hardware:

Developer Update (5/18/2009)

The Silverlight 2.0 RTW Source Code is available at the link below.  Please note that the RTW version contains no reference to the Sapphire controls used during the SL 2 Beta.

Twitterlight_v22.zip

I am planning to create a new Twitterlight version for Silverlight 3, so I'm sad to say this code base won't be updated past 2.0.  Thanks for the feedback and support!

Developer Update (4/1/2008)

Twitterlight has been updated to the newest Silverlight release: Silverlight 2.0 Beta 1.  You'll need this runtime installed in order to run the app at twitterlight.com.  Don't forget that to compile the code, you must download, install and add references to the appropriate ComponentOne Sapphire control set.

Introduction

I've become a big believer in the power of Twitter to keep an informal social network of like-minded folks loosely yet immediately connected.  Often times developers have a decent number of contacts they'd like to keep in contact with, but perhaps don't always have time to reach out one-on-one often enough.  Twitter provides a mechanism which somehow gives that constantly connected "feel".  As a consultant that works at many sites, I wanted to create a web-based client to allow Twitterers like me to remain connected without the need for installing any applications on their current machine.  Silverlight will give the UI more pop than the existing Twitter site, and provide features like auto-update and TinyURL support.

Notes

If you have a Twitter account, try the app at Twitterlight.com.

The Twitterlight project is written using the Silverlight 2.0 Beta 1.  Previously this article was published using the Silverlight 1.1 Alpha September Refresh.

The Twitterlight project consists of a Silverlight application (TwitterSL), a web site (TwitterSLServer) and a class library containing common controls (TwitterSL.Common). 

By now Silverlight is now infamous for its security setting which prevents cross-domain calls.  What this means is that in order to serve external data, a Silverlight application must call to a web service hosted within the same domain.  This proxy web service can then issue the post to the external data source (here the Twitter API), parse the result, and return back the result to the initial Silverlight code.    Therefore the TwitterSLServer web site contains a local web service (TwitterWebService.asmx) to marshall the Twitter web requests, acting as a the proxy between Silverlight code and the Twitter API.

How it all works

Silverlight application (TwitterSL): The Silverlight project lives and dies with the Page.xaml markup and Page.xaml.cs code-behind.  This code creates the application shell, collects user authentication info, and provides the mechanism for posting new statuses to Twitter (including TinyURL support).  TinyURL, btw, is a must-have for Twitter, because posts are limited to the length of SMS messages, ~140 characters.  TinyURL replaces a full-sized link with a mini-me version of the link, giving you extra room to vent about Roger Clemens or Kanye West's Grammy speech.  Sweet.

The Page.xaml.cs code maintains a reference to the local web service and issues all Twitter API web requests asynchronously to this proxy.  When a response is returned, the XML snippet is parsed and mapped to a new instance of TwitControl, and inserted into the message container.  The app allows users to toggle the type of response returned, from Public (all latest posts), Archive (your posts), Replies (directed at you), and the standard Friends (you and all your buddies).

Control Toolset (ComponentOne Sapphire): I used ComponentOne's new Sapphire control toolset for this project.  These controls add some nice functionality to a Silverlight project without forcing developers to create everything from scratch.  I used C1's Label, LinkLabel and StackPanel to create the TwitControl, and the StackPanel and FlowPanel within Page.xaml to setup the layout of the application.  I recommend trying these controls if you're starting out in Silverlight: a trial version is provided, and the support response was solid when I ran into a few minor issues.  I'm excited to see the improvements to both Silverlight and the available control toolsets as they evolve together.  One thing to note is that I created all third-party controls at runtime in order to avoid some VS designer issues, which should be corrected in the future. 

You'll need to download and install this toolset from the ComponentOne site, and add references to C1.Silverlight.dll in order to compile the project.

Here's how to add a few controls to the XAML (the sp.ReplacePlaceHolder call swaps out a Silverlight placeholder with the newly created StackPanel):

C#:

/// <summary>
/// Builds third party controls dynamically at runtime
/// </summary>
private void CreateComponentOneControls()
{
    TextBlock twitMessage = new TextBlock();
    twitMessage.Width = 290;
    twitMessage.FontSize = 11;
    twitMessage.Foreground = new SolidColorBrush(Colors.White);
    twitMessage.TextWrapping = TextWrapping.Wrap;
    _twitMessage = twitMessage;
            

    ... other controls initialized...

    twitTextPlaceholder = implementationRoot.FindName("twitStackPanelPlaceholder") as Canvas;
                        
    C1StackPanel sp = new C1StackPanel();
    sp.IsHorizontal = false;
    sp.ReplacePlaceHolder(twitTextPlaceholder, true);
    sp.AutoSize = AutoSize.Both;
    sp.Padding = new Thickness(5, 5, 2, 5);
    sp.HorizontalAlignment = Alignment.Near;
    sp.VerticalAlignment = Alignment.Near;
    sp.ChildSpacing = new Size(2, 0);
                       
    sp.Children.Add(twitMessage);        
}

VB:

''' <summary>
''' Builds third party controls dynamically at runtime
''' </summary>
Private Sub CreateComponentOneControls()
    Dim twitMessage As New TextBlock()
    twitMessage.Width = 290
    twitMessage.FontSize = 11
    twitMessage.Foreground = New SolidColorBrush(Colors.White)
    twitMessage.TextWrapping = TextWrapping.Wrap
    _twitMessage = twitMessage

    ...other controls initialized ...

    twitTextPlaceholder = CType(implementationRoot.FindName("twitStackPanelPlaceholder"), Canvas)

    Dim sp As New C1StackPanel()
    sp.IsHorizontal = False
    sp.ReplacePlaceHolder(twitTextPlaceholder, True)
    sp.AutoSize = AutoSize.Both
    sp.Padding = New Thickness(5, 5, 2, 5)
    sp.HorizontalAlignment = Alignment.Near
    sp.VerticalAlignment = Alignment.Near
    sp.ChildSpacing = New Size(2, 0)

    sp.Children.Add(twitMessage)
End Sub  

Control library (TwitterSL.Common): The custom control library contains just one object: TwitControl.  An instance of this control is dynamically created for each Tweet returned from Twitter.   The control is then inserted at runtime into the parent Tweet container.  Take a look at the XAML of this control to see how some simple animation storyboards can be tied to each control and wired up to individual control events.

Web project (TwitterSLServer): The web site project contains a single web page which hosts the Silverlight container.  The project has been linked to the Silverlight project, and the default.htm and Page.xaml objects have been copied to the site.  The web project is set as the startup project, but remember all of the "work" is done within the TwitterSL Silverlight project.

Proxy web service (TwitterWebService.asmx):  The local TwitterWebService .asmx is part of the TwitterSLServer web project.  This is the proxy service used to contact the Twitter API directly.  The web service allows for async behavior by providing each public method with a BeginXXX() and EndXXX() variant.  The Silverlight project can call BeginXXX() and continue processing; the EndXXX() is invoked once the request is completed by Twitter and the proxy web service.

Twitter API: Twitter provides a Representational State Transfer (RESTful) service to allow third-party applications to access the Twitter message exchanges.  The API calls utilize HTTP Basic Authentication delivered via HTTP Requests to specified URLs, and returns back a list of messages in the desired format (XML, JSON, etc).  The proxy web service delivers an XML snippet back to the Silverlight calling code for parsing and display.  You can see how a request is created in the proxy web service methods below:

C#:

[WebMethod]
public string GetArchive(string username, string password)
{
    try
    {
        return GetRequest(string.Format(@"http://twitter.com/statuses/user_timeline/{0}.xml", username), username, password);
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

private string GetRequest(string uri, string username, string password)
{
    WebRequest request = HttpWebRequest.Create(uri);

    if (!string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(password))
    {
        request.Credentials = new NetworkCredential(username, password);
    }

    WebResponse res = request.GetResponse();
    StreamReader stream = new StreamReader(res.GetResponseStream());
    string data = stream.ReadToEnd();
    stream.Close();
    return data;
}

VB:

<WebMethod()> _
Public Function GetArchive(ByVal username As String, ByVal password As String) As String
    Try
        Return GetRequest(String.Format("http://twitter.com/statuses/user_timeline/{0}.xml", username), username, password)
    Catch ex As Exception
        Throw ex
    End Try
End Function

Private Function GetRequest(ByVal uri As String, ByVal username As String, ByVal password As String) As String
    Dim request As WebRequest = HttpWebRequest.Create(uri)

    If Not String.IsNullOrEmpty(username) AndAlso Not String.IsNullOrEmpty(password) Then
        request.Credentials = New NetworkCredential(username, password)
    End If

    Dim res As WebResponse = request.GetResponse()
    Dim stream As StreamReader = New StreamReader(res.GetResponseStream())
    Dim data As String = stream.ReadToEnd()
    stream.Close()
    Return data
End Function

Putting it together

In the TwitterSL.Page class, the action kicks off when the user enters a Twitter username/password, and presses the "Get" button.  The dropdown beside it determines which web request type will be issued.  An AutoRefresh toggles, of course, the auto refreshing of the current message list.  The line under "AutoRefresh" fades until the refresh occurs, one of the simple animations added to the XAML.

The Get button's click event trickles down to the GetWebRequest method, which calls the appropriate proxy web service method.  Notice the call here using the "Begin" prefix, and passing a new AsyncCallback object to invoke the service asynchronously.  The callback object specifies GetWebRequestResult as the target when the call finishes.

C#:

_twitterWebService.BeginGetTwits(username, password, new AsyncCallback(GetWebRequestResult), null);

VB:

_twitterWebService.BeginGetTwits(username, password, New AsyncCallback(AddressOf GetWebRequestResult), Nothing)

The web service simply sets up the appropriate url, builds an HTTP web request with authentication (if required), and issues the call (nothing too shocking here, but take a look at the code if you're not familiar with building up a web request).

Once the web service work is done, we're asynchronously delivered to the previously mentioned GetWebRequestResult method.  This drops us into LoadTwits, which does the dirty work of parsing the returned XML snippet, creating new instances of the TwitControl for each message element and adding them to the parent container.

It's here, however, where the simplistic beauty of RESTful interfaces show their harsh side: we're pretty dependent on their format, and this parsing code could easily break.  Also, of course, the REST won't give us strong typing.  Hey, this would be a good place for a wrapper project, a la the Facebook Developer Toolkit.  And speaking of enhancements....

Challenges to you

The fun & frustration of coding with new technology is overcoming the limitations of a limited feature set.  The Twitterlight project is ripe for feature development in the coming months, as the Silverlight 2.0 Beta releases and control toolsets continue to emerge.  Some challenges include:

• The TwitControl needs rich text support, to parse any urls into into clickable hyperlinks.  Currently links show below the message as "Follow Link"
• Add more user credential security vs. current Basic Authentication
• Incorporate new toolset and SIlverlight features as released

Bio

In this article I'll take you along for the ride as I attack the learning curve required to create a fun, interactive application using both the Microsoft Windows Presentation Foundation (WPF) and the Windows Communication Foundation (WCF). Afterwards, you'll have a flexible trivia client/server game ready to play by yourself or against friends, coworkers and your local know-it-all.  And in honor of Halloween, I've included three games of horror movie trivia.

Steve Holstad The Bright Lights Difficulty: Advanced Time Required: 6-10 hours Cost: Free Software: Visual Studio Express, 2005, 2008 Beta 2 Microsoft .NET Framework 3.0 Hardware: Download: Download Source

What can YeahTrivia do for me?

Glad you asked. This project started when I decided I wanted to dive headfirst into learning WPF and WCF, without hacking through countless Hello World examples.  And I wanted something fun that I could improve over time as my skills developed in these new technologies.  In this article I'll take you along for the ride as I attack the learning curve required to create a fun, interactive application using both the Microsoft Windows Presentation Foundation (WPF) and the Windows Communication Foundation (WCF). Afterwards, you'll have a flexible trivia client/server game ready to play by yourself or against friends, coworkers and your local know-it-all.  And in honor of Halloween, I've included three games of horror movie trivia.

In case you were wondering, the "YeahTrivia" name honors my new bride & her favorite prefix.  Think of it as YeeeeaaaaahhTrivia!

Basic Setup

This demo project was built using Visual Studio 2008 Beta 2, and is based on the Microsoft .NET Framework version 3.0.  The game is fed by a small windows app that acts as a game server, providing game selection, user registration, question loading, response times, chat messaging and scorekeeping.  The server loads a game by reading a predefined XML format, which we will look at a bit later.  This dynamic load lets anyone create their own flavor of trivia game, with any number of questions.

The server app exposes one WCF endpoint, a wsDualHttpBinding channel that supports duplex (two-way) communication between the server and any number of game clients.  Clients attach themselves to this endpoint and provide a callback address to the server.  The server saves an instance of this callback channel and uses each client's instance to contact the clients en masse during general game flow.  Enough talk, here's how to build one yourself.

Trivia Common and WCF Service Interfaces

The TriviaCommon project provides both the server and client projects access to shared objects.  To keep things simple the Common project only contains two classes:

Constants.cs defines the AnswerItem enumeration, which gives easy access to the five answer options (None, A, B, C, D), and the QuestionItem struct.  This structure is delivered to the client and contains question text, answer text, and the correct answer object of type AnswerItem.  Notice that objects being directly passed over the wire need to be marked with the [DataContract] attribute.

The second class, Interfaces.cs is where our WCF fun begins.  Take a look:

using System;
using System.Collections.Generic;
using System.ServiceModel;
using System.Text;

namespace Trivia.Common
{
    #region Interfaces

    #region Service Interface

    /// <summary>
    /// Interface that defines Trivia service contract.
    /// </summary>
    [ServiceContract(CallbackContract = typeof(ITriviaCallback))]
    public interface ITrivia
    {
        [OperationContract(IsOneWay = true)]
        void RegisterUser(string userName);

        [OperationContract(IsOneWay = true)]
        void AcceptAnswer(string userName, string answerValue);

        [OperationContract(IsOneWay = true)]
        void ChatPublish(string userName, string message);
    }

    #endregion Service Interface

    #region Client Callback Interface

    /// <summary>
    /// Interface that defines Trivia client callback contract.
    /// </summary>
    public interface ITriviaCallback
    {        
        [OperationContract(IsOneWay = true)]
        void OnGameStart(int questionCount);

        [OperationContract(IsOneWay = true)]
        void OnGameEnd();

        [OperationContract(IsOneWay = true)]
        void OnUserRegistered(string userName);

        [OperationContract(IsOneWay = true)]
        void OnPublishChat(string userName, string chatMessage);

        [OperationContract(IsOneWay = true)]
        void OnQuestionLoad(int questionIndex, QuestionItem questionItem);

        [OperationContract(IsOneWay = true)]
        void OnQuestionEnd();

        [OperationContract(IsOneWay = true)]
        void OnQuestionStatusUpdate(Int64 questionTimeRemaining);

        [OperationContract(IsOneWay = true)]
        void OnScoreboardUpdate(Dictionary<string, Int64> scoreboard);

        [OperationContract(IsOneWay = true)]
        void OnGameServerStopped();
    }

    #endregion Client Callback Interface

    #endregion Interfaces
}

VB:

Imports System
Imports System.Collections.Generic
Imports System.ServiceModel
Imports System.Text

Namespace Trivia.Common

#Region "Interfaces"

#Region "Service Interface"
    
    ''' <summary>
    ''' Interface that defines Trivia service contract.
    ''' </summary>
    <ServiceContract(CallbackContract:=GetType(ITriviaCallback))> _
    Public Interface ITrivia
        <OperationContract(IsOneWay:=True)> _
        Sub RegisterUser(ByVal userName As String)

        <OperationContract(IsOneWay:=True)> _
        Sub AcceptAnswer(ByVal userName As String, ByVal answerValue As String)

        <OperationContract(IsOneWay:=True)> _
        Sub ChatPublish(ByVal userName As String, ByVal message As String)
    End Interface
        
#End Region

#Region "Client Callback Interface"

    ''' <summary>
    ''' Interface that defines Trivia client callback contract.
    ''' </summary>
    ''' <remarks></remarks>
    Public Interface ITriviaCallback
        <OperationContract(IsOneWay:=True)> _
      Sub OnGameStart(ByVal questionCount As Integer)

        <OperationContract(IsOneWay:=True)> _
        Sub OnGameEnd()

        <OperationContract(IsOneWay:=True)> _
        Sub OnUserRegistered(ByVal userName As String)

        <OperationContract(IsOneWay:=True)> _
        Sub OnPublishChat(ByVal userName As String, ByVal chatMessage As String)

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionLoad(ByVal questionIndex As Integer, ByVal questionItem As QuestionItem)

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionEnd()

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionStatusUpdate(ByVal questionTimeRemaining As Long)

        <OperationContract(IsOneWay:=True)> _
        Sub OnScoreboardUpdate(ByVal scoreboard As Dictionary(Of String, Long))

        <OperationContract(IsOneWay:=True)> _
        Sub OnGameServerStopped()

    End Interface

#End Region

#End Region

End Namespace

A few items of interest here.  Notice we're importing the System.ServiceModel namespace.  This is the key assembly when using WCF, so don't forget to add a reference to your project.  The first interface, ITrivia, defines the operations the server is required to implement, which handle basic user actions: Register a team, accept an answer and accept a chat message.  Easy.

The second interface, cleverly named ITriviaCallback, lays out the callback contract a client must fulfill in order to play nicely with our server.  The operations listed here describe events the server will publish.  These aren't actual events, but the naming convention "OnX..." helps you remember that these are server published activities.

Notice that the [OperationContract] attribute notifies WCF that each method is part of a service contract.  The IsOneWay flag gives us "fire-and-forget" behavior (the app shouldn't wait around for a response).  So now that the common objects are ready, let's move on to...

Building the Trivia Server

The YeahTrivia Server is a simple utility app, but don't let the plain looks fool you; I thought about calling this the BrainStumper Pumper, but this is a family site.  This app lets a user (anyone acting as game admin) start the service, select the desired game, await team registrations, and then start the game.  If this were to become a larger scale project, I would make this an IIS hosted service that manages multiple games and provides more autonomy.  Until those sports bar royalty checks start rolling in, however, a utility app will do just fine.

The only form, GameServerDashboard, simply provides user interaction with the GameServer class.  On startup, the form inits an instance of GameServer and tells it to start the service.  It also loads all trivia question sets from the Games directory, and displays them in the list.

GameServer is the brain behind YeahTrivia. The attributes below set up the GameServer for action:

C#:

[ServiceBehavior(ConcurrencyMode = ConcurrencyMode.Reentrant
        ,InstanceContextMode = InstanceContextMode.Single)]
    public class GameServer : ITrivia

VB:

<ServiceBehavior(ConcurrencyMode:=ConcurrencyMode.Reentrant, InstanceContextMode:=InstanceContextMode.Single)> _
    Public Class GameServer
        Implements ITrivia

ConcurrencyMode.Reentrant prevents deadlocks between the apps by stating that while this service is single-threaded, callbacks are allowed to invoke new operations.

InstanceContextMode.Single sets the service as a singleton, so that all messages are delivered to the same object instance.

These are advanced topics if you're new to WCF, so I'll include some links at the end that helped clarify some of this for me.  Let's keep moving forward by looking at a few activities of the game server:

Start the Service:  Passes in the configured base address as a Uri, inits and opens a new ServiceHost.

C#:

public void StartService()
{
   // Set base address and open service host
   Uri baseAddress = new Uri(ConfigurationManager.AppSettings[CONFIG_KEY_BASEURI]);
   _serviceHost = new ServiceHost(new GameServer(), baseAddress);
   _serviceHost.Open();
}

VB:

  Public Sub StartService()
     'Set base address and open service host
     Dim baseAddress As New Uri(ConfigurationManager.AppSettings(CONFIG_KEY_BASEURI))
     _serviceHost = New ServiceHost(New GameServer(), baseAddress)
     _serviceHost.Open()
  End Sub

Register a new team: Saves off the callback, adds it to the callback collection and scoreboard containers, notifies the user of a successful registration, and notifies all game clients of the new team.

C#:

 public void RegisterUser(string userName)
 {
     _currentCallback = OperationContext.Current.GetCallbackChannel<ITriviaCallback>();

     // Store callback
     if (!_callbacks.ContainsKey(userName))
     {
         _callbacks.Add(userName, _currentCallback);
         _scoreboard.Add(userName, 0);

         // Notify user of registration
         _currentCallback.OnUserRegistered(userName);

         // Notify clients of new user
         foreach (string userKey in _callbacks.Keys)
         {
            _currentCallback = _callbacks[userKey];
            _currentCallback.OnPublishChat(GAME_USERKEY, string.Format(FORMAT_USER_REGISTERED, userName));
         }                
     }
     else
     {
         // User already registered, throw exception
         throw new Exception(ERROR_USER_ALREADY_EXISTS);
     }
 }

VB:

Public Sub RegisterUser(ByVal userName As String) Implements ITrivia.RegisterUser
   _currentCallback = OperationContext.Current.GetCallbackChannel(Of ITriviaCallback)()

   'Store callback
   If Not _callbacks.ContainsKey(userName) Then
      _callbacks.Add(userName, _currentCallback)
      _scoreboard.Add(userName, 0)

      'Notify user of registration
      _currentCallback.OnUserRegistered(userName)

      'Notify clients of new user
      For Each userKey As String In _callbacks.Keys
         _currentCallback = _callbacks(userKey)
         _currentCallback.OnPublishChat(GAME_USERKEY, String.Format(FORMAT_USER_REGISTERED, userName))
      Next
   Else
      'User already registered, throw exception
      Throw New Exception(ERROR_USER_ALREADY_EXISTS)
   End If
End Sub

You can start to see how the server is able to handle incoming calls and process them back to the clients using the duplex channel.  I'll leave the rest of the server actions for you to examine on your own.

Building the Game Client (WCF)

Address, Binding, Contract.  These are the ABC's of WCF.  The client's app.config file handles connecting to the service and specifying the channel and contract used to interact with it.  Examine the client portion of the client .config:

<client>
   <endpoint address="http://localhost:8088/Trivia" binding="wsDualHttpBinding"
      bindingConfiguration="WSDualHttpBinding_ITrivia" contract="Trivia.Common.ITrivia"
      name="WSDualHttpBinding_ITrivia">
   </endpoint>
</client>

The address points to the exposed service endpoint.  The binding sets the channel as "wsDualHttpBinding" (our http duplex channel).  The bindingConfiguration attribute is an optional pointer to another group of configurations for the binding, and finally, the contract sets the interface with which our client will be interacting.

Next it's time to generate a proxy class.  Memorize this: Svcutil.exe is your friend.  The client needs a proxy class that it can use to interact with the service model.  The utility is a bit tricky at first, because of the wealth of optional flags, but stick with it, it's better than coding the proxy class by hand!  You can generate your client code by starting the service and running a command line similar to this:

svcutil /language:cs /out:ServerProxy.cs http://localhost:8088/Trivia

Add the generated class to the client project and you can begin to interact with the service.  The svcutil is available as part of the Windows SDK.  Check out the referenced site below for more information on this handy utility.

Building the Game Client (WPF)

Building the WPF portion of the client app was really a learning experience, and it will be the priority for me to improve in a later version.  Learning to program in XAML markup can seem daunting, and it requires a large paradigm shift on your part in order to grasp the new concepts.  Microsoft Expression is powerful tool for XAML work, but this time I coded all of the XAML by hand in order to fully see what was taking place inside.

A deep discussion of WPF is beyond the scope of this article, but take a look at the example code to get an idea of the layout.  An excellent book to start with is WPF Unleashed by Adam Nathan.  An easy read (for a programming book), and solid examples to get you rolling.

I've set up the client using a instance of the Window class, which is shown below:

<Window x:Class="Trivia.Client.GameClient"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="YeahTrivia" MinHeight="620" MinWidth="620" 
    WindowStartupLocation="CenterScreen" WindowState="Normal"  Style="{DynamicResource MainWindowStyle}"
    Background="{DynamicResource MainWindowBackgroundBrush}">

The window class sets up the outermost container of the app, and includes two default namespaces.  I've also set a few other properties here: a min height and width, window startup location & state, and two styling attributes set by dynamic resources.

Resources are a great way to further separate form & function, allowing a programmer to handle the behavior of an app, while a designer can work simultaneously on the look, all without stepping on too many toes.  As a 2.0 task for this project, I would remove all inline styling and move them into resource dictionaries.  A dictionary contains styles and control templates (a skin) that can be loaded & switched at runtime.

ResourceDictionaries are linked to your XAML in the App.Xaml file.  Once you've set up the reference, the example above show how to reference the current dictionary:  The Background and Style properties are set as dynamic resources by naming the Keys specified in the ResourceDictionary (DefaultResources.xaml):

<LinearGradientBrush x:Key="MainWindowBackgroundBrush" StartPoint=".45,.45" EndPoint=".55,.55" SpreadMethod="Reflect">
   <GradientStop Offset="0" Color="DodgerBlue"/>
   <GradientStop Offset=".8" Color="DarkSlateBlue"/>
</LinearGradientBrush>

<Style TargetType="{x:Type Window}" x:Key="MainWindowStyle">
   <Setter Property="FontFamily" Value="Trebuchet MS"/>
</Style>

Not quite as easy as CSS, but for a Forms project, it's a nice feature.  The sample ResourceDictionary includes a button control template for all of my buttons, based on Rob Eisenberg's excellent article (link below).

One other interesting feature to point out: Take a look at the code-behind class MarshalToUIThread method, which accepts a SendOrPostCallback parameter.  This is where the client is transferring actions from the sync thread back to the UI thread.  In each interface method implementation (OnX..), you can see how I wrap any UI-directed code and assign it to the postCallback field.  Passing this to the MarshalToUIThread method simply issues a SynchronizationContext.Post call, and the UI thread executes as expected.

Creating a New Trivia Game (XML)

New trivia games can be added at any time using the simple XML format shown here.  After installing the server application, simply drop the new .XML file into the Games directory ([Server Install Location]\Yeah Trivia Server\Games).  This demo comes pre-loaded with Geek Trivia, and a special Halloween Trivia version in case you're feeling festive.

<TriviaQuestionDataSet xmlns="http://tempuri.org/TriviaQuestionDataSet.xsd">
  <TriviaQuestion>
    <QuestionText>Name the highest grossing Monty Python creation.</QuestionText>
    <AnswerTextA>A) Holy Grail</AnswerTextA>
    <AnswerTextB>B) The Life of Brian</AnswerTextB>
    <AnswerTextC>C) Shrubbery</AnswerTextC>
    <AnswerTextD>D) The Meaning of Life</AnswerTextD>
    <CorrectAnswerKey>A</CorrectAnswerKey>
  </TriviaQuestion>
  <TriviaQuestion>
    <QuestionText>Ferris Bueller's best friend was _________.</QuestionText>
    <AnswerTextA>A) Sloane Peterson</AnswerTextA>
    <AnswerTextB>B) Edward R. Rooney</AnswerTextB>
    <AnswerTextC>C) Charlie Sheen</AnswerTextC>
    <AnswerTextD>D) Cameron Frye</AnswerTextD>
    <CorrectAnswerKey>D</CorrectAnswerKey>
  </TriviaQuestion>
</TriviaQuestionDataSet>

It's Time to Play YeahTrivia

Install both the Server and Client applications.  First, fire up the server, and then start your game client(s).  Once everyone has registered a team, select your game and hit "Start Game".    You're off...

Game Over

So there you have it.  We've seen how WCF manages communication between objects, extracting complicated service protocols away from your code.  And just a small subset of the WPF functionality has shown us how quickly a rich, XAML-based UI can come together.  And maybe, just maybe, you've learned why a CD is 74 minutes long... but I'm not telling.

I challenge you to improve on this initial version of YeahTrivia:  Crack open the XAML and add animations, images, video, music & more.  Create a self-maintaining server to run multiple games at once.  Add a High Score storage system.  Extend the WCF settings to enable other communication channels.  Add a new skin. Create new question files to share with us.  Whatever you do, have fun and go nuts.  YeahCoding4Fun.

Download source files

Download compiled demo (C# and VB)

About The Author

Steve Holstad works as a software consultant for Clarity Consulting in Chicago.  He blogs at The Bright Lights, and is available via email at sholstad@claritycon.com

References

wcf.netfx3.com/
wpf.netfx3.com/
Generating a client proxy class
ConcurrencyMode
SvcUtil.exe Tutorial
Rob Eisenberg's WPF control template

Special thanks to Bryan Dougherty for the WCF jumpstart, Kevin Marshall for the Halloween Trivia and Jay Garmon, creator of TechRepublic's Geek Trivia.