天天看點
傳回

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

Lens 翻譯過來其實就是濾鏡透鏡的意思，在Windows phone 8 中使用快門按鈕的時候可以啟動相機功能，相機的AppBar 中可以看到一個Lens按鈕。這是一種應用的全新體驗的方式，我個人就很喜歡這種方式打開相機十分友善，并且在預設相機中就可以選擇目标應用的濾鏡效果 這樣做十分有效的提升了使用者體驗，而這使用者體驗是Windows phone平台所特有的，也為更多的lens應用提供了更多的程式入口。

此文是 更新到WP8必需知道的13個特性 系列的一個更新 希望這個系列可以給 Windows Phone 8開發者帶來一些開發上的便利。

同時歡迎大家在這裡和我溝通交流或者在新浪微網誌上 @王博_Nick

下圖是啟動相機後 顯示在AppBar中的Lins 按鈕。

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8
下圖是一個使用lens的應用的體驗流程。
Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8
首先如果你的應用是要進行拍攝以及儲存照片到相冊一定要在WMAppManifest中聲明使用鏡頭和相冊媒體庫通路權限。
Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8
另外并不是選了以上兩個Item你的應用就可以顯示在Lens picker中 需要你進行鏡頭的擴充注冊 需要修改WMAppManifest檔案但是這次是要進行打開編輯加入以下代碼： 

     
  1.  <Extension ExtensionName="Camera_Capture_App"         
    2.       
  2.             ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"        
    3.       
  3.             TaskID="_default" />        
    4.

并且要緊跟在Token節點後

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

這樣在從新部署你的應用 在Lens picker中就可以看到你的應用了

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

從上圖可以看出來 隻有我的DEMO程式沒有圖示顯示看上去很不友好一定會被很多同學鄙視，當然我也是要設定一下預設選擇其中的圖示的，我們都知道WP8是支援3種分辨率的 是以在Lens picker中我們也需要三種的圖示尺寸來适應着三種分辨率

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

這裡有一個詳細的模闆說明提供下載下傳 包含PDF 和原始PSD檔案非常友好啊：Icon templates for Windows Phone 8

你這裡需要提供以上三種分辨率的圖示并且使用命名規範，并且放在 Assets檔案夾下  這樣你就可以看到你的應用在不同分辨率下 Lens picker中的Icon 這裡可以看到我偷懶就直接使用的SDK的圖示但是 效果已經有啦~

這裡我在啰嗦一句 如果你希望做出以下這種可以适應系統的顔色變化的效果 就用PNG透明圖檔即可。

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

點選Lens按鈕後會出現支援Lens API的所有應用清單 點選清單中的某一個應用圖示後會通過Deep Link的形式跳轉（打開）至目标應用。處理這種Deep Link的方法請參考 windows phone 8 中的應用間通信 也可以參考MSDN ：http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj662936(v=vs.105).aspx

相信一般的提供濾鏡的應用都提供了 圖檔編輯的功能，各種效果 特效過後讓照片顯示的光鮮靓麗，當然在照片庫中可以使用一個入口連接配接将照片送入一個 lens 應用中去進行編輯

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

從上圖中可以看到這張圖檔是從一個LensAPP儲存的并且可以使用該App打開這張圖檔 下面我介紹一下如何實作此功能

首先你的圖檔是通過你的LensAPP儲存的，之後會就在相app bar 中的item中就會直接出現Open Link

     
  1.  MediaLibrary library = new MediaLibrary();        
    2.           
  2.                  string lName = GeneratePhotoName();        
    3.               
  3.                  var myStore = IsolatedStorageFile.GetUserStoreForApplication();        
    4.               
  4.                  if (myStore.FileExists(lName))        
    5.       
  5.                  {        
    6.       
  6.                      MessageBox.Show("圖檔已經存在");        
    7.       
  7.                  }        
    8.       
  8.                  else        
    9.       
  9.                  {        
    10.       
  10.                      Picture newPicture = this.mediaLibrary.SavePictureToCameraRoll(lName, e.ChosenPhoto);        
    11.           
  11.                      MessageBox.Show("儲存成功！", "提示", MessageBoxButton.OK);        
    12.
Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

 聲明媒體拓展功能也需要在WMAppManifest 檔案中注冊聲明

     
  1.  <Extension ExtensionName="Photos_Rich_Media_Edit"         
    2.       
  2.             ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}"         
    3.       
  3.             TaskID="_default" />        
    4.

同樣也是需要在緊跟Token節點 在Extension中加入此節點

Windows Phone 8 鏡頭應用 - Lenses for Windows Phone 8

從open link中拿到圖檔的方法 也很簡單的 利用的就是應用間Share檔案的方法，

     
  1.  protected override void OnNavigatedTo(NavigationEventArgs e)        
    2.       
  2.  {        
    3.       
  3.      // Get a dictionary of query string keys and values.        
    4.       
  4.      IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;        
    5.           
  5.      // Ensure that there is at least one key in the query string, and check whether the "token" key is present.        
    6.       
  6.      if (queryStrings.ContainsKey("token"))        
    7.       
  7.      {        
    8.       
  8.          // Retrieve the photo from the media library using the token passed to the app.        
    9.       
  9.          MediaLibrary library = new MediaLibrary();        
    10.       
  10.          Picture photoFromLibrary = library.GetPictureFromToken(queryStrings["token"]);        
    11.           
  11.          // Create a BitmapImage object and add set it as the p_w_picpath control source.        
    12.       
  12.          // To retrieve a full-resolution p_w_picpath, use the GetImage() method instead.        
    13.       
  13.          BitmapImage bitmapFromPhoto = new BitmapImage();        
    14.       
  14.          bitmapFromPhoto.SetSource(photoFromLibrary.GetPreviewImage());        
    15.       
  15.          p_w_picpath1.Source = bitmapFromPhoto;        
    16.           
  16.      }        
    17.       
  17.  }        
    18.

deep link的方法之前已經介紹過了相信大家已經不想再聽我啰嗦了 再次給出參考連接配接吧

移動開發 Windows Phone 8
上一篇: Windows Phone 7 Tips (7)
下一篇: 一起學Windows Phone 7開發(十二.Push Notification)

繼續閱讀