控件之媒体控件: Image, MediaElement

时间:2022-04-23 20:16:36

Image - 图片控件

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

示例
1、Image 的 Demo
ImageDemo.xaml

控件之媒体控件: Image, MediaElement
<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>
控件之媒体控件: Image, MediaElement

ImageDemo.xaml.cs

控件之媒体控件: Image, MediaElement
/*
* 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;
*/
}
}
}
控件之媒体控件: Image, MediaElement

2、MediaElement 的 Demo
MediaElementDemo.xaml

控件之媒体控件: Image, MediaElement
<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>
控件之媒体控件: Image, MediaElement

MediaElementDemo.xaml.cs

控件之媒体控件: Image, MediaElement
/*
* 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();
}
}
}
控件之媒体控件: Image, MediaElement