MediaElement Markers Missing in WPF

Question

I see that there is a Markers Property on the MediaElement, but this seems to be available to the Silverlight MediaElement, not the WPF MediaElement?

Can you help me with what I'm missing?

I'm trying to add Markers to a WPF MediaElement, to play a video and show popups based on the timeline. What should I be using in place of the Missing Markers collection?

Thank you for your help.

Answer 1

There are two aspects to your question depending on what you actually intended - please note that the MediaElement.Markers Property is a read only collection of timeline markers associated with the currently loaded media file:

What's a timeline marker?

Here's the MSDN description of the TimelineMarker Class:

A timeline marker is metadata associated with a particular point in a media file. These markers are usually created ahead of time and stored in the media file itself. They are typically used to name different scenes in a video or provide scripting cues. By handling the MediaElement object's MarkerReached event or by accessing the MediaElement object's Markers property, you can use timeline markers [...]

So timeline markers may be a good fit for encoding your popups, but it is important to note that they are a property of the media file itself and not the collection of graphical tick marks on the typical media players timeline widget!

How do I create and handle timeline markers?

The only article summarizing this I could find right now is How to encode video markers for consumption in Silverlight and WPF from Steven Porter. (Don't get fooled by the registration demand, it's the infamous technique from the evil hyphen site that motivated the creation of Stack Overflow in the first place, i.e. you can read the article just fine without registering, just keep scrolling down.)

How do I create a timeline control with tick marks in WPF?

Assuming this is what you're actually trying to achieve and why you stumbled over the MediaElement.Markers collection the answer is roll your own:

It's pretty simple though, basically you will need to customize a Slider control to your liking, see this example from the Slider Class documentation on how to use the Ticks property to create tick marks along the Slider at irregular intervals:

<Slider Width="100" Value="50" Orientation="Horizontal" HorizontalAlignment="Left" 
IsSnapToTickEnabled="True" Maximum="3" TickPlacement="BottomRight" 
AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="2" 
Ticks="0, 1.1, 2.5, 3"/>