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,601 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.Scenario1"
    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">
              Click the button below to pick a media file from your computer and watch it begin playing in the MediaElement below. MediaElement provides a set of default transport controls that allow users to control playback, change the active audio language, zoom the media content to remove letterboxing, and toggle full-window display.
            </TextBlock>
            
            <Button Content="Select a media file" 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">
            <!-- A MediaElement control with default transport controls enabled -->
            <MediaElement x:Name="Scenario1MediaElement"
                Height="300"
                Width="640"
                AreTransportControlsEnabled="True"
                DoubleTapped="Scenario1MediaElement_DoubleTapped"
                />
            
            <!-- 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>