重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之媒体控件
- 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(); } } }
OK
[源码下载]