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.Scenario4"
    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">
                You can create your own custom transport controls instead of using the defaults.  After picking a media file to play, use the buttons below to control basic playback properties.
                The Zoom button toggles the Stretch mode of the MediaElement to remove letterboxing if the media file's natural aspect ratio and the MediaElement control's aspect ratio don't match.
                The Full-window button causes the media content to fill the window. In this mode only content inside Popup elements (including AppBars) will still be rendered on top of the media content.
            </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">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <MediaElement x:Name="Scenario4MediaElement" Height="300" Width="640" Grid.Row="0"
                    MediaOpened="MediaElement_MediaOpened"
                    MediaEnded="MediaElement_MediaEnded"
                    DoubleTapped="MediaElement_DoubleTapped"
                    />

            <!-- Transport controls are in a Popup so that they'll stay visible while the MediaElement is in full-window mode after setting the IsFullWindow property to true -->
            <Popup x:Name="TransportControlsPopup" IsOpen="True" Width="570" Height="90" Opacity="0.8" VerticalAlignment="Top" HorizontalAlignment="Left">
                <StackPanel Background="CornflowerBlue">
                    <Slider Name="TimelineSlider" Width="500" Height="40" />
                    <StackPanel Orientation="Horizontal" Height="50">
                        <Button x:Name="PlayButton" FontFamily="Segoe UI Symbol" Content="&#xE102;" ToolTipService.ToolTip="Play" Margin="10,0" Click="PlayButton_Click" />
                        <Button x:Name="PauseButton" FontFamily="Segoe UI Symbol" Content="&#xE103;" ToolTipService.ToolTip="Pause" Margin="10,0" Click="PauseButton_Click" />
                        <Button x:Name="StopButton" FontFamily="Segoe UI Symbol" Content="&#xE15B;" ToolTipService.ToolTip="Stop" Margin="10,0" Click="StopButton_Click" />
                        <Button x:Name="RewindButton" FontFamily="Segoe UI Symbol" Content="&#xE100;" ToolTipService.ToolTip="Rewind" Margin="10,0" Click="RewindButton_Click" />
                        <Button x:Name="ForwardButton" FontFamily="Segoe UI Symbol" Content="&#xE101;" ToolTipService.ToolTip="Fast Forward" Margin="10,0" Click="ForwardButton_Click" />
                        <Button x:Name="ZoomButton" Content="Zoom" ToolTipService.ToolTip="Toggle Zoom" Margin="10,0" Click="ZoomButton_Click" />
                        <Button x:Name="FullWindowButton" Content="Full-Window" ToolTipService.ToolTip="Toggle Full-Window" Margin="10,0" Click="FullWindowButton_Click" />
                    </StackPanel>
                </StackPanel>
            </Popup>

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