2017/01/29

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

問題

延續 Xamarin FAQ 1-28 問題，發現到在某些情況下，應用程式在 iOS 平台下執行的時候，會造成導航頁面的頁面說明文字無法置中對齊，而被擠向右方，這是甚麼情況？

解答

會發現這個問題是之前都是使用 iPhone 6 Plus iOS 9.3 Simulator 來進行測試，偶而發現到，當使用了 iPhone 6s iOS 9.3 這個 Simulator 來測試的時候，發現到這樣的問題。

下面四張圖片，分別為從首頁導航到第二頁的頁面截圖，從前面三個畫面截圖可以很清楚的看出，這個頁面的標題文字 這是第二頁 明顯的被往右推過去了，這將會造成使用者覺得這樣的設計十分奇怪；不過，我猜想這應該是 iOS 本身的一個問題，而不是 Xamarin.Forms 這裡的問題。最後一張圖則是我們想要的樣貌，這個頁面的標題是置中的，而且，上一頁的頁面標題則是適當的被截掉。

因此，我個人認為比較好的解決方案，還是要自行定義出回上一頁按鈕名稱，而不需要使用上一頁面的名稱來做為回上一頁按鈕的名稱。

這裡提供另外一個不需要使用 Call behind 的方法，那就是可以在 XAML 頁面中來定義這個回上一頁按鈕的名稱，不過，特別重要的是：回上一頁按鈕名稱，必須定義在上一頁的XAML中

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFNavigationTitle.Views.MainPage"
             NavigationPage.BackButtonTitle="回去了"
             Title="{Binding PageTitle}">

    <StackLayout HorizontalOptions="Fill" VerticalOptions="Start"
                 Margin="20,20,20,20"
                 >
        <Label Text="{Binding Title}"
               Margin="0,0,0,30"/>

        <Label Text="這個頁面名稱" />
        <Entry Text="{Binding PageTitle}" />
        <Button Text="測試回上一頁文字" Command="{Binding 測試回上一頁文字Command}" />
    </StackLayout>
</ContentPage>

Xamarin.Forms 相關練習專案 Part I

