Use expression blend 2 to style a Silverlight Twitter Application

Use expression blend 2 to style a Silverlight Twitter Application

[Original address] styling a Silverlight Twitter application with expression blend 2
[Original article publication date] Friday, November 14,200 AM

Silverlight 2 provides a rich platform for building cross-browser and cross-platform Ria applications.

One thing that makes Silverlight so powerful is the ease of collaboration between developers and designers on the Silverlight project. Developers can use Visual Studio to open and edit the Silverlight 2 project and obtain a powerful code-centric project.. NET development environment, while designers can use expression blend 2 SP1 to open and edit the same project, use a creative tool, elaborate, and create an optimized user experience design.

The wpf ui framework released in Silverlight further facilitates the workflow of designers/developers by supporting such concepts as layout management, controls, styles, templates, and resources, it helps avoid mutual interference between designers and developers in integrating functions, behaviors, and expressive designs.

Silverlight 2 Twitter routine

Last month, I posted an in-depth blog tutorial to teach you how to build a Silverlight 2 Digg application. You can read it here. This tutorial focuses on the basic programming concepts involved in building a Silverlight 2 application.

Today, Celso Gomes and Peter Blois release a cool ten-minute video tutorial showing how to use expression blend to style a Silverlight 2 Twitter messenger application. You can watch this video here. You can download the source code of the Silverlight Twitter application after download.

This video demonstrates how designers can restyle A Silverlight application without modifying the background code. During the styling process, this video also shows some powerful features that expression blend 2 provides to build an extremely rich user experience. Celso starts with the developer version of the application, and then customizes and finely crafted the UI so that it has the topic of a fun Twitter role:

Application Model

The Silverlight Twitter client is hosted in an ASP. in the. NET Server application, the application shows a web service that allows the Silverlight Twitter application to communicate with the Twitter Service (because Twitter does not allow direct access from client applications ). The communication between the Silverlight client and the ASP. NET web server is implemented through windows Communication Foundation (WCF.

This client application uses the "Model-View-Presenter (MVP)" mode (also known as the "Model-View-viewmodel" mode), which is commonly used in large WPF applications. Although this is a simple application, they still want to take advantage of the flexibility provided by MVP and leave room for future development.

The separation of visual presentation and application logic also allows designers to make complex visual changes without affecting basic application processes, this video provides examples of style-based flexibility contributed by this architecture.

Styling Process

In the video, Celso emphasizes how resources can help designers change colors quickly. For example, a common brush resource can be used to change the color of all text elements in an application:

Celso demonstrates how easy it is to use expression blend 2 SP1 to create a new user control from a graph (as long as you select multiple elements on the designer, right-click the mouse, select the "make control" menu item ):

It also shows how to create a new state in this new user control (with the visual state manager function, WPF also provides this function) and create a bird animation effect (flying, blinking, etc)

Celso also shows how to create an animation effect for each State and change the advanced attributes such as the key spline curve and repeat behavior:

He also showed how to create custom buttons from a picture (these pictures can come from XAML or any other design tool like Photoshop or illustrator ), all statuses of a button control are provided.

Expression blend also allows you to easily change complex controls such as list boxes. Designers can access all styles, templates, and statuses, you can customize all the parts of the list box without writing any code:

If you want to play with the Twitter app above, you can watch the video and download the relevant code.

To learn more about expression blend, I also recommend watching the lecture "expression blend skills and know-how" at the PDC Conference two weeks ago.

Update: You can also view the deep control skinning with styles webcast of Shawn wildermuth.

I hope this article will help you,

Scott