Question

Hey guys I’m fairly green when it comes to wpf, so I need a little help, here is what im looking to do.

I want to create a custom media element, I want to be able to load a video and play any where from 15 secs to 1 min of the video, I want to be able to dynamically set this on load up based on user settings. I’m loading tons of videos essentially into a list view control and I want the video to play, but im trying to save on resources by playing only a small preview of the video.

Things I’ve looked into

• custom control – somewhat lost
• subclassing
• pre build control

Im just really unsure on where to go next. I would greatly appericate any help you can give me.

Answer 1

Given your comments expanding on the requirement, I’d suggest that you use the normal MediaElement, but assigning it a “preview” version of the video that only includes the fragment you want to show and has reduced resolution so as to keep load footprint down.

Thus, your model will have two properties, say PreviewUri and SourceUri. At the PreviewUri, you store the “preview” version of the video; at the SourceUri, you store the “full” version. In your ListBox or ItemsControl, you’ll use MediaElements bound to the PreviewUri. When the user makes a selection, you’ll set the Source of the main MediaElement to the SourceUri. So your ListBox will look something like this:

<ListBox ItemsSource="{Binding}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <MediaElement Source="{Binding PreviewUri}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

your model will look something like this:

public class Video  // ideally implement INotifyPropertyChanged - not shown
{
  public Uri PreviewUri { get; set; }
  public Uri SourceUri { get; set; }

  public static ObservableCollection<Video> LoadVideoInfo()
  {
    /* pseudocode
    new up a collection
    foreach (file in videoFolder)
      collection.Add(new Video { PreviewUri = smallFileUri, SourceUri = bigFileUri });
    return collection;
    */
  }
}

and your code behind will look something like this:

DataContext = Video.LoadVideoInfo();

How you show the full-size video will depend on what you want to trigger this and where the full-size video displays. Using a ListBox rather than looping and adding children to a StackPanel may help with this because you can use the SelectedItemChanged event, databind to SelectedItem or use the IsSynchronizedWithCurrentItem property.