XAML media playback sample

This sample demonstrates how to use the MediaElement control to play back audio and video in Windows Store apps built using C++ or C# with Extensible Application Markup Language (XAML).

 
 
 
 
 
4.1 Star
(9)
21,590 times
Add to favorites
11/26/2013
E-mail Twitter del.icio.us Digg Facebook
<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
//
//*********************************************************
-->
<common:LayoutAwarePage
    x:Class="BasicMediaPlayback.Scenario5"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicMediaPlayback"
    xmlns:common="using:SDKTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="Input" Grid.Row="0">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <TextBlock TextWrapping="Wrap" Grid.Row="0" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" >
        Press the button below to add multiple video files to the playlist, then choose a video to play from the list below.  You can press the button multiple times to add additional files to the list.  Playback will automatically advance to the next file in the playlist.
      </TextBlock>

      <Button Content="Select multiple media files" Grid.Row="1" Margin="10" Click="OpenFileButton_Click"/>

      <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts for the input section -->
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
          <VisualState x:Name="InputFullScreenLandscape"/>
          <VisualState x:Name="InputFilled"/>
          <VisualState x:Name="InputFullScreenPortrait"/>
          <VisualState x:Name="InputSnapped"/>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
    </Grid>

    <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <!-- ListBox used to display the names of files in the current playlist -->
      <ListBox Name="Playlist" SelectionChanged="Playlist_SelectionChanged" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="350" Width="200" Grid.Column="0" Margin="10">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Name}" />
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>

      <MediaElement x:Name="Scenario5MediaElement" Height="300" Width="640" Grid.Column="1" AreTransportControlsEnabled="true" MediaEnded="MediaElement_MediaEnded" />

      <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts for the output section -->
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
          <VisualState x:Name="OutputFullScreenLandscape"/>
          <VisualState x:Name="OutputFilled"/>
          <VisualState x:Name="OutputFullScreenPortrait"/>
          <VisualState x:Name="OutputSnapped"/>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
    </Grid>
  </Grid>
</common:LayoutAwarePage>