title: How do I navigate to a new page in windows 8 metro apps after the sound is finished playing?
body: <p>I'm using the following code to play sound on a button click.</p>
  
  <pre><code>public class AudioHelper
      {
          public async static void playButtonClick()
          {
              MediaElement snd = new MediaElement();
              StorageFolder folder = await Package.Current.InstalledLocation.GetFolderAsync("Audios");
              StorageFile file = await folder.GetFileAsync("buttonClick.m4a");
              var stream = await file.OpenAsync(FileAccessMode.Read);
              snd.SetSource(stream, file.ContentType);
              snd.Play();
          }
      }
  </code></pre>
  
  <p>I called the code from the button click event using the following codes:</p>
  
  <pre><code> private void btnFlashCard_Click(object sender, RoutedEventArgs e)
          {
              AudioHelper.playButtonClick();
              this.Frame.Navigate(typeof(LevelSelection));
          }
  </code></pre>
  
  <p>since the playButtonClick is async, the page navigate to the LevelSelection page before the audio start playing.  How do I make it so that the audio play first then the page navigate? Thank you.</p>
  
  <p><strong>EDIT:</strong>
  Thanks to @htcdmrl  I was able to figure out how to do this.  As I mentioned in the comment, in order for the MediaEnded event to fire, the MediaElement has to be in the visual tree.  I added the following code in the xaml and modify the code slightly to get it to work.</p>
  
  <p>I added the following code to XAML:</p>
  
  <pre><code> &lt;Frame HorizontalAlignment="Left" Margin="10,742,0,0" VerticalAlignment="Top"&gt;
              &lt;MediaElement x:Name="me"  HorizontalAlignment="Left" Height="100" Margin="20,742,0,-74" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.359,-0.219"/&gt;
          &lt;/Frame&gt;
  </code></pre>
  
  <p>Added the following codes to MainPage.Xaml.cs </p>
  
  <pre><code>public MainPage()
          {
              this.InitializeComponent();
              me.MediaEnded += me_MediaEnded;
          }
  
          void me_MediaEnded(object sender, RoutedEventArgs e)
          {
              this.Frame.Navigate(typeof(LevelSelection));
          }
  </code></pre>
  
  <p>and change playButtonclick and btnFlashCard_Click to the following:</p>
  
  <pre><code>private void btnFlashCard_Click(object sender, RoutedEventArgs e)
          {
              playButtonClick();
          }
  
          public async void playButtonClick()
          {
  
  
              StorageFolder folder = await Package.Current.InstalledLocation.GetFolderAsync("Audios");
              StorageFile file = await folder.GetFileAsync("buttonClick.m4a");
              var stream = await file.OpenAsync(FileAccessMode.Read);
              me.SetSource(stream, file.ContentType);
  
              me.Play();
          }
  </code></pre>