MyException - 我的异常网
当前位置:我的异常网» Windows » 破釜沉舟 Windows 10 (59)

破釜沉舟 Windows 10 (59)

www.MyException.Cn  网友分享于:2013-09-17  浏览:0次
背水一战 Windows 10 (59)

[源码下载]


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

文章评论

不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
 程序员的样子
程序员的样子
程序员的鄙视链
程序员的鄙视链
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Java程序员必看电影
Java程序员必看电影
程序员必看的十大电影
程序员必看的十大电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
10个调试和排错的小建议
10个调试和排错的小建议
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
编程语言是女人
编程语言是女人
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员都该阅读的书
程序员都该阅读的书
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
我是如何打败拖延症的
我是如何打败拖延症的
我的丈夫是个程序员
我的丈夫是个程序员
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
鲜为人知的编程真相
鲜为人知的编程真相
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何成为一名黑客
如何成为一名黑客
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
漫画:程序员的工作
漫画:程序员的工作
每天工作4小时的程序员
每天工作4小时的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
老程序员的下场
老程序员的下场
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有