This is part 1 of the series “Transforming an Ugly Duckling to a Graceful Swan with Expression Blend and Silverlight”.
Introduction
As I promised earlier on Silverlight Show, this screencast series will show how to create the showcase application shown on www.response.hu (you may want to read the interview to get some background information on the project). The screencast series shows a real life example of how designers can add value to a project, and how a developer can support this effort by creating small, reusable behaviors that allow the designer to tweak things to shape the end result to be exactly as he wanted it.
The series is broken into four screencasts. In the first one, I will create the “ugly duckling” version of the application. The next one will add the Intro animation, related functionality and Blend behaviors. The third part will show how to style and animate the video list, and the last part will add the details view with the 3D transition effect.
During the series, I will introduce some important concepts of working with Expression Blend on Silverlight applications. These concepts include:
- Working with Sample Data
- Creating a master-detail view
- Creating and using Behaviors and Actions
- Playing videos, displaying playback status information
- Using Visual States to add interactivity
- Customizing the look and behavior of a ListBox through ItemTemplate, ItemContainerStyle, ItemsPanelTemplate and ControlTemplate
- Extracting style to a resource
Screencast #1 – The Ugly Duckling
Note: I recommend watching the screencast in full screen.
Watch the screencast
The first screencast shows how to create the ugly version that I am going to work from in the later parts of the series. The ugly version lists all the videos (or ReferenceItems), and allows the user to see the explanation and play back the showcase videos.
The videos (or ReferenceItems) have a title, a thumbnail picture, a description, a video URL and a link where additional information can be read. The application uses Expression Blend’s Sample Data feature to populate the data source that contains the videos and the associated data. After creating the data source, I show how the thumbnails can be displayed in a ListBox, and how a master-detail view can be created in Blend using Element-to-Element databinding. As the first screencast is finished, the reference items are listed as thumbnails and the details of the selected video can be read, and the video can be played back.
Here is what happens in the screencast:
| Time |
Content |
| @ 0:00 |
Introduction and showing off the finished application |
| @ 1:59 |
Creating the application in Blend |
| @ 2:50 |
Using Blend’s Sample Data feature to store the data for the video |
| @ 6:58 |
Displaying the sample data in a ListBox |
| @ 8:37 |
Creating the Details view with title, description, video and the more information link |
| @ 13:33 |
Running the project for the first time, master-detail scenario works |
| @ 14:39 |
Importing the videos into the project |
| @ 15:42 |
Importing the thumbnail images to the project |
| @ 16:20 |
Replacing the sample data with real data |
| @ 17:20 |
Running the Ugly Duckling application with the real data |
| @ 19:10 |
Wrapping up |
I hope you found this screencast useful. Feel free to grab the attached source code. You may reuse the source code in any way you see fit. I have also provided the sample videos and thumbnails in the project, but the images and videos in the attached solution may only be used to follow the tutorial and to run the project as they represent the work of Response, and contain trademarks and logos from Response and its clients.
Please let me know in the comments if you like the screencast format, if it is too fast or too slow, and generally any opinion you may have about the screencast!
Download solution