Binding MediaElement to a ViewModel in a Windows 8 Store App

If you want to play a video from your video-library in a MediaElement control of a Metro Windows Store App and tried to bind the Url of the video file as a source to the MediaElement control like this, you may have noticed it’s not working as well for you:

<MediaElement Source="{Binding Url}" />

I have no idea why it’s not working, but I managed to get it going using  ContentControl instead:

<ContentControl Content="{Binding Video}" />

The code behind for this is:

protected override void OnNavigatedTo(NavigationEventArgs e)


    _viewModel = new VideoViewModel("video.mp4");

    DataContext = _viewModel;


And the VideoViewModel looks like this:

public class VideoViewModel


    private readonly MediaElement _video;

    private readonly string _filename;


    public VideoViewModel(string filename)


        _filename = filename;

        _video = new MediaElement { AutoPlay = true };

        //don't load the stream until the control is ready

        _video.Loaded += VideoLoaded;



    public MediaElement Video


        get { return _video; }



    private async void VideoLoaded(object sender, RoutedEventArgs e)


        var file = await KnownFolders.VideosLibrary.GetFileAsync(_filename);

        var stream = await file.OpenAsync(FileAccessMode.Read);

        _video.SetSource(stream, file.FileType);



I had to wait for the MediaElement.Loaded event until I could load and set the video stream.

No Comments