Windows 8 Store Apps學習(6) 媒體控制項

Image, MediaElement

介紹

重新想象 Windows 8 Store Apps 之媒體控制項

Image - 圖片控制項

MediaElement - 播放視頻或音訊控制項

樣本

1、Image 的 Demo

ImageDemo.xaml

<Page    x: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>