背水一战 Windows 10 (59)

ms133

[源码下载]

背水一战 Windows 10 (59) - 控件（媒体类）: Image, MediaElement　　
作者：webabcd

介绍
背水一战 Windows 10 之 控件（媒体类）

• Image
  
• MediaElement
  

　　
示例
1、Image 的示例 1
Controls/MediaControl/ImageDemo1.xaml



<Page
x:Class="Windows10.Controls.MediaControl.ImageDemo1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.MediaControl"
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="10 0 10 10">
<!--
Image - 图片控件
Stretch - 拉伸方式
Fill - 充满容器，不保留长宽比
None - 不做任何处理，如果图片比容器大，则多出的部分被剪裁
Uniform - 等比缩放到容器（默认值）
UniformToFill - 充满容器，且保留长宽比，多出的部分被剪裁
Source - 图片源，一个 ImageSource 对象
-->
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100">
<Image Name="image1" Source="/Assets/StoreLogo.png" Stretch="Fill" Width="150" Height="100" />
</Border>
<Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0">
<Image Name="image2" Source="/Assets/StoreLogo.png" Stretch="None" Width="150" Height="100" />
</Border>
<Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0">
<!--后台设置 Image 的 Source-->
<Image Name="image3" Stretch="Uniform" Width="150" Height="100" />
</Border>
<Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0">
<!--后台设置 Image 的 Source-->
<Image Name="image4" Stretch="UniformToFill" Width="150" Height="100" />
</Border>
<Border BorderBrush="Red" BorderThickness="1" Width="150" Height="100" Margin="20 0 0 0">
<Image Stretch="Fill" Width="150" Height="100">
<!--BitmapImage 继承自 BitmapSource, BitmapSource 继承自 ImageSource-->
<Image.Source>
<BitmapImage UriSource="/Assets/StoreLogo.png" DecodePixelHeight="10" />
</Image.Source>
</Image>
</Border>
</StackPanel>

<!--
Image - 图片控件
NineGrid - 指定9网格（相当于flash中的9切片）中的4条线，Thickness 类型
Left - 左边的线相对于图片最左端的距离
Top - 上边的线相对于图片最顶端的距离
Right - 右边的线相对于图片最右端的距离
Bottom - 下边的线相对于图片最底端的距离
-->
<StackPanel Orientation="Horizontal" Margin="0 50 0 0">
<Image Source="/Assets/NineGridDemo.png" Width="200" Height="200" />
<!--通过指定9切片，防止边框被放大或缩小-->
<Image Source="/Assets/NineGridDemo.png" Width="200" Height="200" NineGrid="1 1 1 1" Margin="20 0 0 0" />
</StackPanel>

<!--
Image - 图片控件
ImageOpened - 成功下载图片源并成功解码后触发的事件
ImageFailed - 下载图片源或解码发生错误时触发的事件
-->
<StackPanel Orientation="Vertical" Margin="0 50 0 0">
<Border BorderBrush="Red" BorderThickness="1" Width="200" Height="200" HorizontalAlignment="Left">
<Image Name="remoteImage" Stretch="Uniform" Source="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" Width="200" Height="200"
ImageOpened="remoteImage_ImageOpened" ImageFailed="remoteImage_ImageFailed" />
</Border>
<TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="0 10 0 0" />
</StackPanel>
</StackPanel>
</Grid>
</Page>
　　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";
}
}
}
　　
2、Image 的示例 2
Controls/MediaControl/ImageDemo2.xaml



<Page
x:Class="Windows10.Controls.MediaControl.ImageDemo2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.MediaControl"
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="10 0 10 10" HorizontalAlignment="Left">
<!--加载一个 http 或 https 地址的图片-->
<Image Name="image1" Stretch="Uniform" Source="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" Width="50" Height="50" Margin="5" />
<!--加载 Package 内图片-->
<Image Name="image2" Source="/Assets/StoreLogo.png" Width="50" Height="50" Margin="5" />
<!--加载 Package 内图片-->
<Image Name="image3" Source="ms-appx:///Assets/StoreLogo.png" Width="50" Height="50" Margin="5" />
<!--加载 Application 内图片-->
<Image Name="image4" Width="50" Height="50" Margin="5" Loaded="image4_Loaded" />
<!--加载 Package 内嵌入式资源的图片-->
<Image Name="image5" Width="50" Height="50" Margin="5" Loaded="image5_Loaded" />
</StackPanel>
</Grid>
</Page>
　　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;
}
}
}
　　
3、MediaElement 的示例
Controls/MediaControl/MediaElementDemo.xaml



<Page
x:Class="Windows10.Controls.MediaControl.MediaElementDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.MediaControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<Grid Margin="10 0 10 10">
<!--
MediaElement - 视频控件
-->
<MediaElement Source="http://media.w3.org/2010/05/sintel/trailer.mp4"
PosterSource="/Assets/StoreLogo.png"
AutoPlay="True"
AreTransportControlsEnabled="True">
<!--
MediaTransportControls - 用于定义 MediaElement 的控制条的样式（当 MediaElement 的 AreTransportControlsEnabled 设置为 true 时）
有很多属性可以设置，详见文档
-->
<MediaElement.TransportControls>
<MediaTransportControls IsCompact="True" />
</MediaElement.TransportControls>
</MediaElement>
</Grid>
</Grid>
</Page>
　　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
[源码下载]