Playing sound, music or video in Windows Store Apps

Playing sounds, music or videos in a Windows Store App is pretty easy. Here is how you can do it.

Play Video Or Music Windows Store App

I’ve added a folder for the files

The View – the styles for the buttons can be found in teh standardstyles resource dictionary, but Ive added them here for simplicity

<Page
    x:Class="PlaySound.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PlaySound"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Border BorderThickness="6" BorderBrush="White" Width="500" Height="400" >
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black">
        <StackPanel.Resources>
            <Style x:Key="PlayAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
                <Setter Property="AutomationProperties.AutomationId" Value="PlayAppBarButton"/>
                <Setter Property="AutomationProperties.Name" Value="Play"/>
                <Setter Property="Content" Value="&#xE102;"/>
            </Style>
                <Style x:Key="PauseAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
                    <Setter Property="AutomationProperties.AutomationId" Value="PauseAppBarButton"/>
                    <Setter Property="AutomationProperties.Name" Value="Pause"/>
                    <Setter Property="Content" Value="&#xE103;"/>
                </Style>
            </StackPanel.Resources>
        <MediaElement x:Name="myMediaElement" Height="300" Width="500"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
                <Button x:Name="play" Style="{StaticResource PlayAppBarButtonStyle}" Click="play_Click"/>
                <Button x:Name="stop" Style="{StaticResource PauseAppBarButtonStyle}" Click="stop_Click"/>
            </StackPanel>
        </StackPanel>
    </Border>
</Page>

The code

using System;
using Windows.ApplicationModel;
using Windows.Storage;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace PlaySound
{

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        protected override async void OnNavigatedTo(NavigationEventArgs e)
        {
            StorageFolder folder = await Package.Current.InstalledLocation.GetFolderAsync("VideoAndMusic");
            StorageFile file = await folder.GetFileAsync("IrisDevReach.mp4");
            var stream = await file.OpenAsync(FileAccessMode.Read);

            myMediaElement.SetSource(stream, file.ContentType);
        }

        private void play_Click(object sender, RoutedEventArgs e)
        {
            myMediaElement.Play();
        }

        private void stop_Click(object sender, RoutedEventArgs e)
        {
            myMediaElement.Pause();
        }
    }
}