Xamarin FAQ 1-27 : 不同系統平台下，導航頁面的返回按鈕文字問題

問題

在進行跨平台應用程式開發的時候，需要面臨到使用一套UI定義，便能夠在不同作業系統下來執行；不過，由於 Xamarin.Forms 採用原生平台控制項來顯示，因此，在 Xamarin.Forms 中同樣的 UI 控制項，可能會在不同作業系統下有著不同的表現。其中，導航工具列就其中一個。導航工具列在不同作業系統下到底呈現樣貌是怎麼樣，有甚麼要特別注意的地方呢?

解答

對於 Xamarin.Forms 中的導航頁面，在各個平台下呈現與操作方式都不太一樣，我們先來看看兩個比較簡單樣貌與操作的平台，那就是 Android & UWP

• Android
  在下圖，是這個範例應用程式的首頁，由於這是個導航頁面，所以，在最上方有導航工具列。
  在 Android 平台下，第一個頁面的名稱(Title)會出現在左上方，在這個頁面中，我們實作了一個按鈕，當按下了這個按鈕，將會導航到第二個頁面。
  
  在下圖，為導航到第二個頁面的樣貌，同樣的，這個頁面的名稱(Title)會出現在左上方，不過，在頁面名稱的左邊，有個箭頭，那是回上一頁的按鈕，當您按下這個按鈕，就會回到上一個頁面，也就是上圖的首頁；當然，在 Android 平台下，您也可以使用實體回上一頁按鍵，按下這個按鍵，一樣可以回到上一頁。
  
• UWP
  在下圖，是這個範例應用程式的首頁，由於這是個導航頁面，所以，在最上方有導航工具列。
  在 UWP 平台下，第一個頁面的名稱(Title)會出現在左上方，在這個頁面中，我們實作了一個按鈕，當按下了這個按鈕，將會導航到第二個頁面。
  
  在下圖，為導航到第二個頁面的樣貌，同樣的，這個頁面的名稱(Title)會出現在左上方，然而，在頁面名稱的左邊，並沒有如同 Android 平台的回上一頁箭頭，當您要回到上一個頁面，可以透過 UWP 手機中的實體回上一頁按鍵來回到上一頁。
  
• iOS
  最為複雜的 iOS 平台，在 iOS 平台下，導航頁面的首頁如同下圖，該頁面的名稱(Title)是出現在螢幕的最上方的中間區域，，在這個頁面中，我們實作了一個按鈕，當按下了這個按鈕，將會導航到第二個頁面。
  
  預設來說，第二頁如同下圖，新頁面名稱依舊出現在螢幕最上方的中間區域，而在螢幕左上方，會如同 Android 平台，會有個回上一頁按鈕並緊接著上一頁的頁面名稱；不過，在這裡，您看到的是 < Back這樣的內容，會出現這樣是因為上一頁頁面名稱的文字過長，無法在完全顯示出來，因此，就會顯示 < Back 。
  
  像這樣的問題，可以有兩種解法，首先，就是要縮點第一個頁面名稱的長度，使其不會因為名稱文字過長，導致顯示不出來；在下圖中，我們將頁面名稱修改成為 多奇數位創意 ，僅僅六個中文字，這樣就可以在第二頁出現了首頁頁面的名稱。
  
  經過調整首頁頁面名稱長度僅有六個中文字，這樣，在第二頁面就會顯示如下圖。
  這樣做也是可能會遇到問題，那就是每支手機的螢幕解析度與尺寸規格都不盡相同，有時候六個中文字在 A 手機上可以完全顯示出來，可以在 B 裝置上可能會有無法顯示地問提。
  
  第二種作法則是比較安全的作法，那就是自行指定回上一頁按鈕文字的名稱，在這裡，我們希望第二頁的回上一頁文字要顯示 回去了，此時，您需要在第一個頁面，也就是首頁，的頁面建構式內，使用這個方法 NavigationPage.SetBackButtonTitle(this, "回去了");，便可以設定第二頁的回上一頁按鈕文字。
  

Xamarin FAQ 1-26 : 如何變更 UWP 應用程式的狀態列背景與文字顏色

問題

當您在規劃一個 Xamarin.Forms 的應用程式的時候，都會制訂一套配色規則，並且每個頁面與控制項，都會依照這套視覺設計規範，進行套版設計；可是，當您在 UWP 平台執行這個應用程式時候，卻發現到狀態列的背景與文字顏色似乎沒有地方可以修改，這該如何處理呢?

解答

首先，請在原生 UWP 專案內，加入 擴充功能 的 Windows Desktop Extensions for the UWP / Windows Mobile Extensions for the UWP 的參考到您的專案內，如果您的 UWP 應用程式只需要在 Windows 下執行，後者可以不用加入；若您的 UWP 應用程式只需要在手機上執行，前者可以不用加入。

請在原生 UWP 專案內開啟 App.xaml.cs 檔案，將底下程式碼加入到 OnLaunched 方法內。

其中，要使用 ApiInformation.IsTypePresent 來判斷是平板模式還是手機模式，接著取得 Title 列 / 狀態列的物件，將您要設定背景與文字顏色設定到這些物件內即可。

