UWP&WP8.1 基礎控件——Image

Image是UWP和WP8.1中系統自帶的圖片展示器。

具有較強的性能，使用也是非常的簡單。

使用方式分為在XAML中，在C#代碼中。

 

XAML中：

在XAML中使用方式非常簡單。

常用XAML

      Source ：圖片的地址

      X:Name：當前控件的名稱。

      Tag：攜帶標簽內容

      Tapped ：單擊當前控件時

      

 

C# 代碼中

            //實例化一個Image
            Image my_img = new Image();
         
           

在C#中新建一個IMAGE則是非常簡單的。新建IAMGE之后添加到面板空間就可以了。

   //添加
            this.Content = my_img;

在c#中Image使用較難的時Source的添加。

 

 image的Source的類型是ImageSouce類型。 

 

第一種方法是直接添加到Source，第二種是使用BItmapImage添加。

 

先說第一種直接添加

            //實例化一個Image
            Image my_img = new Image();

            //控制透明度1~0
            my_img.Opacity = 0.5;
           
            //使用BitMaPImage
            my_img.Source = new BitmapImage(new Uri("ms-appx:///A23.jpg", UriKind.RelativeOrAbsolute));

            //添加
            this.Content = my_img;

 

其實這種方法也是使用BItMAPiMAGE 的，但是相對簡單，NEW一下使用uri的絕對值就可以了。

 

這種方法在當前程序包內有需要使用的圖片時可以使用。

 

 

第二種BitmapImage

 

這種方法需要從文件方式打開圖片的時候使用。

 

          //Openfile 代表你要打開的文件。 
            var iFile =await   StorageFile.GetFileFromPathAsync("OpenFile");
            //實例化BitmapImage
            BitmapImage bit = new BitmapImage();
            //異步加載源，異步打開文件的隨機訪問流
            await bit.SetSourceAsync(await iFile.OpenAsync(FileAccessMode.ReadWrite));

              //實例化一個Image
            Image my_img = new Image();

            //控制透明度1~0
            my_img.Opacity = 0.5;

            //使用BitMaPImage加載
            my_img.Source = bit;

            //添加
            this.Content = my_img;

 

基礎的Image基本這么多了。

 

 

 

進階Image適用方法。

 

問：在有屏幕觸摸的情況下如何放大或者縮小圖片？

答：我會兩種方式。

一種是將圖片加載到WebIView中，使用WEBview 自帶的可以隨意放大縮小圖片。不過這其中涉及到HTML語言的使用。

而且使用WEBview加載本地圖片也有周多不變。考慮到加載圖片可以使用http://www.cnblogs.com/T-ARF/p/6430787.html這篇文章中WEBVIEW使用附加屬性的方式來加載圖片。會簡單許多。

 

第二種是使用scrollViewer

這個是直接在XAML使用

       <ScrollViewer ZoomMode="Enabled" >
            <Image Source="搜狗截圖17年04月16日2032_1.bmp"/>
        </ScrollViewer>

 

效果 使用模擬器模擬觸摸