首页 / 软件开发 / .NET编程技术 / Windows 8 Store Apps学习（6） 媒体控件

Windows 8 Store Apps学习（6） 媒体控件2013-12-04 博客园 王磊Image, MediaElement

介绍

重新想象 Windows 8 Store Apps 之媒体控件

Image - 图片控件

MediaElement - 播放视频或音频的控件

示例

1、Image 的 Demo

ImageDemo.xaml

<Pagex: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>