AttProp
如何在 Xamarin.Forms 開發 XAML 用的 Attached Property
這個附加屬性，只能夠套用在 Entry 控制項上，會根據所指定的名稱，自動加上浮水印文字
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/AttProp
BindProp
客製控制項並且加入一個可綁定屬性，以便擴充新控制項的能力
繼承原有控制項，並在新的控制項中，加入一個新的可綁定屬性，使得新的控制項可以具有另外一種表現能力
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/BindProp
DynaStat
資源字典的靜態與動態資源項目的使用範例
在這個範例中，將會展示如何在 Xamarin.Forms 中使用靜態與動態資源，並且如何在執行時期來變更動態資源的用法，也會展示出資源項目的繼承關係與變化。另外，也會練習使用 .NET 的靜態屬性作為 XAML 屬性的設定值。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/DynaStat
ElementTree
資源樣式的定義與使用說明
說明如何使用資源樣式的用法，並且了解到階層式的資源樣式用法與覆蓋方式
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/ElementTree
ImageCircleLab
顯示一有圓形遮罩修飾過的個圖片
要讓圖片被圓形遮罩給修飾，您需要定義額外命名空間，指向 ImageCircle 這套件的組件，就可以將有圓形遮罩的圖片，顯示在螢幕上
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/ImageCircleLab
MergedDict
資料字典合併的用法
我們可以將資料字典定義在另外一個 .xaml 檔案中，並且在您要顯示的頁面中，將這個資料字典定義的內容，合併進來使用，是個相當實用的功能，因為，您可以將常用的資料字典資源整理在一個地方，方便管理。您將會學習到如何定義資源項目、明確樣式、隱含樣式、控制項自己宣告資源字典、合併資源字典、宣告樣式但繼承某個已宣告的樣式、樣式的繼承(合併不會跨檔案繼承)。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/MergedDict
MVVM1
開發 Xamarin.Forms 專案，不使用 MVVM 開發方式的作法
MVVM 是您要開發 Xamarin.Forms 專案時候必備的開發技能，若您不使用 MVVM 開發方式與選擇一個合適您的 MVVM 開發框架工具；那麼，當您進行專案開發的時候，將會遇到很多不方便處理的問題。
在這裡將會體驗如何使用 Code Behind 的方式來開發 Xamarin.Forms 的專案
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/MVVM1
MVVM2
不透過任何 MVVM 開發套件，自行製作 MVVM 開發方法的規範需求
若您不依賴任何 MVVM 開發框架工具，則您需要在每個 ViewModel 內來實作出 INotifyPropertyChanged (INPC) 介面，如此，當 View 中的控制項所綁定的屬性或者 ViewModel 內的屬性有異動的時候，才會根據綁定模式，自動地進行異動後的資料更新。
在這個專案中，您將需要定義一個 ViewModel 類別，並且設定頁面中的 BindingContext 屬性上。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/MVVM2
MVVM3
使用 Prism 開發框架工具，進行 Xamarin.Forms + MVVM 專案開發
在這個練習專案中，我們將會直接使用 Prism 這個 MVVM Framework；Prism 提供了相當多友善的 MVVM 開發解決方案，讓您在進行 Xamarin.Forms 專案開發的時候，可以，更加快速與簡潔的做出好用的應用程式。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/MVVM3
PickerLab
在 Xamarin.Forms 中使用具有可綁定功能的 Picker 控制項
在 Xamarin.Forms 中的 Picker 控制項，是沒有提供可綁定資料與命令功能，這對於採用 MVVM 開發方式的開發者而言，是相當的不方便(不過，在2017第二季之後，Xamarin.Forms 將會提供這項功能)。
不過，在此之前，若想要使用這樣的功能，您可以使用本範例中提供的 BindablePicker 來做這樣功能，您也可以順便學習與了解，在 Xamarin.Forms 中，要如何自己客製化一個控制項，做出屬於您自己的 XAML 控制項。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/PickerLab
sampleListView
練習如何使用 ListView 控制項
學習 Xamarin.Forms 的 ListView 使用方法：產生一個 ViewModel類別，將 ViewModel 綁訂到 ListView 上、定義每筆紀錄要顯示的視覺內容
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/sampleListView
XFAlert
學習如何使用 Xamarin.Forms 提供的對話窗功能
您可以在 Code Behind 程式碼中，直接使用 DisplayAlert / DisplayActionSheet 對話窗，這些對話窗將會在每個平台，以原生對話窗的樣貌出現(因為，就是呼叫原生平台的對話窗 API)。
另外，我們也將學習如何在 ViewModel 中使用 Prism 提供的 IPageDialogService 介面的 DisplayAlertAsync / DisplayActionSheetAsync 對話窗功能；在這裡，您需要在 ViewModel 的建構式中，注入 IPageDialogService 實作物件。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFAlert
XFALM
Xamarin.Forms 內提供的頁面應用程式生命週期練習
在這裡，我們將會學習兩個事件 OnAppearing / OnDisappearing 的使用方式，以及，這兩個事件將會於甚麼時候被執行。透過了 Visual Studio 輸出視窗，您可以看到這些事件被呼叫的過程與順序。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFALM
XFAnimation
學習如何在 Xamarin.Forms 中，使用動畫效果功能
在這裡，您將學習如何使用每個控制項都會具有的動畫處理方法，由於，這些動畫處理方法都是依附在每個控制項中，因此，我們需要在 Code Behind 來撰寫相關動畫處理邏輯，若您想要把這些 Code Behind 程式碼移除，直接在 ViewModel 中呼叫，您可以客製化一個 Behavior。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFAnimation
XFAttBehavior
說明了如何製作出一個 Attached Behaviors
Xamarin.Forms 內的 Behaviors ，讓您可以將一些功能加入到 Xamarin.Forms所提供的控制項中，但是卻不需要繼承原有控制項類別，做出一個客製化控制項；透過了 Attached Behavior ，就可以任您的控制項，擁有不同的行為表現；另外， Behaviors 可以讓您原先在 Code Behind 內的處理邏輯，隱藏起來，透過 XAML 語法，進而啟用這些功能
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFAttBehavior
XFCarouselView
練習使用旋轉木馬控制項
這個練習中，將會學習如何在 Xamarin.Forms 中使用旋轉木馬控制項。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFCarouselView
XFEllipse
在 Xamarin.Forms 應用程式，可以產生橢圓或圓形的圖形
我們將會來練習一個 Xamarin.Forms 內沒有的一個控制項，那就是要顯示圓形或者橢圓的形狀；在這裡將會繼承 View 控制項，產生出一個 EllipseView 新控制項，並且使用 Renderer 核心功能，在 Android / iOS / UWP 內，使用原生 API 來產生出這個圓形或橢圓形的形狀。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFEllipse
XFFirst
使用 Xamarin.Forms 的專案樣板，建立您第一個 Xamarin.Forms 專案
在這個練習中，只會使用 Xamarin.Forms 的預設專案樣板，建立您第一個 Xamarin.Forms 的專案，並不會在 Xaml / Code Behind / ViewModel 中做任何設計。這個練習的目的，是在於學會如何建立一個 Xamarin.Forms 專案，並且可以成功在不同平台的模擬器下來執行。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/
XFFlip
使用 CarouselViewControl 來做出有旋轉木馬效果的控制項
這裡有另外一個控制項 CarouselViewControl，非 Xamarin 官方提供的外加控制項，一樣可以做到有旋轉木馬的功能。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/
XFFontAwesome
如何在 Xamarin.Forms 使用與顯示 Font Awesome
這是一個綜合應用練習在這個練習中，您將會學習到
如何將 Font Awesome 字體檔案加入到個原生專案內，並且做出相關設定，讓原生系統可以使用這個字體檔案。
建置一個自訂控制項，用來可以顯示 Font Awesome 的字體圖示
學習使用 Renderer 技術，改變預設控制項在不同平台顯示的樣貌與內容
在 XAML 中指定要顯示 Font Awesome 文字方式
練習一個應用程式啟動畫面，進行系統資料讀取與更新的長時間工作，當工作結束後，可以切換到主換面上
了解非同步工作的開發與設計方式和注意事項
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFFontAwesome
XFGenBarcode
我們可以透過 NuGet 套件，讓應用程式顯示出各種不同條碼的圖片
在這裡，我們學習如何在 XAML 中，使用 ZXingBarcodeImageView 控制項，顯示出一維 / 二維條碼的圖片在螢幕上；要指定各種不同條碼格式，可以使用 BarcodeFormat 屬性。
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFGenBarcode
XFHListView
Xamarin.Forms 動態產生檢視項目的 WrapView
使用 FlowListView，顯示出 GridView 這樣效果的控制項，這個控制項相當的實用；這裡將會顯示文字內容
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFHListView
XFHorListView
水平捲動的 ListView
在這裡，您需要加入一個命名空間，參考到我們定義的水平式 ListView 客製控制項
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFHorListView
XFImage
Xamarin.Forms 的 Image 相關使用方式與注意事項
這個範例專案，讓您學習到 Xamarin.Forms 的 Image 相關使用方式與注意事項
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFImage
XFImgZoom
Xamarin.Forms Behavior 的製作與練習
這個範例將會展示如何將放大等手勢操作功能，把原先需要在 Code Behind 寫的程式碼，包裝到 Xamarin.Forms Behaviors，並且在 XAML中來直接套用
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFImgZoom
XFIValueConverter
練習建立一個數值轉換器
在這個練習中，建立一個數值轉換器，接收一個字串文字，根據對應關係，會轉換成為一個顏色物件，若對應不起來，則回傳黑色，若不透過數值轉換器，您可以在 ViewModel 內定義一個 Color 屬性，在 ViewModel 內自行處理這些轉換邏輯
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFIValueConverter
XFLayoutOptions
練習各種不同 LayoutOptions 所表現出來的特性
這個專案，將練習 LayoutOptions 的六個列舉值的特性
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFLayoutOptions
XFLifeCycle
練習 Xamarin.Forms 的應用程式生命週期
這個專案練習將會練習 Xamarin.Forms 的應用程式生命週期，您需要執行這個專案，觀察 Visual Studio 內的輸出視窗，觀察輸出內容，請試著將應用程式切換為背景模式，並且再度切換成為前景
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFLifeCycle
XFListView
ListView 的各種不同用法展示
這個範例展示出各種在 ListView 遇到的情境與問題解法
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFListView
XFMoreWrapLayout
客製一個 WrapView 控制項，並做到動態收合效果
這裡使用了 WrapView 與 RoundedBoxView 產生出具有折合效果的捲動清單
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFMoreWrapLayout
XFOnPlatform
如何在 XAML 與 C# 內，使用 OnPlatform
在這個範例，練習如何使用 OnPlatform 來設定不同平台的XAML控制項有著不同屬性
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFOnPlatform
XFPicker
如何使用 Xamarin.Forms 內建的 Picker 控制項
這裡將展示如何使用 Xamarin.Forms 內建的 Picker 控制項，您可以在 Xamarin中，定義靜態的可選擇項目，請使用 x:String 來指定每個紀錄內容
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFPicker
XFPmLM
Prism 的容器各種使用方式
這個專案將會展示如何使用 Prism 的容器各種使用方式，包含了如何註冊、解析一個要注入的物件與藥注入物件生命週期管理
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFPmLM
XFPrismALM
學習 Prism 與 Xamarin.Forms 的頁面事件的執行先後順序之差異
這個專案將會用來測試 Code Behind 的 OnAppearing / OnDisappearing 和 Prism 的 INavigationAware 之 OnNavigatedFro / OnNavigatedTo 事件，這些事件，在不同情況下、在不同平台下的執行順序，您將會看到不同平台下執行順序差異
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFPrismALM
XFRendCtrl
客製專屬平台的控制項視覺
會透過 Xamarin.Forms 提供的相依服務的 ExportRenderer 方法，會將自訂控制項使用每個專屬平台的額外程式碼進行修正，使這些平台上看到的控制項，儘可能一樣。在這裡，也會練習如何使用導航工具列的按鈕製作方式
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFRendCtrl
XFRoundedBoxView
展示如何使用可以繪製圓角的控制項與其用法
我們將需要自訂一個控制項，並且在每個平台使用 Renderer 來產生這個具有圓角的矩形
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFRoundedBoxView
XFScan
這個專案展示如何進行一維或者二維條碼掃描
不使用 ViewModel ，使用 Code Behind 來展示
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFScan
XFSkiaSharp
如何在 Xamarin.Forms 使用類似 Canvas 畫布功能
SKCanvasView 控制項是一個具有畫布功能的控制項，可以讓您在這個控制項上進行各種繪圖動作
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFSkiaSharp
XFTransforms
學會如何使用繼承 VisualElement 之任何控制項都會擁有的變換 Transforms 功能
這個專案將會讓您操作 VisualElement 上的一些轉換行為，例如：平移、縮放、旋轉
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFTransforms
XFTrigger
練習 Xamarin.Forms 提供的四種觸發功能屬性觸發 / 資料觸發 / 事件觸發 / 多重觸發
Trigger 可以讓您在 XAML 中，定義各種不同條件，當條件滿足之後，將會做出各種反應
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFTrigger
XFUserControl
如何在 Xamarin.Forms 製作與使用一個使用者控制項 (User Control)
這是一個使用者控制項的練習範例，在這裡，您定義另外一個 XAML 檔案，在這裡宣告一些控制項與版面配置，使其成為一個組合式的控制項，在這裡，不需要繼承任何類別，就可以組合成一個您經常使用的控制項
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFUserControl
XFWrapLayout
自己客製一個 WrapView 控制項，並在 Xamarin.Forms 來使用
WrapView 是 Xamarin.Forms 所欠缺的，在這裡將會練習如何使用 WrapView 這個自訂控制項
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFWrapLayout
XFxArray
在 ListView 中，直接使用靜態的集合資料，無須透過 ViewModel來指定
如何使用 x:Array 來指定一個靜態資料的 ListView 集合資料來源
https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFxArray

