Windows 8 Store Apps Learning (6) Media controls

Image, MediaElement

Introduced

Re-imagine the Windows 8 Store Apps Media Control

Image-Picture control

MediaElement-controls that play video or audio

Example

1, the Image of the 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-picture control Stretch-stretching method (Windows.ui . Xaml.Media.Stretch enumeration) Fill-fills the container, does not retain the aspect ratio none-does not do any processing, if the picture is bigger than the container, then more   
                   
                The parts are trimmed uniform--equal than scaling to the container (default) UniformToFill-filled with the container, and retains the aspect ratio, the extra portion is trimmed The original size of the following sample picture is--> <stackpanel orientation=   
            "Horizontal" >    <border borderbrush= "Red" borderthickness= "1" width= "height=" > <image source=   
       
                "/assets/logo.png" stretch= "Fill" width= "height="/> </Border>   
                    <border borderbrush= "Red" borderthickness= "1" width= "" height= "0" margin= "0 0" >   
       
                <image source= "/assets/logo.png" stretch= "None" width= "a" height= ""/> </Border>   
                    <border borderbrush= "Red" borderthickness= "1" width= "" height= "0" margin= "0 0" >   
                <image source= "/assets/logo.png" stretch= "uniform" width= "a" height= " </Border> <border borderbrush= "Red" borderthickness= "1" width= "height=" Ma rgin= "0 0 0" > <!--background set Image source--> <image name= "MyImage" S Tretch= "UniformToFill" WIdth= "height="/> </Border> </StackPanel> <!--image-picture control Ninegrid-Specifies 4 lines in the 9 grid (equivalent to 9 slices in flash), T   
                        Hickness type left-the distance from the leftmost line of the picture to the top-most of the line relative to the topmost edge of the picture   
                   
                Right-the distance from the rightmost line to the right of the picture Bottom-the distance below the bottom of the line relative to the end of the picture The original size of the following sample picture is--> <stackpanel orientation= "Horizontal" margin= "0 50 0 0" &   
                Gt <image source= "/assets/ninegrid/demo.png" width= "height="/> <!--to prevent borders by specifying 9 slices Magnified or narrowed--> <image source= "/assets/ninegrid/demo.png" width= "height=" ninegrid= "1 1 1 1" Marg in= "0 0 0"/> </StackPanel> </StackPanel> </Grid> </page&gt ;