Windows 8 Store Apps學習(29) 圖片處理

介紹

重新想象 Windows 8 Store Apps 之 圖片處理

顯示圖片

圖片的 9 切片

WriteableBitmap

擷取和修改圖片屬性

對圖片檔案做“縮放/旋轉/編碼”操作，並儲存 操作後的結果

樣本

1、示範最基礎的圖片顯示

Image/Display.xaml

<Page    x:Class="XamlDemo.Image.Display"    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="120 0 0 0" Orientation="Horizontal" VerticalAlignment="Top">                <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="ms-appx:///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 x:Name="img" Stretch="Uniform" Width="200" Height="100" />            </Border>                <Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100" Margin="20 0 0 0">                <Image x:Name="img2" Stretch="Uniform" Width="200" Height="100" />            </Border>            </StackPanel>    </Grid></Page>

Image/Display.xaml.cs

/* * 示範最基礎的圖片顯示 *  * 註： * 1、引用 package 中的圖片用：ms-appx:/// * 2、引用 ApplicationData 中的圖片： *    a) LocalFolder 對應 ms-appdata:///local/ *    b) RoamingFolder 對應 ms-appdata:///roaming/ *    c) TemporaryFolder 對應 ms-appdata:///temp/ */    using 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 指定圖片源            img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));                    // code-behind 指定圖片源            RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Logo.png", UriKind.Absolute));            IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync();            BitmapImage bitmapImage = new BitmapImage();            bitmapImage.SetSource(imageStream);            img2.Source = bitmapImage;        }    }}

2、示範圖片的 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="120 0 0 0" Orientation="Horizontal" VerticalAlignment="Top">                <!--                Image - 圖片控制項                    NineGrid - 指定9網格（相當於flash中的9切片）中的4條線，Thickness 類型                        Left - 左邊的線相對於圖片最左端的距離                        Top - 上邊的線相對於圖片最頂端的距離                        Right - 右邊的線相對於圖片最右端的距離                        Bottom - 下邊的線相對於圖片最底端的距離                                以下樣本圖片的原始大小為 16 * 16            -->                <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>    </Grid></Page>