Windows 8 Store Apps Learning (29) Image processing

Introduced

Re-imagine the Windows 8 Store Apps image processing

Show pictures

9 slices of a picture

WriteableBitmap

Get and modify picture properties

Make a "zoom/rotate/encode" operation on the picture file and save the results after the operation

Example

1, the demonstration of the most basic picture display

Image/display.xaml

<page x:class= "XamlDemo.Image.Display" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" x mlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "Using:XamlDemo.Image" 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= "0 0 0" orientation= "H Orizontal "verticalalignment=" Top "> <border borderbrush=" Red "borderthickness=" 1 "width=" Heigh " t= "margin= 0 0 0" > <image source= "/assets/logo.png" stretch= "uniform" width= "height=" 10 0 "/> </Border> <border borderbrush=" Red "borderthickness=" 1 "width=" "height= "margin=" "0 0 0" > <image source= "ms-appx:///assets/logo.png" stretch= "uniform" width= "he"
            Ight= "/>"</Border> <border borderbrush= "Red" borderthickness= "1" width= "height=" 20 0 0 
    
            0 "> <image x:name=" img "stretch=" Uniform "width=" "height=" "/> </Border>
                <border borderbrush= "Red" borderthickness= "1" width= "" height= "0" margin= "0 0" >
    
        <image x:name= "Img2" stretch= "Uniform" "width=" height= ""/> </Border> </StackPanel> </Grid> </Page>

Image/display.xaml.cs

* * Demo The most basic picture display * * Note: * 1, refer to the picture in package: ms-appx:///* 2, refer to the picture in ApplicationData: * a) Localfolder corresponding Ms-app data:///local/* b) roamingfolder corresponds to ms-appdata:///roaming/* c) temporaryfolder corresponding ms-appdata:///temp//u
Sing System;
Using Windows.Storage.Streams;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Media.Imaging;
    
Using Windows.UI.Xaml.Navigation;
            Namespace Xamldemo.image {public sealed partial class Display:page {public Display () { This.
        InitializeComponent (); } protected async override void Onnavigatedto (NavigationEventArgs e) {//Code-behind specify diagram Chip source IMG.
    
    
            Source = new BitmapImage (New Uri ("Ms-appx:///assets/logo.png", Urikind.absolute)); Code-behind Specify the picture source randomaccessstreamreference imagestreamref = Randomaccessstreamreference.createfromuri (NE
            W Uri ("Ms-appx:///assets/logo.png", Urikind.absolute)); IrandOmaccessstream ImageStream = await imagestreamref.openreadasync ();
            BitmapImage bitmapimage = new BitmapImage ();
            Bitmapimage.setsource (ImageStream); Img2.
        Source = BitmapImage; }
    }
}

2, the demonstration picture Ninegrid

Image/ninegrid.xaml

<page x:class= "XamlDemo.Image.NineGrid" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "Using:XamlDemo.Image" 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=" 0 0 0 "Or
                    ientation= "Horizontal" verticalalignment= "Top" > <!--image-picture control
                        Ninegrid-Specifies 4 lines in the 9 grid (equivalent to 9 slices in flash), Thickness type left-the distance from the leftmost line of the picture to the left side
                
                Top-the line above the top of the picture right-the line on the right-hand side of the picture at the far right Bottom-the distance from the bottom of the line relative to the end of the picture The original size of the following sample picture is--> <image source= "/assets/ninegri D/demo.png "width=" height= "/&G"T <!--to prevent the border from being enlarged or narrowed by specifying 9 slices--> <image source= "/assets/ninegrid/demo.png" width= "height=" Ninegrid = "1 1 1 1" margin= "0 0 0"/> </StackPanel> </Grid> </Page>