2017/01/28

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, "回去了");，便可以設定第二頁的回上一頁按鈕文字。

2017/01/27

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;
    }
}

2017/01/26

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

問題

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

解答

您需要在 Android 原生專案內找到這個應用程式的進入點

請開啟 MainActivity.cs 檔案，找到 MainActivity 這個類別的定義處，在 MainActivity 的上方，加入了 Theme = "@style/MyTheme.Base" 這樣的宣告，表示這個應用程式要使用這個 XML 內定義的樣式配置定義。

    [Activity(Theme = "@style/MyTheme.Base", //Indicates the theme to use for this activity
        Label = "你的應用程式名稱",
               MainLauncher = true, //Set it as boot activity
        ScreenOrientation = ScreenOrientation.Portrait)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        ...
    }

接著，請在原生 Android 專案內，找到 Resources > values > styles.xml 檔案，將這個檔案置換成為底下內容，在這裡，您就會看到了 MyTheme.Base 的定義。

<resources>
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="colorAccent">@color/accent</item>
    <!--<item name="android:windowBackground">@color/window_background</item>-->

    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
  </style>
</resources>

而在 MyTheme.Base 定義內，使用到許多的顏色定義，這個時候，請找到 Resources > values > colors.xml 檔案，將這個檔案置換成為底下內容，這裡就是定義 Android 應用程式狀態列的背景與文字顏色的地方。

