On this page, you will find a recording of a demo I do when talking about the new collaboration between developers and designers with WPF. With new tools and new concepts, WPF enables a different workflow which is not usual for developers and maybe even less for designers.

With this demo, I show how to use the Expression tools (Expression Design, Expression Blend) and Visual Studio to create a new WPF application. Additionally, I show how to export many resources to a separate assembly (DLL) so that changing the look&feel of the application is as easy as replacing a DLL with another.

The presentation is a set of 7 videos. You will need Silverlight V1.0 to see the videos.

Presentation slides

I have a set of slides which I usually use to introduce the demo. The slides give indications about the new roles and the new workflow. I made a PDF document with the slides, and posted it here.

Do I have Silverlight?

If you have Silverlight 1.0 installed on your system, you will see a moving logo right under here. That means you're good to go. If you see the "Get Microsoft Silverlight" banner instead, click on the banner and follow the instructions before coming back to this page!

Using the video player

When you watch one of the chapters below, you can skip ahead to a different section by using the small triangle on the top-left corner of the player. Also, move the mouse over the lower section of the video player screen to let the controls appear.

Chapter 1: (8:42)	Creation, Windows properties Introduction Creating project in Studio Adding a Skins project in Studio First build Opening in Blend Window properties and style
Chapter 2: (8:25)	Grid and borders Setting the grid Placing borders Filling the background Placing the brushes in resources
Chapter 3: (6:53)	Adding buttons and template Adding buttons Basic template Adding a ContentPresenter Applying the templates to the buttons
Chapter 4: (6:05)	Developer work Opening in Studio, WPF designer "Cider" Event handlers, User controls Testing the application
Chapter 5: (7:31)	Exporting from Expression Design, Importing in Expression Blend Exporting from Design Importing into Blend Checking the result
Chapter 6: (6:51)	Buttons templates, First integration Designing the buttons Mouse over effect Positioning with margins Integration work, adding icons to the buttons
Chapter 7: (6:17)	Making a new skin Copying the skin, opening the copy in Blend Change the borders Change the button template Change the mouse over effect Adding an animation when the button is clicked Copying the new skin in the application Testing the new skin, Conclusion