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.Scenario2"
    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">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left">
                For this scenario, ensure that you have a Windows certified Play To device added to your list of devices and that it is currently running. Play To is turned on by default for MediaElements.
                After picking a video to play, activate the Charms bar by swiping in from the right edge of a touch screen, moving the mouse to the upper or lower right corner of the display, or pressing Windows + K on the keyboard then choose a device to start playback. To disconnect, use the Charms bar and press the Disconnect button for the same device that you chose previously. The transport controls in this app should continue to work regardless of where the media is playing.
            </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="Scenario2MediaElement" Height="300" Width="640" AreTransportControlsEnabled="True" />

            <!-- 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>