控件之媒体控件: Image, MediaElement

Image - 图片控件

• MediaElement - 播放视频或音频的控件

示例
1、Image 的 Demo
ImageDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ImageDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                Image - 图片控件
                    Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚举）
                        Fill - 充满容器，不保留长宽比
                        None - 不做任何处理，如果图片比容器大，则多出的部分被剪裁
                        Uniform - 等比缩放到容器（默认值）
                        UniformToFill - 充满容器，且保留长宽比，多出的部分被剪裁

                以下示例图片的原始大小为 150 * 150
            -->
            <StackPanel Orientation="Horizontal">
                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100">
                    <Image Source="/Assets/Logo.png" Stretch="Fill" Width="200" Height="100" />
                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
                    <Image Source="/Assets/Logo.png" Stretch="None" Width="200" Height="100" />
                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
                    <Image Source="/Assets/Logo.png" Stretch="Uniform" Width="200" Height="100" />
                </Border>

                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">
                    <!--后台设置 Image 的 Source-->
                    <Image Name="myImage" Stretch="UniformToFill" Width="200" Height="100" />
                </Border>
            </StackPanel>

            <!--
                Image - 图片控件
                    NineGrid - 指定9网格（相当于flash中的9切片）中的4条线，Thickness 类型
                        Left - 左边的线相对于图片最左端的距离
                        Top - 上边的线相对于图片最顶端的距离
                        Right - 右边的线相对于图片最右端的距离
                        Bottom - 下边的线相对于图片最底端的距离

                以下示例图片的原始大小为 16 * 16
            -->
            <StackPanel Orientation="Horizontal" Margin="0 50 0 0">
                <Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" />

                <!--通过指定9切片，防止边框被放大或缩小-->
                <Image Source="/Assets/NineGrid/Demo.png" Width="200" Height="200" NineGrid="1 1 1 1" Margin="20 0 0 0" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>
    

ImageDemo.xaml.cs

/*
 * Image - 图片控件
 */

using System;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace XamlDemo.Controls
{
    public sealed partial class ImageDemo : Page
    {
        public ImageDemo()
        {
            this.InitializeComponent();

            this.Loaded += ImageDemo_Loaded;
        }

        // 将 Image 控件的图像源设置为 ms-appx:///Assets/Logo.png
        private void ImageDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            myImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));

            /*
                或者用如下方式指定图象源 

                RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));
                IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync();

                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(imageStream);

                myImage.Source = bitmapImage;
            */
        }
    }
}

2、MediaElement 的 Demo
MediaElementDemo.xaml

<Page
    x:Class="XamlDemo.Controls.MediaElementDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Orientation="Horizontal" Margin="120 0 0 0">

            <StackPanel>
                <Button Name="btnPickFile" Content="播放一个本地视频或音频" Click="btnPickFile_Click_1" />

                <Button Name="btnPlayUrl" Content="播放一个网络视频" Click="btnPlayUrl_Click_1" Margin="0 10 0 0" />

                <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                    <Button x:Name="btnPlay"  Content="播放" Margin="0 0 10 0" Click="btnPlay_Click_1" />
                    <Button x:Name="btnPause" Content="暂停" Margin="0 0 10 0" Click="btnPause_Click_1" />
                    <Button x:Name="btnStop"  Content="停止" Margin="0 0 10 0" Click="btnStop_Click_1" />
                </StackPanel>

                <MediaElement Name="mediaElement" AutoPlay="True" PosterSource="/Assets/Logo.png" Width="480" Height="320" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 10 0 0"  />
            </StackPanel>

            <TextBlock Name="lblMsg" FontSize="14.667" Margin="10 0 0 0" />

        </StackPanel>
    </Grid>
</Page>

MediaElementDemo.xaml.cs