//PC 平板模式的 TitleBar 客製化程式碼
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    if (titleBar != null)
    {
        titleBar.ButtonBackgroundColor = Colors.DarkBlue;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Blue;
        titleBar.ForegroundColor = Colors.White;
    }
 }

//Mobile 模式的 Status 客製化程式碼
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{

    var statusBar = StatusBar.GetForCurrentView();
    if (statusBar != null)
    {
        statusBar.BackgroundOpacity = 1;
        statusBar.BackgroundColor = Colors.DarkBlue;
        statusBar.ForegroundColor = Colors.White;
    }
}

Xamarin 如何測載打包後的 Windows Mobile 10 檔案到手機上

當您建立了應用程式套件，將會發現有這樣 .appxbundle 檔案產生，此時，要如何將這個應用程式套件安裝到 Windows 10 Mobile 的手機上呢?

1. 打開手機，進入到所有 設定頁面 > 更新與安全性 > 開發人員專用 > 開發人員模式
2. 回到電腦上，請建立該專案的 Windows 10 Mobile 應用程式套件
3. 請在手機上使用檔案總管程式，在手機上建立一個 Apps 的資料夾
4. 在電腦上，請將產生好的安裝套件(會在 AppPackages目錄下)的整個目錄(目錄裡面會有包含 .appxbundle 檔案)複製到手機內(Apps目錄下)
5. 回到手機，使用檔案總管，點選剛剛複製的目錄下，找到產生的 .cer 檔案，點選他，進行憑證
6. 在手機上，使用檔案總管，切換到 Dependencies > ARM 目錄下，點選Microsoft.NET.CoreRuntime.1.0.appx & Microsoft.VCLibs.ARM.Debug.14.00.appx 這兩個檔案，進行安裝。
   +
7. 回到手機，使用檔案總管，點選剛剛複製的目錄下，找到產生的 .appxbundle 檔案，進行安裝該App

Windows UWP 客製照相功能

由於最近專案會需要用到在 Windows Mobile 10 手機上，針對鏡頭可以進行各項拍照功能微調，因此，根據研究與相關資料，將手機拍照功能整理出這份文件。

關於應用程式生命週期管理

1. 在進入到特定頁面，該頁面要顯示手機鏡頭的預覽畫面的時候，需要根據Windows UWP 的應用程式生命週期，訂閱 Application.Current.Suspending & Application.Current.Resuming 這兩個事件，在前者，您需要將拍照鏡頭的資源予以釋放，而在後者，需要取得拍照功能的資源。
2. 您可以使用 DeviceInformation.FindAllAsync(DeviceClass.VideoCapture)方法，取得裝置上的所有鏡頭裝置，並且針對前鏡頭或者後鏡頭進行處理。
3. 建立 MediaCapture類別物件與MediaCaptureInitializationSettings類別物件，準備根據不同的條件，調整鏡頭拍照的參數。例如，可以使用這個方法，await _mediaCapture.InitializeAsync(settings);進行拍照裝置的初始化。
4. 關於 MediaCapture類別說明文件與MediaCaptureInitializationSettings類別說明文件，可以分別參考 MediaCapture & MediaCaptureInitializationSettings
5. 透過 MediaCapture.VideoDeviceController 取得的物件，其類型為 VideoDeviceController，可用於控制拍照裝置的各種行為，參考文件為 VideoDeviceController
   
   • BacklightCompensation
     提供取得和設定背光補償之方法, 如果值為 1，則啟用背光補償。如果值為 0，則停用背光補償
   • Brightness
     提供用於獲取和設置明亮度方法
   • Contrast
     提供用於獲取和設置對比度方法
   • Exposure
     提供用於獲取和設置曝光時間的方法
   • FlashControl
     拍照設備的閃光控制。FlashControl類別 具有下列類型的成員 Auto / Enabled / PowerPercent / PowerSupported / RedEyeReduction / RedEyeReductionSupported / Supported
   • Focus
     提供方法來獲取和設置焦點
   • Hue
     Gets or sets the camera’s hue setting
   • IsoSpeedControl
     Gets the ISO film speed control for this video device
   • LowLagPhoto
     Gets the low shutter lag photo control for this video device
   • LowLagPhotoSequence
     Gets the low shutter lag photo sequence control for this video device
   • Pan
     獲取或設置相機的Pan
   • PrimaryUse
     獲取或設置該主要使用設備
   • RegionsOfInterestControl
     此視頻的設備獲取利益控制的區域
   • Roll
     獲取或設置相機的膠卷(設置
   • SceneModeControl
     此視頻的設備獲取場景模式控制
   • Tilt
     獲取或設置相機的移軸模式設置
   • TorchControl
     獲取此視頻設備的亮燈手電筒模式控制
   • WhiteBalance
     獲取或設置在相機的白平衡
   • WhiteBalanceControl
     獲取此視頻設備的白平衡控制
   • Zoom
     獲取和設置相機的放大與縮小

其他參考

Universal Windows 10 SDK: Adding GPS to the Camera Sample