背水一战 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
[源码下载]
背水一战 Windows 10 (59) - 控件(媒体类): Image, MediaElement的更多相关文章
- 背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板
[源码下载] 背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板 作者:webabcd 介绍背水一战 Windows 10 之 控件( ...
- 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑
[源码下载] 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) InkCanv ...
- 背水一战 Windows 10 (62) - 控件(媒体类): InkCanvas 保存和加载, 手写识别
[源码下载] 背水一战 Windows 10 (62) - 控件(媒体类): InkCanvas 保存和加载, 手写识别 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) ...
- 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog
[源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
[源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...
- 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout
[源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...
- 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing
[源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...
- 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch
[源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...
- 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox
[源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...
随机推荐
- 火狐 debug 看向后台传递的信息
自己做前端和后台开发,最重要的是数据交换,知道了数据是怎么传的,传到哪里,传的什么,就能很容易的开发. 火狐看传递参数的信息在debug里面,详情如图: 我的后台的C# 的webservice,接收起 ...
- OpenSSH配置与基本使用
SSH访问远程 SSH常见分类: telnet-远程登录协议,23/TCP 明文认证.明文传输(不安全) ssh(Secure SHell)-应用层协议,22/TCP 通讯和认证过程加密.主机认证 用 ...
- spring学习 十一 AspectJ-based的通知入门 不带参数的通知
AspectJ-Based方式的AOP,通知类不需要实现任何接口,且前置通知,后置通知,环绕通知,异常通知都可以写在一个类中,下面先实现一个简单的,不带参数的通知. 第一步定义通知类,通知类中的通知( ...
- 494. Target Sum - Unsolved
https://leetcode.com/problems/target-sum/#/description You are given a list of non-negative integers ...
- 2018.12.15 bzoj3998: [TJOI2015]弦论(后缀自动机)
传送门 后缀自动机基础题. 求第kkk小的子串(有可能要求本质不同) 直接建出samsamsam,然后给每个状态赋值之后在上面贪心选最小的(过程可以类比主席树/平衡树的查询操作)即可. 代码: #in ...
- springboot 程序发布到tomcat运行
springboot 一般使用jar 的方式运行,我们需要将程序放到tomcat环境下运行. 步骤如下: 1.修改pom文件. 排除内置的tomcat <dependency> <g ...
- 第20章:MongoDB-聚合操作--聚合管道--$unwind
①$unwind 在查询数据的时候经常会返回数组信息,但是数组并不方便信息的浏览,所以提供有“$unwind”可以将数组数据变为独立的字符串内容. 将文档中数组类型的字段拆分成多条,每条文档包含数组中 ...
- IDEA有用插件总结
IDEA要查看哪些插件起效了可以通过.IntellijIdeaXxx/config/plugins/availables.xml里查看: 一:Lombok插件,里面很多注解都可以省略许多冗余的代码: ...
- DDR中常用概念
一.DDR中的基本术语 (2)逻辑Bank SDRAM的内部是一个存储阵列,类似于一张表格.和表格的检索原理一样,先指定一个行(Row),再指定一个列(Column),就可以准确地找到所需要的单元格, ...
- linux ps查进程 kill关闭进程
原文链接:http://blog.sina.com.cn/s/blog_53855ace0100ded4.html 首先,我们需要使用linux下另外一个ps命令查找与进程相关的PID号:ps aux ...