<resources>
  <color name="primary">#223344</color>
  <color name="primaryDark">#aabbcc</color>
  <color name="accent">#998877</color>
  <color name="window_background">#168168</color>
</resources>

2017/01/25

Xamarin.Forms 多國語言應用程式設計練習課程

在這篇實作練習中，將會說明如何在 Xamarin.Forms 應用程式專案中，開發出具有多國語言文字的應用程式；也就是說，我們只需要開發一套UI/與商業處理邏輯程式碼，當這個應用程式在不同的語系下執行的時候，就會呈現出當時語系的文字。

很神奇吧，而且，實作上也不是十分複雜，因為我們將會借助於 Multilingual App Toolkit (MAT) 這套工具，幫助我們完成相關工作；至於 Multilingual App Toolkit (MAT) 這套工具的詳細使用方式，不在這個練習中做說明，如有需要的學員，可以參考 [ Multilin這個練習中做說明，如有需要的學員，可以參考 Multilingual App Toolkit (MAT) 。

底下為這個頁面的示意設計圖，請您依照這個畫面進行這個應用程式的開發與設計。

範例專案來源

您可以到這裡下載該練習的專案原始碼

https://github.com/vulcanlee/XFWorkShop/tree/master/XFLocalization

專案設計構想

在這個練習專案中，將只會有一個頁面，我們在這裡將會設計這個頁面為使用者要登入系統時候，經常會設計的內容，那就是需要使用者輸入帳號與密碼和一個登入按鈕。不過，我們並不會在檢視模型中設計任何商業邏輯，這是因為，要做出一個支援多國語言頁面，不需要使用到檢視模型，我們將僅會在頁面的 XAML 檔案中來設計。在這裡，我們將會設計支援英文、繁體中文、日文這三種語言。

另外﹐您也需要變更手機或者模擬器的語系，這樣才能夠看到當時作業系統語言的相對應文字

學習重點清單

在這個練習中，您將會學習到如何使用底下技術：

如何安裝 Multilingual App Toolkit (MAT)
如何設定與啟動 Multilingual App Toolkit (MAT)
新增 .NET 資源檔案 (.resx) 到核心 PCL 專案內
在 XAML 中存取 .NET 靜態物件的屬性值
切換行動裝置的語系

技術重點說明

事前準備工作

要練習這個專案，您需要在您的電腦中安裝 Multilingual App Toolkit (MAT) 工具

安裝 Multilingual App Toolkit (MAT)

請先關閉所有的 Visual Studio IDE 工具
開啟這個網頁，點選 English ，下載Multilingual App Toolkit (MAT) 工具

https://developer.microsoft.com/en-us/windows/develop/multilingual-app-toolkit
下載完成後，請執行剛剛下載完成的檔案，將其安裝到您的電腦上

出現歡迎畫面之後，請點選 Next 按鈕

勾選所有 CheckBox，接受使用授權內容，接著，請點選 Next 按鈕

此時，會請您選擇要安裝的類型，在這裡，我們將使用 Custom 的安裝方式，請點選 Custom 按鈕

在這裡預設為安裝所有元件，接著，請點選 Next 按鈕

請點選 Install 按鈕，準備開始進行安裝

底下為安裝過程畫面，若安裝完成後，就可以重新開啟 Visual Studio IDE

建立練習專案

首先，開啟您的 Visual Studio 2015
接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# > Prism > Prism Unity App (Xamarin.Forms)
接著，在最下方的 名稱 文字輸入盒處，輸入 XFLocalization 這個名稱，最後使用滑鼠右擊右下方的 確定 按鈕。
當出現 PRISM PROJECT WIZARD 對話窗之後，請勾選 ANDROID, iOS, UWP 這三個平台選項，並且點選 CREATE PROJECT 按鈕。
接著會看到 新的通用 Windows 專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
最後，整個新的 Xamarin.Forms 專案就建立完成了。

安裝 NuGet 套件

無

建立方案資料夾

請依照底下說明，在這個方案內的不同專案下，建立所需要的資料夾

核心 PCL 專案 (XFLocalization)

Resources

原生 Android 專案 (XFLocalization.Droid)

無

原生 iOS 專案 (XFLocalization.iOS)

無

原生 UWP 專案 (XFLocalization.UWP)

無

進行專案開發

建立資料模型

無

建立 AppResources.resx 資源檔案

請滑鼠右擊，核心 PCL 專案內的 Resources 資料夾
選擇 加入 > 新增項目
在 加入新項目 對話窗中，點選 Visual C# > 資源檔
在名稱欄位輸入 AppResources.resx

啟動 Multilingual App Toolkit (MAT) 工具

點選核心 PCL 專案名稱，也就是 XFLocalization，設定其為預設起始專案
從功能表中，點選 工具 > Multilingual App Toolkit > 樞紐分析表選取模式

最後一個中文名稱，看起來怪怪的，實際上的英文名稱為 Enable Selection
滑鼠右擊核心 PCL 專案，選擇 Multilingual App Toolkit > 加入轉譯語言
請勾選 可用語言 清單內的 中文(繁體)[zh-Hant] / 日文[ja] / 英文[en]預設值

若找不太到您要的語系名稱，可以使用右上角文字輸入盒，來進行過濾篩選

每個語系名稱後，都有奇怪的符號，請參考 MAT 說明文件
在進行上述動作之後，您的專案會變成底下結構

在這裡多出了一個資料夾，MultilingualResources，這個資料夾內將會多了兩個 .xlf 檔案

另外，在 Resources 資料夾內，也增加了兩個 .resx 檔案

對於 .resx 檔案，我們僅須要維護 AppResources.resx 檔案即可

底下為執行使用 MAT 前的專案結構

建立多國語言文字資源

滑鼠雙擊 AppResources.resx 檔案
請參考下圖，輸入相關文字到名稱 / 值欄位內，輸入完成後，記得按下 Ctrl + S，儲存您的輸入內容。

在名稱這裡，我沒有使用英文，這是我個人的習慣，因為，到時候在 XAML 頁面上會比較好辨識
滑鼠右擊核心 PCL 專案，選擇 重建
滑鼠右擊核心 PCL 專案內的 MultilingualResources 資料夾
選擇 Multiligual App Toolkit > 產生電腦轉譯

這裡是要要求 MAT 自動幫我們做出翻譯文字
在進行自動文字翻譯過程中，會出現下圖，告訴您，自動翻譯的過程
滑鼠雙擊 XFLocalization.zh-Hant.xlf 檔案

您會看到如下圖，此時，您可以修正這些翻譯內容是否符合您的需要。若有不正確的內容，請進行修改即可。

底下是修正後的結果，請記得要按下 Ctrl + S ，進行儲存
重複同樣的動作，開啟 XFLocalization.ja.xlf 檔案，確認翻譯結果並予以修正

建立 MainPage 頁面檢視

請滑鼠雙擊 核心 PCL 專案 下的 Views > MainPage.xaml 檔案
請在 MainPage.xaml 檔案內，填入底下XAML碼

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:appRes="clr-namespace:XFLocalization.Resources"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFLocalization.Views.MainPage"
             Title="MainPage">
    <Grid
        RowSpacing="0" ColumnSpacing="0"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--應用程式名稱文字-->
        <Label 
            Grid.Row="0" Grid.Column="0"
            VerticalOptions="Center" HorizontalOptions="Center"
            Text="{x:Static appRes:AppResources.多奇數位創意有限公司}" TextColor="#e0421f"
            FontSize="Large"
            />

        <!--使用者登入方式選擇-->
        <StackLayout
            Grid.Row="1"
            Orientation="Vertical"
            Spacing="0"
            Margin="30,0,30,0"
            >

            <!--使用者自行輸入帳號與密碼的認證方式-->
            <Label 
                VerticalOptions="Center" HorizontalOptions="Start"
                Text="{x:Static appRes:AppResources.帳號}" TextColor="#e0421f"
                />
            <Entry
                HorizontalOptions="Fill" VerticalOptions="Center"
                Placeholder="{x:Static appRes:AppResources.請輸入您的電子郵件信箱}" 
                Text="{Binding 帳號}" TextColor="Black"/>
            <Label 
                VerticalOptions="Center" HorizontalOptions="Start"
                Text="{x:Static appRes:AppResources.密碼}" TextColor="#e0421f"
                />
            <Entry
                HorizontalOptions="Fill" VerticalOptions="Center"
                Placeholder="{x:Static appRes:AppResources.請輸入該帳號使用的密碼}" 
                Text="{Binding 密碼}" TextColor="Black"
                />
            <Button
                HorizontalOptions="Center" VerticalOptions="Center"
                WidthRequest="150"
                Text="{x:Static appRes:AppResources.登入}" TextColor="White"
                BackgroundColor="#849187"
                Command="{Binding 登入Command}" />
        </StackLayout>
    </Grid>
</ContentPage>

在這個 XAML 檔案內，首先宣告了要使用 AppResources 類別的命名空間，使用這樣的方式來增加一個命名空間 xmlns:appRes="clr-namespace:XFLocalization.Resources"

若想要在 XAML 中，顯示一個多國語言的文字，可以使用這樣的方式 {x:Static appRes:AppResources.多奇數位創意有限公司}，這表示了這個文字會從 AppResources 類別內的 多奇數位創意有限公司 這個靜態屬性，依據當時語系取得要顯示的文字。

專案執行結果

底下為這個範例專案，在各個平台下執行與操作結果說明。

Android 平台執行結果

滑鼠右擊原生 Android 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 Android 模擬器的設定功能中，選擇 Language & input > Language > 中文(繁體)
按下 F5 開始進行偵錯
因為現在模擬器的語系為中文(繁體)，所以，會看到底下畫面，都是中文(繁體)文字
按下 Shift + F5 停止偵錯
在 Android 模擬器的設定功能中，選擇 日本語
按下 F5 開始進行偵錯
因為現在模擬器的語系為日本語，所以，會看到底下畫面，都是日文文字

iOS 平台執行結果

滑鼠右擊原生 iOS 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 iOS 模擬器中，執行 Settings > Gerneral > Language & Region > iPhone Language > 繁體中文 > Done
按下 F5 開始進行偵錯
因為現在模擬器的語系為繁體中文，所以，會看到底下畫面，都是繁體中文文字
按下 Shift + F5 停止偵錯
在 iOS 模擬器中，執行 Settings > Gerneral > Language & Region > iPhone Language > 日本語> Done
按下 F5 開始進行偵錯
因為現在模擬器的語系為日文，所以，會看到底下畫面，都是日文字

UWP 平台執行結果

滑鼠右擊原生 UWP 專案
選擇 設定為起始專案
選擇您要執行的目的裝置或者模擬器
按下 F5 開始進行偵錯
因為現在模擬器的語系為英文，所以，會看到底下畫面，都是英文文字
按下 Shift + F5 停止偵錯
在 UWP Mobile 模擬器中，切換到 Settings > Time & language > Language > Add language > 中文(台灣) > Done > Restart phone
按下 F5 開始進行偵錯
因為現在模擬器的語系為繁體中文，所以，會看到底下畫面，都是繁體中文文字
按下 Shift + F5 停止偵錯
在 UWP Mobile 模擬器中，切換到 設定 > 時間與語言 > 語言 > 新增語言 > 日本語 > 完成 > 重新啟動手機
按下 F5 開始進行偵錯
因為現在模擬器的語系為日文，所以，會看到底下畫面，都是日文文字

參考網址

Multilingual app toolkit 4.0

https://developer.microsoft.com/en-us/windows/develop/multilingual-app-toolkit

Cross-Platform Localization with the Multilingual App Toolkit

https://channel9.msdn.com/Events/Build/2015/2-84

訂閱：文章 (Atom)

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書