Now that we have created our initial UI within Expression
Blend, let's open up the same project in Visual Studio and add some chat
classes that we can use to bind our UI against.
We can open up the project in Visual Studio either by
selecting File->Open Project inside VS 2008 and selecting the project file
for our project, or within Expression Blend we can right-click on the project
node and choose the "Edit in Visual Studio" menu item to launch VS
2008 with the project open:
VS 2008's Silverlight support in Beta1 has project
management support for Silverlight 2 solutions, full intellisense and
event-wireup support, and support for debugging Silverlight applications
running both on Windows and the Mac. VS 2008 also has split-view editing support for Silverlight .xaml files. For example, here it the same Page.xaml file we built
above in Blend open inside VS 2008:
The VS 2008 design-view in Beta1 isn't
interactive (meaning it is still read-only). Changes you make in source-view,
though, are updated immediately in design-view - which gives you a nice
XAML-pad experience (and VS 2008 supports full XAML source intellisense with
Silverlight 2 Beta1).
For this blog post we aren't going to be using
the Visual Studio XAML editor. Instead we are going to create some
classes that we'll use to represent a ChatSession and associated chat
messages. We'll then use Expression Blend to bind our UI controls against
We'll start by adding a new class called
"ChatMessage" that defines two public properties:
We'll then create a class called "ChatSession"
that represents a chat session.
The ChatSession class above has three public
properties. The first two properties represent the remote user name and
avatar on the other end of the chat.
The third property is a collection of the past
chat messages. Notice that its type is not a List<ChatMessage>
collection - but rather an ObservableCollection<ChatMessage>
collection. ObservableCollection might not be a familiar class to you if
you are coming from an ASP.NET background - but those coming from a Windows
Forms or WPF background are probably familiar with it. Basically it is a
generic collection class that raises change notification events when items are
added/removed from it (or when items that implement INotifyPropertyChanged
within it have their properties changed). This comes in very handy when
doing data-binding - since UI controls can use these notifications to know to
automatically refresh their values without a developer having to write any code
to explicitly do so.
The ChatSession class then has two public
methods - one whose job it is to connect to a chat server, and another whose
job it is to send messages to the chat server. For the sake of simplicity
(and because I don't have a chat server) I've just faked out these
methods. In real-life we would probably use the network sockets
implementation built-into Silverlight to connect to a remote chat server.
The ChatSession class implements the
INotifyPropertyChanged interface - which means it exposes a public
"PropertyChanged" event. We'll raise this event within our
class when we change the properties on it. This will enable listeners
(for example: controls data-binding against it) to be notified when changes in
the property values occur - which allows them them to rebind the values.