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.