Creating a Podder Skin

This article provides a step-by-step walkthrough of how to create a new skin for Podder, the WPF podcast player application. We will not examine every detail involved, but just enough to get you up and running so that you can be productive. This article enables contestants in the Podder Skinning Competition to get started with creating their awesome Podder skin.

First, download the Podder source code from here: Podder Source Code. You MUST use this version of the Podder source code.

Change the file extension from .DOC to .ZIP and decompress the file (that is a workaround for a limitation imposed by WordPress).

Open the Podder solution in Visual Studio 2008.

If you do not have the Infragistics NetAdvantage for WPF v7.2 (or later) installed, you will need to right-click on the Podder.GrantHinkson project and click ‘Unload Project.’

Add a new project to the Podder solution. Use the WPF User Control Library project template and name it “Podder.MyName” — obviously replacing MyName with your name. 🙂

(click image to enlarge)

Delete UserControl1.xaml from the new project.

Give your new project assembly references to the Podder and PodderLib assemblies, as seen below:

(click image to enlarge)

Open your project’s AssemblyInfo.cs file and add the following line of code, but replace “MySkinName” with whatever name you want to give your new Podder skin:

[assembly:Podder.PodderSkinAssembly("MySkinName")]

Open your project’s Property Pages, and go to the Build tab. Change the project’s Output Path so that it points to a subdirectory of the Podder project’s Debug/Skins directory. That new subdirectory should be your name. The screenshot below illustrates this:

Switch the build mode of the solution from Debug to Release, and repeat the previous step, only this time create a folder with your name under Podder’s Release/Skins directory.

Switch the build mode back to Debug.

Add a new folder to your project called “Views”.

Right-click on the Views folder, and select Add | New User Control…

Name the new item “MainWindowView” and click the Add button.

Add another UserControl named “PodcastsControlView” to the Views folder.

Add a ResourceDictionary to the project at the root level, name it “Resources.xaml”, and be sure the file name starts with a capital ‘R’.

Open Resources.xaml and declare an instance of both UserControls created previously. The MainWindowView control must have an x:Key of VIEW_MainWindow. The PodcastsControlView must have an x:Key of VIEW_PodcastsControl. An example of this is below:

(click image to enlarge)

We’re almost there…

Now open MainWindowView.xaml and add this bit of XAML into MainWindowView’s Grid panel:

<ComboBox
  HorizontalAlignment="Right"
  IsSynchronizedWithCurrentItem="True"
  ItemsSource="{Binding Path=Skins}"
  Margin="8"
  VerticalAlignment="Top"
  Width="200"
  />

Remove MainWindowView’s Width and Height settings from the XAML.

Run the application. When Podder opens, it will not display your new skin yet. In the top-right corner, you will see a ComboBox. Drop it down and select your skin. Voila! You should see your (empty) skin. From this point on, you have complete creative freedom to decide how to display Podder’s data and functionality. Let the fun begin!

If you want to see the final product of all the steps listed above, you can download the modified solution here: Podder Source Code (with new skin)

NOTE: You must change that file’s extension from .DOC to .ZIP and then decompress it.

What to do next?

Since Podder was built to support “structural skinning” it can be displayed in an infinite number of ways. The prospect of having a clean slate to work with can be rather daunting. I suggest you start by seeing how the other skins work. The default skin is the simplest skin to understand. It is located in the Podder project, under the DefaultSkin folder. It shows how all of the controls are bound to Podder’s data model, and which routed commands must execute to consume Podder functionality.

The PodderLib assembly contains the data model to which you bind. The two most important classes to know about are PodderDataSource and EpisodePlayerSettings. They contain most of the properties that the UI displays.

The Podder project has a file called Commands.cs that you should review. It contains many of the routed commands that Podder listens to, enabling your skin to consume Podder’s features. Some of the built-in commands are used too, as you will see while reviewing the existing skins.

Some of the standard controls in Podder skins are already created for you. The default skin provides you with the PlayButton and PlaybackSlider controls. The PlayButton has the ability to toggle between being in the “play” and “pause” state automatically. The PlaybackSlider allows the user to seek through the active episode, similar to having fast-forward and rewind capabilities.