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

Posted 2020-10-07

原文:背水一战 Windows 10 (59) - 控件（媒体类）: Image, MediaElement

[源码下载]

背水一战 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
[源码下载]