背水一战 Windows 10 (59) - 控件（媒体类）: Image, MediaElement
作者：介绍背水一战 Windows 10 之 控件（媒体类） - Image
- MediaElement
Controls/MediaControl/ImageDemo1.xaml.cs
/* * Image - 图片控件（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/） */using System;using Windows.Storage;using Windows.Storage.Streams;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Media.Imaging;namespace Windows10.Controls.MediaControl{ public sealed partial class ImageDemo1 : Page { public ImageDemo1() { this.InitializeComponent(); this.Loaded += ImageDemo_Loaded; } private async void ImageDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e) { // 将 Image 控件的图片源设置为 ms-appx:///Assets/StoreLogo.png image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/StoreLogo.png", UriKind.Absolute)); // 将图片文件流转换为 ImageSource 对象（BitmapImage 继承自 BitmapSource, BitmapSource 继承自 ImageSource） RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/StoreLogo.png", UriKind.Absolute)); IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync(); BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); image4.Source = bitmapImage; // 通过下面这种方式也可以拿到文件的 IRandomAccessStream 流 // StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/StoreLogo.png")); // IRandomAccessStream stream = await storageFile.OpenReadAsync(); } private void remoteImage_ImageOpened(object sender, RoutedEventArgs e) { // 图片加载完成后，获取 Image 控件的真实的宽和高 lblMsg.Text = $"remoteImage_ImageOpened, remoteImage.ActualWidth:{remoteImage.ActualWidth}, remoteImage.ActualHeight:{remoteImage.ActualHeight}"; lblMsg.Text += Environment.NewLine; // 图片加载完成后，获取图片的真实的宽和高 BitmapSource bs = remoteImage.Source as BitmapSource; lblMsg.Text += $"remoteImage_ImageOpened, PixelWidth:{bs.PixelWidth}, PixelHeight:{bs.PixelHeight}"; } private void remoteImage_ImageFailed(object sender, ExceptionRoutedEventArgs e) { lblMsg.Text = "remoteImage_ImageFailed"; } }} Controls/MediaControl/ImageDemo2.xaml.cs
/* * Image - 图片控件（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/） */using System;using System.IO;using System.Reflection;using Windows.Storage;using Windows.Storage.Streams;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Media.Imaging;using Windows10.Common;namespace Windows10.Controls.MediaControl{ public sealed partial class ImageDemo2 : Page { public ImageDemo2() { this.InitializeComponent(); } private async void image4_Loaded(object sender, RoutedEventArgs e) { // 将程序包内的 png 文件复制到 ApplicationData 中的 LocalFolder StorageFolder localFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("webabcdTest", CreationCollisionOption.OpenIfExists); StorageFile packageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/StoreLogo.png")); await packageFile.CopyAsync(localFolder, "StoreLogo.png", NameCollisionOption.ReplaceExisting); // 通过 ms-appdata:/// 协议加载 Application 内图片 string url = "ms-appdata:///local/webabcdTest/StoreLogo.png"; image4.Source = new BitmapImage(new Uri(url, UriKind.Absolute)); } private async void image5_Loaded(object sender, RoutedEventArgs e) { // 获取 Package 内嵌入式资源数据 Assembly assembly = typeof(ImageDemo2).GetTypeInfo().Assembly; Stream stream = assembly.GetManifestResourceStream("Windows10.Controls.MediaControl.EmbeddedResource.png"); IRandomAccessStream imageStream = await ConverterHelper.Stream2RandomAccessStream(stream); BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(imageStream); image5.Source = bitmapImage; } }} Controls/MediaControl/MediaElementDemo.xaml.cs
/* * MediaElement - 视频控件（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/） * 用于视频播放，懒得写了，参见文档吧 * 也可以看看之前 win8 时写的示例 http://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html, http://www.cnblogs.com/webabcd/archive/2014/06/12/3783712.html * * 重点需要说明的如下： * 1、终于直接支持 hls 协议了，即可以直接播放 m3u8 * 2、别忘了 MediaStreamSource */using Windows.UI.Xaml.Controls;namespace Windows10.Controls.MediaControl{ public sealed partial class MediaElementDemo : Page { public MediaElementDemo() { this.InitializeComponent(); } }} OK