/*
 * MediaElement - 播放视频或音频的控件
 *     顾名思义的几个事件：DownloadProgressChanged, BufferingProgressChanged, CurrentStateChanged, MediaOpened, MediaEnded, MediaOpened, SeekCompleted, VolumeChanged
 *     RateChanged - 当 PlaybackRate 的值发生改变时所触发的事件
 *         说明：
 *         1、正常播放：DefaultPlaybackRate = 1, PlaybackRate = 1
 *         2、两倍速快进播放：DefaultPlaybackRate = 0, PlaybackRate = 2
 *         2、一倍速快退播放：DefaultPlaybackRate = 0, PlaybackRate = -1
 *     MarkerReached - 播放过程中遇到时间线标记时所触发的事件
 *         说明：通过 MarkerReached 属性来设置或获取时间线标记
 *
 *     CanPlayType(string type) - 获取对指定类型文件的播放支持的可能性
 *     Play(), Pause(), Stop() - 播放, 暂停, 停止
 *     SetSource(IRandomAccessStream stream, string mimeType) - 指定需要播放的媒体流
 */

using System;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls
{
    public sealed partial class MediaElementDemo : Page
    {
        public MediaElementDemo()
        {
            this.InitializeComponent();

            DispatcherTimer dTimer = new DispatcherTimer();
            dTimer.Interval = TimeSpan.FromMilliseconds(100);
            dTimer.Tick += dTimer_Tick;
            dTimer.Start();
        }

        void dTimer_Tick(object sender, object e)
        {
            // 视频源的 uri
            lblMsg.Text = "Source: " + mediaElement.Source;
            lblMsg.Text += Environment.NewLine;

            // 占位图，即在媒体播放之前显示的图片（与 html5 中的 video 的 poster 作用一样）
            lblMsg.Text += "PosterSource: " + mediaElement.PosterSource;
            lblMsg.Text += Environment.NewLine;

            // 当前的播放状态（Windows.UI.Xaml.Media.MediaElementState 枚举）：Closed, Opening, Buffering, Playing, Paused, Stopped
            lblMsg.Text += "CurrentState: " + mediaElement.CurrentState;
            lblMsg.Text += Environment.NewLine;

            // 指定或获取播放的进度，TimeSpan 类型
            lblMsg.Text += "Position: " + mediaElement.Position;
            lblMsg.Text += Environment.NewLine;

            // 下载的进度（0 - 1之间）
            lblMsg.Text += "DownloadProgress: " + mediaElement.DownloadProgress;
            lblMsg.Text += Environment.NewLine;

            // 下载起始点与原始视频起始点的偏移量（0 - 1之间）
            // 比如一个网络视频时长为 10 分钟，播放过程中手动指定了 Position 想从 5 分钟处开始播，那么：
            // 1、此处的视频已被下载了，那么 DownloadProgressOffset 值为 0
            // 2、此处的视频尚未被下载，则 MediaElement 会断掉当前连接，然后重连一个 http 以获取从 5 分钟处开始的数据，此时 DownloadProgressOffset 值为 0.5
            lblMsg.Text += "DownloadProgressOffset: " + mediaElement.DownloadProgressOffset;
            lblMsg.Text += Environment.NewLine;

            // 缓冲进度（0 - 1之间）
            // 1、小于 1 时则媒体在缓冲
            // 2、等于 1 时则缓冲区已被填满，可以播放媒体
            lblMsg.Text += "BufferingProgress: " + mediaElement.BufferingProgress;
            lblMsg.Text += Environment.NewLine;

            // 默认的播放速率，默认值为 1
            lblMsg.Text += "DefaultPlaybackRate: " + mediaElement.DefaultPlaybackRate;
            lblMsg.Text += Environment.NewLine;

            // 当前播放速率，默认值为 1，如果需要将其指定为其它值，需先将 DefaultPlaybackRate 设置为 0
            lblMsg.Text += "PlaybackRate: " + mediaElement.PlaybackRate;
            lblMsg.Text += Environment.NewLine;

            // 是否可 seek
            lblMsg.Text += "CanSeek: " + mediaElement.CanSeek;
            lblMsg.Text += Environment.NewLine;

            // 是否可 pause
            lblMsg.Text += "CanPause: " + mediaElement.CanPause;
            lblMsg.Text += Environment.NewLine;

            // 媒体的时长
            lblMsg.Text += "NaturalDuration: " + mediaElement.NaturalDuration;
            lblMsg.Text += Environment.NewLine;

            // 媒体的原始宽
            lblMsg.Text += "NaturalVideoWidth: " + mediaElement.NaturalVideoWidth;
            lblMsg.Text += Environment.NewLine;

            // 媒体的原始高
            lblMsg.Text += "NaturalVideoHeight: " + mediaElement.NaturalVideoHeight;
            lblMsg.Text += Environment.NewLine;

            // 媒体的宽高比的宽度部分
            lblMsg.Text += "AspectRatioWidth: " + mediaElement.AspectRatioWidth;
            lblMsg.Text += Environment.NewLine;

            // 媒体的宽高比的高度部分
            lblMsg.Text += "AspectRatioHeight: " + mediaElement.AspectRatioHeight;
            lblMsg.Text += Environment.NewLine;

            // 是否自动播放
            lblMsg.Text += "AutoPlay: " + mediaElement.AutoPlay;
            lblMsg.Text += Environment.NewLine;

            // 是否循环播放
            lblMsg.Text += "IsLooping: " + mediaElement.IsLooping;
            lblMsg.Text += Environment.NewLine;

            // 音量（0 - 1 之间）
            lblMsg.Text += "Volume: " + mediaElement.Volume;
            lblMsg.Text += Environment.NewLine;

            // 左右声道平衡（-1 到 1 之间）
            lblMsg.Text += "Balance: " + mediaElement.Balance;
            lblMsg.Text += Environment.NewLine;

            // 是否静音
            lblMsg.Text += "IsMuted: " + mediaElement.IsMuted;
            lblMsg.Text += Environment.NewLine;

            // 当前媒体是否是音频：播放的是音频则为 true，播放的是视频则为 false
            lblMsg.Text += "IsAudioOnly: " + mediaElement.IsAudioOnly;
            lblMsg.Text += Environment.NewLine;

            // 音频的用途（Windows.UI.Xaml.Media.AudioCategory 枚举）
            // 比如：ForegroundOnlyMedia - 播放的是视频或音乐的音频，且只能前台播放；BackgroundCapableMedia - 播放的是视频或音乐的音频，且支持后台播放（关于音频的后台播放，等写到 MediaControl 时再详细说明）
            lblMsg.Text += "AudioCategory: " + mediaElement.AudioCategory;
            lblMsg.Text += Environment.NewLine;

            // 音频流的数量（比如：有的视频支持多种配音，那么每一种配音就是一个音频流）
            lblMsg.Text += "AudioStreamCount: " + mediaElement.AudioStreamCount;
            lblMsg.Text += Environment.NewLine;

            // 当前播放的音频流，在音频流集合中的索引。注：可以通过 GetAudioStreamLanguage(int? index) 获取指定音频流所对应的语言
            lblMsg.Text += "AudioStreamIndex: " + mediaElement.AudioStreamIndex;
            lblMsg.Text += Environment.NewLine;

            // 设备应该如何播放音频
            lblMsg.Text += "AudioDeviceType: " + mediaElement.AudioDeviceType;
        }

        // 播放本地视频或音频
        private async void btnPickFile_Click_1(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

            picker.FileTypeFilter.Add(".wmv");
            picker.FileTypeFilter.Add(".mp4");
            picker.FileTypeFilter.Add(".mp3");
            picker.FileTypeFilter.Add(".wma");
            picker.FileTypeFilter.Add(".png");

            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = await file.OpenAsync(FileAccessMode.Read);
                // 指定需要让 MediaElement 播放的媒体流
                mediaElement.SetSource(stream, file.ContentType);
            }
        }

        // 通过指定一个 url 播放一个网络视频
        private void btnPlayUrl_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Source = new Uri("http://media.w3.org/2010/05/sintel/trailer.mp4", UriKind.Absolute);
        }

        private void btnPlay_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Play();
        }

        private void btnPause_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Pause();
        }

        private void btnStop_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Stop();
        }
    }
}