Customize the UI of the player

May 3, 2011 at 9:22 PM

I have written a blogpost including a presentation on video (from Channel9) on customizing the UI of the player. Might be useful information :)


Martin Tirion
User Experience Evangelist

May 9, 2011 at 11:05 AM

Hi Martin,

I extend the SMFPlayer class in order to add some functionality which requires access to protected members. But when I try to open an instance of my extended SMFPlayer in Blend I get an "Invalid XAML" error and cannot modify the layout of the player. I was wandering if you know why this is happening and if's there's a way to workaround it?


May 10, 2011 at 1:07 PM


Did you build your player in Blend first, sometimes I've seen this happen where Blend wants to do the build of the new assembly before it will notice the changes.

To "hopefully" see what the error is in the xaml look in the Results pane under the Errors tab. That should give you the exception Blend is receiving trying to load the xaml. Without knowing the particular changes it's difficult to know what it is.

Invalid Xaml error is of course a rather generic error.

Common things to cause it

  1.  A control is pointing to a missing resource, e.g. you have a textbox that is pointing to a background color resource like Background="{StaticResource TextColor"} and the TextColor resource is not defined. This can happen in many places, any control property that is bound to a resource that is missing. This also can happen if the Resource is defined in the XAML in the wrong order, for the static resource binding to work the resource being bound needs to be before anything that uses it in the XAML. 
  2. An exception being thrown from your code. Note that while in the Blend designer your code is being run, it's possible that a service call is being made or another error is happening. If you say have no parameterless constructor on a control or you are expecting some initparam or other environment variable to be set. The SMFPlayer class does have an IsInDesignMode property that you can use to see if you are in Blend or the VS designer
  3. Typo in the XAML, nuff said.

While Blend is supposed to give rich detailed information about XAML errors I have seen times where it just gives a generic error and it's a pain to track down. I then normally open up the resource file in Visual Studio. Cider does a better job at reporting errors in the XAML. Plus I would recommend Resharper, it goes even further in analyzing the XAML

May 12, 2011 at 11:56 AM


I can reproduce this problem in a very simple example and get two errors in Blend:

1. The name "MyPlayer" does not exist in the namespace "clr-namespace:TempProj;assembly=TempProj".

2. The member "Playlist" is not recognised or is not accessible

I cannot see where I've gone wrong. I've pasted my code below, any help would be much appreciated:

<UserControl x:Class="TempProj.MainPage"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
                <Media:PlaylistItem DeliveryMethod="AdaptiveStreaming" MediaSource=""/>

Then the C# is:
using System;
using System.Windows;
using Microsoft.SilverlightMediaFramework.Core;

namespace TempProj
    public class MyPlayer : SMFPlayer


May 16, 2011 at 3:19 PM

I just tried to reproduce, but no luck. That means that it works fine for me :) This is what I did:

1. Start Visual Studio 2010
2. Create a New Project of type SMF Smooth Streaming Application (comes with Player Framework 2.5 MSI installer). I indicated I wanted to have a separate Website project.
3. Added a class called MyPlayer.cs to the Silverlight project. Inherited from SMFPlayer.
4. Changed the XAML in MainPage.xaml to use local:MyPlayer like you did.
5. Both design mode in VS and Blend show the control as it should.

Maybe a silly question, but did you create the class in the Silverlight project? If you create it in the Website project it's not found.

May 26, 2011 at 5:07 PM

I added two posts on modifying the UI:

How to set the background color of the video area:

A sample UI with tips & tricks:


Aug 12, 2011 at 2:22 PM
Edited Aug 12, 2011 at 2:41 PM

I've got the same problem here : I've just created a class derived from SMFPlayer, and Blend refuses to open my XAML file. The problem goes away if I replace my player by the stock SMFPlayer.

The Exception is:


XamlParseException: [Line: 0 Position: 0]

at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
at MS.Internal.XcpImports.FrameworkElement_MeasureOverride(FrameworkElement element, Size av
at System.Windows.FrameworkElement.MeasureOverride(Size availableSize)
at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Single inWidth, Single i

InnerException: None


I've already tried rebuilding, cleaning, etc... No luck so far.

Oh and of course, it runs fine and displays properly in Visual Studio's design surface.

Aug 12, 2011 at 4:27 PM

One idea: try changing Core:SMFPlayer.Playlist to local:MyPlayer.Playlist

Aug 17, 2011 at 9:35 AM
Edited Aug 17, 2011 at 9:36 AM

timgreenfield wrote:

One idea: try changing Core:SMFPlayer.Playlist to local:MyPlayer.Playlist

Maybe for Michael, but my own Playlist is binded (MVVM):

<player:Player x:Name="Player" Playlist="{Binding Playlist}" AutoLoad="True" AutoPlay="True" MediaEnded="Player_MediaEnded" MediaFailed="Player_MediaFailed" MediaOpened="Player_MediaOpened">

The funny thing is, I haven't changed anything really related, but now, Blend is OK to display my player. Maybe this had something to do with project files, I noticed the references to SMF assemblies are different when added from Blend for instance.

Great. Except the MediaFailed event, which gets me 'The member 'MediaFailed' is not recognized or is not accessible'.

I can of course remove the event handler, it could be added in code-behind and work just fine, or maybe duplicate it in my Player class, but I find this very strange. Maybe there is some kind of scope conflict, as it is defined in Plugins too?

Oct 27, 2011 at 2:22 AM

Excellent video Martin. I have one question though. I need to create a list of the chapters. To do so I followed the portion of the video for creating a vertical playlist. When it came time to assign the part I used the ChapterSelectedElement instead of the playlist element. It lists my chapters and jumps to a chapter when clicked just great. But the problem is as the movie is playing, the chapters in the list do not get highlighted like they do in your playlist example. So if I click chapter 2 and it plays through and then chapter 3 starts, the UI still shows chapter 2 as the selected chapter.

Any ideas on how to fix this?