Design & Build A Complete WPF Application in Expression

Greetings … long time no read, I have been rather inactive for a long time now. Apologies for that, but I have been extremely busy with holding presentations and trainings around Expression and Silverlight.

And this is the reason for this post: this post is about a complete WPF Training Hands On Lab. It contains instructions for designing and building a working WPF desktop application with the following features:

  • Dynamic XML data binding and data filtering
  • UI Styling with data and control templates
  • Triggers, events and animation

Download the lab manual here: Expression Blend End-to-End exercise manual. The assets (images and code files) can be found here. All the images used in this application are in the public domain or have been taken by me. Descriptions and art details come from Wikipedia.

This hands on lab is based on the incredible work of two of my colleagues at Microsoft – Celso Gomes and Kirupa Chinnathambi. They held a great presentation at MIX 08 called Applications = Designers and Developers where they went through the steps required to design and build such a working application from scratch. I have learned a lot of my WPF knowledge from this talk so I decided to create this hands on lab which has been modified from the original to only use the Expression tools and no code at all. (I am not a developer, so I wanted to only use Expression tools). Also, I wanted to tell a bit of a story around the demo to be able to include a bit of background info on XAML and Microsoft’s UX story.

If you want to see the presentation I usually do together with the demo, you can download the PPT here: The World of Expression.

You can access the video of Celso’s and Kirupa’s talk at http://sessions.visitmix.com. Watching this is highly recommended! And, if you want to know how to access SQL data from your WPF application, they are describing in detail how to do that using some code snippets. In general, the process and steps used in the lab manual to design this application are taken straight from this talk … they have made it so clear and easy it was like a revelation for me :-).

Cheers
Michael

Expression Web Beginner’s Tutorial

Here is a nice tutorial for Expression Web that shows how to build a complete web site with ASP.net and Expression Web. This was designed as part of a curriculum for High Schools that want to teach their students web design skills:

Your Learning Guide to Expression Web provides a convenient method to learn valuable Web development skills using Microsoft® Expression® Web. In this self-paced, 55-page tutorial, you will learn the basics of using Microsoft Expression Web and build a creative, dynamic Web site from scratch with the design tools that IT professionals use.While creating a Web site using Expression Web, you will:

• Learn about ASP.NET
• Create page layouts with layers
• Incorporate images
• Format text with Style Sheets
• Use CSS with other elements
• Design and use Master Pages
• Create links
• Include an interactive calendar

You will be able to apply what you discover in this tutorial to create many styles of Web sites.

This tutorial can be used as a stand-alone resource or to accompany the Expression Web Curriculum for Pre-collegiate Students.

Head over to this site for more information: http://www.microsoft.com/facultyconnection/precollegiate.

Cheers Koestie

New year, new resolutions

A long time has passed since my last post – but anyway, the time before christmas is always very busy @ Microsoft. Right now, we are reviewing the first half of the year and looking at the results as well as planning the second half. Designer business looks actually pretty good, we are seeing quite some traction and a lot of interest in Silverlight and Expression. Still, there are lots of areas of improvement, chiefly among them the need for additional training resources. Which brings me to the topic of today’s post: if you are looking for a quick way to ramp up on Silverlight, check out the Silverlight Firestarter at http://www.visitmix.com:

The Silverlight 1.0 Fire Starter is a one-day event providing developers and designers information on the concept behind Silverlight as a technology, what tools are useful in development and the knowledge in order to start building their own applications. The eight sessions are available to watch here and can be downloaded in video and audio-only formats.

So, if you have a bit of free time, take a look.

Cheers
Koestie

Free Expression Web eBook

UPDATE – thanks for the comment, I have changed the post accordingly – actually, it came to me too late that deep-linking directly to content  on other sites is not very good form … so apologies for that & please get the book on the web site.

If you are building your web site with Expression Web, you might be interested in this free eBook by Microsoft MVP Tina Clarke. The book shows you how to implement and use Dynamic Web Templates in Expression Web:

Free Expression Web Dynamic Web Template Ebook By Tina Clarke Microsoft MVP – FrontPage.

How to make DWTs and prepare your site.

  • Do you want to spend less time adding new menus and content that appears on every page
  • Would you like to be able to change your template in a few minutes?
  • Do you find the maintenance of your site tedious?

If so get my free Expression Web Dynamic Web Template Ebook and learn how to change your site into any easy chore today.

 The book is offered as an .exe file (no PDF or text) with an included reader. Get it here …

Cheers
Koestie

Build a streaming media Vista sidebar gadget with Silverlight

Wow, I have been searching for a tutorial on how to build a Vista sidebar gadget in Silverlight for quite some time now (I think that the small screen real estate you have at your disposal when designing a sidebar gadget is the ultimate test of a designer’s creativity) – and just now I found this great webinar that not only shows you how to build a Silverlight gadget but throws in streaming media as well! Just perfect, take a look if you are into sidebar gadgets. Click here …

WPF & Expression video tutorials

Head over to http://www.contentpresenter.com/ and check out their range of video tutorials. They can be downloaded for offline viewing and run approx. 15 minutes per video. Topics covered include:

  • Building an Interactive 3D Video Player
    Learn how to use the 3DTools library to place 2D controls onto 3D meshes while keeping their interactivity intact.
  • Reflections in Visual Studio and Blend
    Learn how to use Visual Studio and Blend together to easily create live video reflections for your applications.

And more. Short and sweet.

Cheers
Koestie

Another Expression Design Tutorial – Shiny Vista buttons

image133.jpg

Looking at my blog stats, the most popular articles seem to be those with links to Expression Design tutorials. So, here is another one for your pleasure: how to create shiny Vista styled buttons – step by step. This one comes from the great Expression team blog @ Microsoft: http://blogs.msdn.com/expression/pages/creating-a-vista-style-button-template.aspx. Enjoy!

Quick update: I liked the effect so much that I have created a new header for my blog … so it works well for more than just buttons :-).