Creating a simple Facebook Application using WPF

Announcements

	Try Azure, win a laptop
	Build a VS2010 addin win a Zune
	Monthly Competition

Articles

Platforms, Frameworks & Libraries

Languages

General Programming

Graphics / Design

Development Lifecycle

Services

CodeProject VS2008 Addin

Feature Zones

Product Showcase

WhitePapers / Webcasts

.NET Dev Library

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

28 votes for this article.

Popularity: 6.66 Rating: 4.60 out of 5

Download source files - 112.8 KB

Introduction

Facebook is growing at an incredible pace (already 30 million users registered and doubling every 6 months). The new Facebook platform is an incredible software platform and can easily be extended using the provided SDK. The following Code Project article is an introduction into creating a very simple MSN Messenger or Yahoo! Messenger type application for Facebook.

In this first article, I will provide an overview of how to set up your Facebook application and write a very basic WPF application that connects to Facebook and populates your friends list.

Setting up Facebook

Visit the developer website.

Click on "Getting started"
Add Facebook Developer Application
Log into Facebook
Add Developer Application
Set up new application
Application Name: WPFB (Here you can choose any name as long as it doesn't contain the word Face
Click checkbox to agree with License Agreement and also expand the optional Fields
Change application type to Desktop (This is very important!)
Submit

Keep the API Key & Secret provided for use later.

Here is a discussion about whether it is legal to disclose the secret key of your application.

Creating a simple UI

Download the Facebook SDK binaries from here.

Create a WPF Application and add Image & ListBox Controls into a StackPanel.

<StackPanel>
    <Image x:Name="ProfilePicture"Stretch="None"HorizontalAlignment=
                        "Left"VerticalAlignment="Top"/>
    <ListBox x:Name="FriendsListBox"/>
</StackPanel>

Add the following References to your project:

Facebook.dll
Facebook.Controls.dll

Also add the following namespaces:

using Facebook.Components;               //FacebookService

using Facebook.Exceptions;
using Facebook.Entity;                   //User

using System.Windows.Media.Imaging;      //BitmapImage

using System.Collections.ObjectModel;    //Collection

Next, we have to create an instance of the Facebook service.

FacebookService service;

Now, we also need to setup the service with the API Key & Secret recorded earlier. I currently do this in the constructor of my Window.

service = new FacebookService();
service.IsDesktopApplication = true;
service.ApplicationKey = "1969299cd5b87513af9633715e0a63e9";
service.Secret = "5b3ff1b88c41eb117014f403e5cb9952";

Now we are ready to start getting information from Facebook. To download my profile picture from Facebook, add the following code to the SourceInitialized event of the Window.

User me = service.GetUserInfo();
if (me != null)
    ProfilePicture.Source = new BitmapImage(me.PictureSmallUrl);

This basically downloads the small profile picture from the specified URL. This is a good time to save and test your project. Once you have compiled and Run this application, the following logon screen gets displayed:

I have also noticed that this currently doesn't work if you are behind an HTTP proxy server. I get a "The underlying connection was closed" exception. Future releases of Facebook SDK would hopefully include support for Proxy servers and allow you to rather log in by using a function to which you can supply a user name and password as opposed to showing the HTML based login screen...

Fill in your user name and password and now click on login. You should hopefully now see a Window with your profile picture displayed!

The next step is to populate the ListBox with all my friends. To get all your friends from Facebook, add the following code to the SourceInitialized Event:

Collection<User> friends = service.GetFriends();

Update the friend's ListBox with the following DataTemplate.

<ListBox x:Name="FriendsListBox" ItemsSource="{Binding}">
   <ListBox.ItemTemplate>
       <DataTemplate>
           <Image Source="{Binding Path=PictureSmallUrl}" />
       </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

The final step is to point the ListBox to the friends collection.

FriendsListBox.ItemsSource = friends;

Conclusion

As you can see, to setup and create a simple Facebook application is not very difficult. In the next couple of days, I will expand on this base and update the application. Planned future expansion will include:

Notifications from Facebook
More "Beautiful UI" that supports skinning, and
A send message feature once you double-clicked on a friend

With very little effort and quick beautifying touches, the final application looks like this! (I borrowed Sacha Barber's Glass Button effect for the friends icons)

Please comment on how I can improve my articles (since this is only my second) and also rate this article (even if you thought it was utterly useless!)

History

13-Aug-2007 - First draft

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

rudigrobler

Member

Location:

South Africa

Other popular Windows Presentation Foundation articles:

WPF: A Beginner's Guide - Part 1 of n
An introduction into the WPF layout system
Simplifying the WPF TreeView by Using the ViewModel Pattern
Reviews how using a ViewModel can abstract away the complexities of the WPF TreeView control.
WPF Diagram Designer - Part 3
Connecting items
XPlorerBar: A WPF Windows XP Style Explorer Bar Control
A fully customizable WPF implementation of the left side pane that was introduced in Windows XP's Explorer.
Fun With Physics
WPF: A Beginner's Guide series, end exemplar and fun with physics