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,603 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.Scenario3"
    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">
                After picking a media file to play, press the 'Add marker' button to add a marker at 2 seconds ahead of the current position. When a marker is reached, observe the output box in the lower left hand corner, which indicates when the markers are added and then later fired. You can use this feature for closed captioning as well as other media-related capabilities.
            </TextBlock>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Grid.Row="1">
                <Button Content="Select a media file" Margin="0,0,10,0" Click="OpenFileButton_Click" />
                <Button Content="Add markers" Margin="0,0,10,0" Click="AddMarkerButton_Click" />
            </StackPanel>
            <!-- 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" Grid.Row="1" HorizontalAlignment="Left">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!-- A MediaElement control with default transport controls enabled -->
            <MediaElement x:Name="Scenario3MediaElement" Grid.Row="0" Height="300" Width="640" AreTransportControlsEnabled="True" MarkerReached="MediaElement_MarkerReached" />
            <TextBlock Name="Scenario3Text" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" Grid.Row="1" />
            
            <!-- 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>