Windows 8 Store Apps學習(6) 媒體控件

Image, MediaElement

介紹

重新想象 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

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar