Styling a Silverlight Twitter Application with Expression Blend 2
Silverlight 2 provides a rich platform for building cross-browser/cross-platform RIA applications.
One of the things that makes Silverlight so powerful is the ease with which developers and designers can collaborate together on projects. Developers can use Visual Studio to open and edit Silverlight 2 projects and get a powerful code-focused .NET development environment, and designers can use Expression Blend 2 SP1 to open and edit the exact same project and use a creative tool to sculpt and create optimal user experience designs.
The WPF UI framework shipped in Silverlight further enables a great designer/developer workflow by supporting concepts like layout management, controls, styles, templates, and resources - which help avoid scenarios where designers and developers end up tripping over each other when integrating functionality, behavior and expressive design.
Silverlight 2 Twitter Sample
Last month I posted an in-depth blog tutorial on how to build a Silverlight 2 Digg application which you can read here. This tutorial was aimed primarily at developers, and focused on introducing the fundamental programming concepts involved when building a Silverlight 2 application.
Today Celso Gomes and Peter Blois posted a cool 10 minute video tutorial that shows off using Expression Blend to stylize a Silverlight 2 Twitter Messenger application. You can watch the video here. You can download the source code for the completed Silverlight Twitter application here.
The video does a nice job demonstrating how designers can re-style a Silverlight application without having to mess with the code behind it. In the process it shows some of the power and capability that Expression Blend 2 provides to build really rich user experiences.
Styling a Silverlight Twitter Application with Expression Blend 2
Silverlight 2 provides a rich platform for building cross-browser/cross-platform RIA applications.
One of the things that makes Silverlight so powerful is the ease with which developers and designers can collaborate together on projects. Developers can use Visual Studio to open and edit Silverlight 2 projects and get a powerful code-focused .NET development environment, and designers can use Expression Blend 2 SP1 to open and edit the exact same project and use a creative tool to sculpt and create optimal user experience designs.
The WPF UI framework shipped in Silverlight further enables a great designer/developer workflow by supporting concepts like layout management, controls, styles, templates, and resources - which help avoid scenarios where designers and developers end up tripping over each other when integrating functionality, behavior and expressive design.
Silverlight 2 Twitter Sample
Last month I posted an in-depth blog tutorial on how to build a Silverlight 2 Digg application which you can read here. This tutorial was aimed primarily at developers, and focused on introducing the fundamental programming concepts involved when building a Silverlight 2 application.
Today Celso Gomes and Peter Blois posted a cool 10 minute video tutorial that shows off using Expression Blend to stylize a Silverlight 2 Twitter Messenger application. You can watch the video here. You can download the source code for the completed Silverlight Twitter application here.
The video does a nice job demonstrating how designers can re-style a Silverlight application without having to mess with the code behind it. In the process it shows some of the power and capability that Expression Blend 2 provides to build really rich user experiences. Celso starts with a developer version of the application, and then customizes and sculpts the UI to have a fun twitter character theme:
The Application Model
The Silverlight Twitter client is hosted within an ASP.NET server application that exposes a web service that enables the Silverlight Twitter application to communicate to the Twitter service (since Twitter does not allow direct access from client applications). Communication between the Silverlight client and the ASP.NET web server is done using Windows Communication Foundation (WCF).
The client application uses a Model-View-Presenter (MVP) pattern (also known as the Model-View-ViewModel pattern) which is commonly used in large WPF applications. Even though this is a fairly simple application they wanted to take advantage of the flexibility that MVP allows and allow room for future growth.
Maintaining the separation between the visuals and the application logic also enables designers to make fairly complex visual changes without impacting the basic application flow. The video goes through some examples of the styling flexibility this architecture facilitates.
Leave a Reply