背水一戰 Windows 10 (59) - 控制項（媒體類）: Image, MediaElement

背水一戰 Windows 10 之控制項（媒體類）: 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
[源碼下載]