XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2017/01/30

Xamarin.Forms 相關練習專案完整分類清單

這份清單文件中所有列出的範例專案原始碼，是我最近一年從事 Xamarin.Forms 專案開發與上課教學，所撰寫的相關範例，當您有在開發 Xamarin.Forms 專案的時候，若有遇到任何問題，非常適合參考這些專案範例原始碼。

我都已經在底下環境實際建置與執行和測試過，確認這些專案可以正常運作。

●  作業系統：
Windows 10 專業版 1607

●  Visual Studio：
Enterprise 2015 Update 3

●  Xamarin ToolKit：
Xamarin 4.2.2.11
Xamarin.Android  7.0.2.42
Xamarin.iOS 10.3.1.8


▂▃▄▆█ Xamarin基本觀念 █▆▄▃▂

XFFirst

使用 Xamarin.Forms 的專案樣板，建立您第一個 Xamarin.Forms 專案

在這個練習中，只會使用 Xamarin.Forms 的預設專案樣板，建立您第一個 Xamarin.Forms 的專案，並不會在 Xaml / Code Behind / ViewModel 中做任何設計。這個練習的目的，是在於學會如何建立一個 Xamarin.Forms 專案，並且可以成功在不同平台的模擬器下來執行。

SAPLib

使用 Shared 專案，開發原生 Android / iOS / UWP 專案

在這裡使用條件式的編譯符號，定義各平台下要執行的程式碼，您可以透過左上角的下來選單，進行切換

iOSLab

Xamarin.iOS 原生專案開發練習

這個專案，將會使用原生 iOS 開發套件與原生 iOS API開發出一個原生 iOS App

AndroidHello

使用 Xamarin.Android 來建立一個原生 Android 類型的應用程式

這個範例專案將會說明如何使用 Xamarin.Android 工具幫助您開發原生 Android 類型的應用程式

HelloBlankXamlApp

Xamarin.Forms Hello World

如何使用 Visual Studio 提供的專案樣板，產生一個 Xamarin.Forms 的專案。

iOSHello

使用 Xamarin.iOS 來建立一個原生 iOS 類型的應用程式

AndroidLab

如何使用 Xamarin.Android 開發專案

這個專案讓您練習如何使用 Xamarin.Android工具，透過 原生 Android API，建立一個原生 Android 應用程式


 ▂▃▄▆█ Prism 與 MVVM 應用 █▆▄▃▂

PrismDS

如何實作出相依性服務注入的介面與物件與練習建構式注入方法

在這裡，使用建構式注入了 ISayHello 介面地當時實作物件，ISayHello 的實作物件將會於每個原生專案內茶看到，在原生專案內，其類別必須標示 [assembly: Xamarin.Forms.Dependency(typeof(SayHello))]

PrismUnityApp4

Prism 核心服務與功能練習

在這裡，您將會學會如何在進行頁面導航的時候，傳遞參數到下個頁面中、如何在新頁面中將參數取得回來、使用深層導航，一次導航到多個頁面；對話窗服務功能的使用、使用相依性服務注入技巧、建構式注入物件。

MasterDetailPagePrism

使用 Prism 開發框架，建立具有導航抽屜功能的頁面

這個練習專案，將會使用 Prism 開發框架來設計，所以，在MasterDetailPage，僅需要定義導航抽屜面板，而 Detail 屬性部分，則會由 Prism 的導航 URI 來提供

DeepLink

如何透過 Prism 提供的 INavigationService 操作頁面導航功能

在這個練習專案，我們將來練習如何透過 Prism 提供的 INavigationService 介面物件，進行各種頁面導航的操作。其中，包含了相對頁面導航的方法、深度導航、與自訂深度導航。

MVVM1

開發 Xamarin.Forms 專案，不使用 MVVM 開發方式的作法

MVVM 是您要開發 Xamarin.Forms 專案時候必備的開發技能，若您不使用 MVVM 開發方式與選擇一個合適您的 MVVM 開發框架工具；那麼，當您進行專案開發的時候，將會遇到很多不方便處理的問題。
在這裡將會體驗如何使用 Code Behind 的方式來開發 Xamarin.Forms 的專案

MVVM2

不透過任何 MVVM 開發套件，自行製作 MVVM 開發方法的規範需求

若您不依賴任何 MVVM 開發框架工具，則您需要在每個 ViewModel 內來實作出 INotifyPropertyChanged (INPC) 介面，如此，當 View 中的控制項所綁定的屬性或者 ViewModel 內的屬性有異動的時候，才會根據綁定模式，自動地進行異動後的資料更新。
在這個專案中，您將需要定義一個 ViewModel 類別，並且設定頁面中的 BindingContext 屬性上。

MVVM3

使用 Prism 開發框架工具，進行 Xamarin.Forms + MVVM 專案開發

在這個練習專案中，我們將會直接使用 Prism 這個 MVVM Framework；Prism 提供了相當多友善的 MVVM 開發解決方案，讓您在進行 Xamarin.Forms 專案開發的時候，可以，更加快速與簡潔的做出好用的應用程式。

XFAlert

Xamarin.Forms 與 Prism 在警告視窗與動作表單視窗的用法

這裡綜合了 Xamarin.Forms 與 Prism 在警告視窗與動作表單視窗的用法

XFPmLM

Prism 的容器各種使用方式

這個專案將會展示如何使用 Prism 的容器各種使用方式，包含了如何註冊、解析一個要注入的物件與藥注入物件生命週期管理

XFPrismALM

學習 Prism 與 Xamarin.Forms 的頁面事件的執行先後順序之差異

這個專案將會用來測試 Code Behind 的 OnAppearing / OnDisappearing 和 Prism 的 INavigationAware 之 OnNavigatedFro / OnNavigatedTo 事件， 這些事件，在不同情況下、在不同平台下的執行順序，您將會看到不同平台下執行順序差異


▂▃▄▆█ 基本頁面使用 █▆▄▃▂

TabPage1

使用 TabbedPage.ItemTemplate 來開發出多標籤頁次的頁面

TabbedPage 支援可以使用 TabbedPage.ItemTemplate 來設計一個樣板頁面，而可以使用 ItemsSource 來指定要顯示的資料的來源；透過這樣的設計，每個標籤頁次所要顯示的控制項都一樣，只不過，每個標籤頁次內所顯示內容都會不一樣。

TabPage2

標籤頁式頁面開發範例

XamarinLogin

製作一個使用者登入的頁面

這裡，使用 Font Awesome 與相關 XAML 控制項，製作出一個讓使用者登入的頁面

HomeDrawer

企業內部應用程式範例框架

這個專案將展示了一個企業內部應用程式的大概雛形，它有個導航抽屜，裡面有加班申請、請假系統、工作報告這樣的頁面導航設計範例。您可以透過這個範例框架，進行修改，就可以開始進行您的企業內部跨平台應用程式開發了。

HomeTabbed

將公司內部網頁，串接到跨平台應用程式範例

在這裡，將會透過標籤式頁面，將許多網頁串接到這個應用程式中，並且可以加入許多 Xamarin.Forms 的原生頁面與控制項。

HomeMenu

導航抽屜

在這個首頁應用程式中，採用的是Xamarin.Forms 提供的 Master-Detail 頁面，該頁面擁有一個漢堡按鈕，當您點擊該按鈕或者由螢幕左方往右滑動，就會帶出一個導航抽屜選單；在這個選單上，您可以依照您的需求點擊任何項目，此時，螢幕就會出現該項目應該呈現的頁面。

HomeMenuXAML

使用導航抽屜頁面，展示所有 XAML 控制項

在這個範例專案中，可以透過導航抽屜面板，切換到不同頁面，便可看到 Xamarin.Forms 預設控制項與版面配置的使用範例和實際在不同平台上執行成果。

XFSplash

系統啟動的啟動畫面的設計方法

一個應用程式啟動後，可能需要做不同的資料初始化，例如：要從網路下載資料、要從手機內讀取檔案資料等等，這些都會造成啟動程式需要一些時間，才能夠切換到首頁頁面；因此，可以透過這個專案提供的啟動頁面設計，讓使用者不會對這個應用程式造成不好的感覺。

XFSplashDbg

Xamarin.Forms 應用程式除錯練習

這個專案內存在了許多錯誤，請您嘗試修改這個專案，讓這個專案變成可以正常執行的模式。

XFSplashDbg_Ans

Xamarin.Forms 應用程式除錯練習解答

這是除錯練習的解答

DataForms

表單輸入頁面設計範例

在這個練習專案中，您將要設計一個表單，讓使用者填寫，並且這個表單有很多項目，會超過螢幕高度，因此，您需要使用 ScrollView 讓使用者可以捲動填寫所有資料。

XFNaviService

這是個綜合演練範例，包含了導航頁面、深度導航、導航抽屜的各種測試

從這裡，您可以了解到一個綜合式的應用開發，該如何解決這些問題。

TabbedPageLab

標籤式頁面 TabbedPage 的使用練習

在這個練習中，您需要在標籤式頁面內，加入多個 ContentPage 項目，並且每個項目一定要定義 Title 屬性，這樣，就完成了標籤式頁面的設計

TabbedPagePrism

在 Prism 下，設計標籤式頁面 TabbedPage 的使用練習

在這個練習中，您需要在標籤式頁面內，加入多個 ContentPage 項目，並且每個項目一定要定義 Title 屬性，這樣，就完成了標籤式頁面的設計

TBIVideoLabImg

標籤式頁面 TabbedPage 具有圖片的使用練習

在這個練習中，您需要在標籤式頁面內，加入多個 ContentPage 項目，並且每個項目一定要定義Title 屬性、設定 Icon 屬性，這樣，就完成了標籤式頁面的設計。您需要將圖片檔案複製到原生專案的指定位置內，若每個原生專案的圖片路徑不太相同，可以使用 OnPlatform x:TypeArguments 來指定個平台的圖片位置

TBIVideoLab

導航工具列設計範例

這個專案，將會練習如何在導航工具列上，加入導航工具列按鈕，讓這個頁面多了一寫操作命令選擇

MDVideoLab

導航抽屜頁面與絕對導航與相對導航

這個範例中，將會展示如何在導航抽屜面板中，切換到其他的工作頁面，不過，在此，使用的是絕對導航方式，在這個方式中，將會清除導航堆疊。您也可以使用相對導航方是，看看這兩種導航操作，有何不同
同樣的導航指令，為何從導航抽屜進行導航的沒有導航工具列，而從子頁面導航的頁面，卻有導航工具列，您知道為什麼?

NavigationPageLab

練習 Xamarin.Forms 的頁面導航切換

這個練習專案內有兩個按鈕，第一個按鈕於切換頁面之後，就無法再回到原先頁面；而第二個按鈕，將可以切換到第二個頁面，也可以使用工具列或者硬體回上一頁按鈕，回到上一頁

NavigationPagePrism

如何客製化導航工具列

在這個練習專案中，您將會學習如何客製化導航工具列；我們將在 NewPage 頁面中，使用附加屬性表示方式， NavigationPage.HasBackButton="False" 設定這個頁面的導航工具列沒有回上頁按鈕圖片

MasterDetailPageLab

使用 Xamarin.Forms 的基本方法，建立一個具有導航抽屜功能的應用程式

在這裡，您需要指定 MasterDetailPage.Master / MasterDetailPage.Detail 這兩個屬性，進行設定導航抽屜與子頁面的內容

MasterDetailPage1Lab

使用 Xamarin.Forms 建立一個導航抽屜頁面應用程式，不過，沒有使用 NavigationPage

您可以嘗試與 使用 Xamarin.Forms 的基本方法，建立一個具有導航抽屜功能的應用程式 這個專案來做比較

ContentPageLab

練習 Xamarin.Forms 原生提供的頁面導航功能(會發生錯誤的版本)

這個專案將會練習 Xamarin.Forms 原生提供的頁面導航功能，但是不透過導航頁面來操作所遇到的問題；在開發上，您可能需要使用 Code Behind 來撰寫頁面商業邏輯。

ContentPagePrism

練習在 Prism 中，使用導航頁面的操作(無 NavigationPage)

練習在 Prism 中，使用導航頁面的操作；這個應用程式的第一個頁面使用 NavigationService.NavigateAsync("MainPage?title=Hello%20from%20Xamarin.Forms"); 方式進入，可以操作與測試看，與一般應用程式有何不同，為何不會閃退(與傳統 Xamarin.Forms Code Behind 的做法。另外，這個控制項可以控制頁面上的按鈕，是否可以正常使用，這是透過了 ICommand 內所提供的功能。

DrawerPresent

練習導航抽屜頁面的開發設計方式

在這個專案中，將會練習導航抽屜頁面的開發設計方式。這包括了，如何資料繫結導航工具列頁面名稱、手動推出導航抽屜、導航頁面的設計方式、取得導航抽屜與子頁面的設計尺寸、Prism 事件聚合器用法。

DynaDrawer

這個練習將會學習如何設計與使用 MasterDetailPage

在這個導航抽屜面板中，將會提供動態可收合的功能表，因此，透過這個練習，您將可以設計導航面板，使其具有更多樣性的效果；MasterDetailPage的導航面板，將是由 Master 這個屬性來呈現，這是一個使用 ContentPage 來製作出來的面板


▂▃▄▆█ 基本控制項使用 █▆▄▃▂

SimpleListView1

練習如何使用 ListView 控制項

建立每個紀錄要用到的類別、使用 ObservableCollection建立要綁定到XAML的集合物件、綁定 SelectedItem 屬性、使用 Behavior 綁定ItemTapped事件與ICommand、設計每筆紀錄要出現的樣貌 ListView.ItemTemplate

EntryLab

這個練習專案，將會學習 Entry 這個控制項的各種不同用法

這包括了使用提示浮水印、指定使用軟體鍵盤格式、預設輸入文字、設定提示浮水印文字顏色、字體大小與格式

sampleListView

練習如何使用 ListView 控制項

學習 Xamarin.Forms 的 ListView 使用方法：產生一個 ViewModel類別，將 ViewModel 綁訂到 ListView 上、定義每筆紀錄要顯示的視覺內容

XFGestures

手勢操作

在行動裝置中，手勢操作功能相當的重要，例如，使用手指點擊螢幕、兩指縮放、拖拉等等；使用Xamarin.Forms GestureRecognizer 類別，可以任您應用程式中的使用者介面控制項，具有處理點擊、雙指縮放、平移這些手勢操控的偵測與處理能力。

XFMap

地圖功能

說明如何開發地圖相關應用的 Xamarin.Forms 應用程式；另外，也會提到完全不使用 XAML 宣告定義的方式，而是採用 C# 程式語言直接進行 Xamarin.Forms 的程式開發方法。當您看完這一章節之後，可以判斷出，使用 XAML 與 純C# 這兩種開發方式，哪種比較方便與好用。

XFImage

Xamarin.Forms 的 Image 相關使用方式與注意事項

這個範例專案，讓您學習到 Xamarin.Forms 的 Image 相關使用方式與注意事項

XFListView

ListView 的各種不同用法展示

這個範例展示出各種在 ListView 遇到的情境與問題解法

XFPicker

如何使用 Xamarin.Forms 內建的 Picker 控制項

這裡將展示如何使用 Xamarin.Forms 內建的 Picker 控制項，您可以在 Xamarin中，定義靜態的可選擇項目，請使用 x:String 來指定每個紀錄內容


▂▃▄▆█ Layout基礎概念 █▆▄▃▂

LayoutOp

LayoutOptions 在 StackLayout 的各種設定效果

在這個範例中，將會在 StackLayout 版面配置中，放置許多 Label 控制項，並且每個Label控制項都擁有不同 LayoutOptions 列舉值，請執行看看結果，並嘗試了解是否與您理解的一致。

RelativeLayoutLab

使用 Xamarin.Forms 的相對版面配置 RelativeLayout

在這裡，您將會看到如何使用 Xamarin.Forms 提供的版面配置 (Layout )的其中一種，相對版面配置 RelativeLayout 的使用方法。

AbsoluteLayoutLab

XAML 版面配置 AbsoluteLayout 練習

AbsoluteLayout 讓您可以使用絕對座標的方式，配製容器內的控制項所要顯示的位置；這個專案，將會提供您練習使用 XAML AbsoluteLayout 這個版面配置的用法

XFLayoutOptions

練習各種不同 LayoutOptions 所表現出來的特性

這個專案，將練習 LayoutOptions 的六個列舉值的特性
▂▃▄▆█ XAML 基礎概念 █▆▄▃▂

DynaStat

資源字典的靜態與動態資源項目的使用範例

在這個範例中，將會展示如何在 Xamarin.Forms 中使用靜態與動態資源，並且如何在執行時期來變更動態資源的用法，也會展示出資源項目的繼承關係與變化。另外，也會練習使用 .NET 的靜態屬性作為 XAML 屬性的設定值。

XFxArray

在 ListView 中，直接使用靜態的集合資料，無須透過 ViewModel來指定

如何使用 x:Array 來指定一個靜態資料的 ListView 集合資料來源

DataBinding

XAML 資料綁定 Data Binding 的方法與技巧

在這個練習專案中，將會學習各種資料綁定 Data Binding 的方法與技巧，以及如何建立一個 ViewModel 與建立各個所需要的屬性 Property 或集合屬性(Collection Property)，以便在 View 中可以使用資料繫結方式進行綁定。另外，也學習如何使用 Prism 的INavigationAware來進行 ViewModel 資料初始化等相關工作。
使用建構式與OnNavigatedTo來建立這個 ViewModel 的資料初始化工作，有何不同，請試著比較說明看看

ElementTree

資源樣式的定義與使用說明

說明如何使用資源樣式的用法，並且了解到階層式的資源樣式用法與覆蓋方式

MergedDict

資料字典合併的用法

我們可以將資料字典定義在另外一個 .xaml 檔案中，並且在您要顯示的頁面中，將這個資料字典定義的內容，合併進來使用，是個相當實用的功能，因為，您可以將常用的資料字典資源整理在一個地方，方便管理。 您將會學習到如何定義資源項目、明確樣式、隱含樣式、控制項自己宣告資源字典、合併資源字典、宣告樣式但繼承某個已宣告的樣式、樣式的繼承(合併不會跨檔案繼承)。


 ▂▃▄▆█ XAML 進階技巧 █▆▄▃▂

CustomDiag

兩種自動控制項開發練習

在這個專案中，您將會設計兩種使用者控制項，這兩種控制項在一般應用程式開發中，會經常用到，第一個為需要使用者輸入帳號與密碼的彈出對話窗、第二個則是正在處理中的對話窗，這兩個對話窗都具有遮罩的效果

UserCtrlEntry

這裡將展示如何自行客製一個使用者控制項(具有資料綁定與處理邏輯)

當使用者所輸入文字長度超過使用者控制項的定義，其右方的圖片，將會變成綠色，告知使用者，您輸入的文字內容符合規定；在這裡，您可以針對不同條件做出不同的條件檢查，也可以使用正規表示式來判斷使用者輸入的內容是否符合規範
宣告一個使用者控制項，並且綁定 ViewModel 內的 Name Property，設定這個文字輸入盒，具有輸入字串長度檢查能力

AttProp

如何在 Xamarin.Forms 開發 XAML 用的 Attached Property

這個附加屬性，只能夠套用在 Entry 控制項上，會根據所指定的名稱，自動加上浮水印文字

BindProp

客製控制項並且加入一個可綁定屬性，以便擴充新控制項的能力

繼承原有控制項，並在新的控制項中，加入一個新的可綁定屬性，使得新的控制項可以具有另外一種表現能力

XFAnimation

學習如何在 Xamarin.Forms 中，使用動畫效果功能

在這裡，您將學習如何使用每個控制項都會具有的動畫處理方法，由於，這些動畫處理方法都是依附在每個控制項中，因此，我們需要在 Code Behind 來撰寫相關動畫處理邏輯，若您想要把這些 Code Behind 程式碼移除，直接在 ViewModel 中呼叫，您可以客製化一個 Behavior。

XFAttBehavior

說明了如何製作出一個 Attached Behaviors

Xamarin.Forms 內的 Behaviors ，讓您可以將一些功能加入到 Xamarin.Forms所提供的控制項中，但是卻不需要繼承原有控制項類別，做出一個客製化控制項；透過了 Attached Behavior ，就可以任您的控制項，擁有不同的行為表現；另外， Behaviors 可以讓您原先在 Code Behind 內的處理邏輯，隱藏起來，透過 XAML 語法，進而啟用這些功能

XFImgZoom

Xamarin.Forms Behavior 的製作與練習

這個範例將會展示如何將放大等手勢操作功能，把原先需要在 Code Behind 寫的程式碼，包裝到 Xamarin.Forms Behaviors，並且在 XAML中來直接套用

XFIValueConverter

練習建立一個數值轉換器

在這個練習中，建立一個數值轉換器，接收一個字串文字，根據對應關係，會轉換成為一個顏色物件，若對應不起來，則回傳黑色，若不透過數值轉換器，您可以在 ViewModel 內定義一個 Color 屬性，在 ViewModel 內自行處理這些轉換邏輯

XFTransforms

學會如何使用繼承 VisualElement 之任何控制項都會擁有的 變換 Transforms 功能

這個專案將會讓您操作 VisualElement 上的一些轉換行為，例如：平移、縮放、旋轉

XFTrigger

練習 Xamarin.Forms 提供的四種觸發功能 屬性觸發 / 資料觸發 / 事件觸發 / 多重觸發

Trigger 可以讓您在 XAML 中，定義各種不同條件，當條件滿足之後，將會做出各種反應

XFUserControl

如何在 Xamarin.Forms 製作與使用一個使用者控制項 (User Control)

這是一個使用者控制項的練習範例，在這裡，您定義另外一個 XAML 檔案，在這裡宣告一些控制項與版面配置，使其成為一個組合式的控制項，在這裡，不需要繼承任何類別，就可以組合成一個您經常使用的控制項


▂▃▄▆█ 擴充控制項 █▆▄▃▂

XFWrapLayout

自己客製一個 WrapView 控制項，並在 Xamarin.Forms 來使用

WrapView 是 Xamarin.Forms 所欠缺的，在這裡將會練習如何使用 WrapView 這個自訂控制項

ImageCircleLab

顯示一有圓形遮罩修飾過的個圖片

要讓圖片被圓形遮罩給修飾，您需要定義額外命名空間，指向 ImageCircle 這套件的組件，就可以將有圓形遮罩的圖片，顯示在螢幕上

PickerLab

在 Xamarin.Forms 中使用具有可綁定功能的 Picker 控制項

在 Xamarin.Forms 中的 Picker 控制項，是沒有提供可綁定資料與命令功能，這對於採用 MVVM 開發方式的開發者而言，是相當的不方便(不過，在2017第二季之後，Xamarin.Forms 將會提供這項功能)。
不過，在此之前，若想要使用這樣的功能，您可以使用本範例中提供的 BindablePicker 來做這樣功能，您也可以順便學習與了解，在 Xamarin.Forms 中，要如何自己客製化一個控制項，做出屬於您自己的 XAML 控制項。

XFCarouselView

練習使用旋轉木馬控制項

這個練習中，將會學習如何在 Xamarin.Forms 中使用旋轉木馬控制項。

XFEllipse

在 Xamarin.Forms 應用程式，可以產生橢圓或圓形的圖形

我們將會來練習一個 Xamarin.Forms 內沒有的一個控制項，那就是要顯示圓形或者橢圓的形狀；在這裡將會繼承 View 控制項，產生出一個 EllipseView 新控制項，並且使用 Renderer 核心功能，在 Android / iOS / UWP 內，使用原生 API 來產生出這個圓形或橢圓形的形狀。

XFFlip

使用 CarouselViewControl 來做出有旋轉木馬效果的控制項

這裡有另外一個控制項 CarouselViewControl，非 Xamarin 官方提供的外加控制項，一樣可以做到有旋轉木馬的功能。

XFFontAwesome

如何在 Xamarin.Forms 使用與顯示 Font Awesome

這是一個綜合應用練習在這個練習中，您將會學習到
  • 如何將 Font Awesome 字體檔案加入到個原生專案內，並且做出相關設定，讓原生系統可以使用這個字體檔案。
  • 建置一個自訂控制項，用來可以顯示 Font Awesome 的字體圖示
  • 學習使用 Renderer 技術，改變預設控制項在不同平台顯示的樣貌與內容
  • 在 XAML 中指定要顯示 Font Awesome 文字方式
  • 練習一個應用程式啟動畫面，進行系統資料讀取與更新的長時間工作，當工作結束後，可以切換到主換面上
  • 了解非同步工作的開發與設計方式和注意事項

XFHListView

Xamarin.Forms 動態產生檢視項目的 WrapView

使用 FlowListView，顯示出 GridView 這樣效果的控制項，這個控制項相當的實用；這裡將會顯示文字內容

XFHorListView

水平捲動的 ListView

在這裡，您需要加入一個命名空間，參考到我們定義的水平式 ListView 客製控制項

XFMoreWrapLayout

客製一個 WrapView 控制項，並做到動態收合效果

這裡使用了 WrapView 與 RoundedBoxView 產生出具有折合效果的捲動清單

XFRendCtrl

客製專屬平台的控制項視覺

會透過 Xamarin.Forms 提供的相依服務的 ExportRenderer 方法，會將自訂控制項使用每個專屬平台的額外程式碼進行修正，使這些平台上看到的控制項，儘可能一樣。在這裡，也會練習如何使用導航工具列的按鈕製作方式

XFRoundedBoxView

展示如何使用可以繪製圓角的控制項與其用法

我們將需要自訂一個控制項，並且在每個平台使用 Renderer 來產生這個具有圓角的矩形

XFSkiaSharp

如何在 Xamarin.Forms 使用類似 Canvas 畫布功能

SKCanvasView 控制項是一個具有畫布功能的控制項，可以讓您在這個控制項上進行各種繪圖動作


 ▂▃▄▆█ Xamarin.Forms核心技術 █▆▄▃▂

XFDependency

相依性服務注入

Xamarin.Forms 允許開發者可以自行定義出每個平台專屬一些行為，而在核心PCL專案內，透過 DependencyService 這個靜態類別所提供的 Get 方法，於執行時期找到當時執行行動裝置平台對應的建置程式碼，接著執行這些功能，使得當要存取原生方法的時候，可以使用分享程式碼的方式。

XFMessage

訊息中心

Xamarin.Forms 提供一個訊息通訊機制，稱作 訊息中心 ( MessagingCenter )，透過訊息中心這個機制，可以減少 Xamarin.Forms 程式開發的耦合性，也就是說，讓各個類別間不要有關聯關係。在訊息中心機制內，包含了簡單的訊息傳送與接收服務。

XFDevice

平台特色

在進行 Xamarin.Forms 跨平台應用程式開發的時候，由於，開發者會將大部分的商業邏輯與視覺介面都在核心PCL內進行開發，不過，有些時候在共用的商業邏輯程式碼內或者在共用視覺介面 XAML 定義宣告中，想是根據不同的平台與系統做出不同的反映；這樣的需求，就是這個章節存在的目的。

XFAlert

學習如何使用 Xamarin.Forms 提供的對話窗功能

您可以在 Code Behind 程式碼中，直接使用 DisplayAlert / DisplayActionSheet 對話窗，這些對話窗將會在每個平台，以原生對話窗的樣貌出現(因為，就是呼叫原生平台的對話窗 API)。
另外，我們也將學習如何在 ViewModel 中使用 Prism 提供的 IPageDialogService 介面的 DisplayAlertAsync / DisplayActionSheetAsync 對話窗功能；在這裡，您需要在 ViewModel 的建構式中，注入 IPageDialogService 實作物件。

XFWebSrv

Web 服務存取

在這個範例專案中，將會實作 RESTful Web API 與 WCF 這兩種 Web 服務的呼叫方式。

XFALM

Xamarin.Forms 內提供的頁面應用程式生命週期練習

在這裡，我們將會學習兩個事件 OnAppearing / OnDisappearing 的使用方式，以及，這兩個事件將會於甚麼時候被執行。透過了 Visual Studio 輸出視窗，您可以看到這些事件被呼叫的過程與順序。

XFLifeCycle

練習 Xamarin.Forms 的應用程式生命週期

這個專案練習將會練習 Xamarin.Forms 的應用程式生命週期，您需要執行這個專案，觀察 Visual Studio 內的輸出視窗，觀察輸出內容，請試著將應用程式切換為背景模式，並且再度切換成為前景

XFOnPlatform

如何在 XAML 與 C# 內，使用 OnPlatform

在這個範例，練習如何使用 OnPlatform 來設定不同平台的XAML控制項有著不同屬性
▂▃▄▆█ 應用實例與套件 █▆▄▃▂

XFSQLite

SQLite資料庫使用

在這個範例專案中，將會說明如何在核心PCL專案內，使用 SQLite 資料庫來操作資料表的 CRUD功能。您需要在原生專案與核心PCL專案中安裝這個 SQLite.Net PCL NuGet 套件，並且要在原生專案中提供 SQLiteConnection 的實作。

XFDevInfo

與裝置硬體互動

在進行 Xamarin.Forms 跨平台應用程式開發的時候，您需要取得特定平台硬體內的許多資訊，例如：您需要取得裝置硬體的唯一識別碼、GPS定位最新資訊、電池狀態、網路連線狀況等等。
得知裝置的電池電力、充電狀態等等 (使用 Battery Plugin )
檢查網路連線狀態、連線類型、可用頻寬等資訊 (使用 Connectivity Plugin )
取出裝置的相關資訊，如型號、作業系統等等 (使用 Device Info Plugin )
取得 GPS 當時定位資訊，必且開啟手機內建的地圖應用程式來顯示 (使用 Geolocator / External Maps Plugin )
讓裝置硬體震動 (使用 Vibrate Plugin )

XFFilePhoto

檔案存取與拍照

在這個範例專案中，將會練習兩個在行動裝置開發過程中，相當重要的功能，那就是 檔案存取 與 行動裝置的專屬功能呼叫，在這裡將會展示如何在核心PCL專案內，呼叫個專屬平台的拍照功能，並且將拍照完成的照片回傳並顯示到行動裝置螢幕上。

XFAuth

Facebook 社群身分驗證

說明如何透過 Xamarin 提供的元件 Xamarin.Auth ，進行社群身分驗證，在這裡，將會使用 Facebook 作為身分驗證的來源。

XFAzureMA

Azure Mobile後端資料庫存取

當進行跨平台裝置專案開發過程中，大多會需要使用到後端資料庫存取服務，在這個範例中，將會為您說明使用 Microsoft Azure 所提供的 Azure Mobile App 服務。

XFCALQR

萬年曆與QR-Code

在這個範例專案中，將會實作出 萬年曆與QR-Code 的功能，這兩項功能也是透過插件來完成，不過，來看看要怎麼時做出這樣的功能。

XFGenBarcode

我們可以透過 NuGet 套件，讓應用程式顯示出各種不同條碼的圖片

在這裡，我們學習如何在 XAML 中，使用 ZXingBarcodeImageView 控制項，顯示出一維 / 二維 條碼的圖片在螢幕上；要指定各種不同條碼格式，可以使用 BarcodeFormat 屬性。


XFScan

這個專案展示如何進行一維或者二維條碼掃描

不使用 ViewModel ，使用 Code Behind 來展示

MapsLab

練習如何在 Xamarin.Forms 顯示地圖

要練習這個專案，您的模擬器必須要安裝 Google Play Service，否則，您就需要在您的實體手機上來進行開發與測試，看看執行結果。




Xamarin-跨平台手機應用程式設計入門-粉絲團



張貼者：
於 沒有留言:
標籤： , , , , ,

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>
張貼者：
於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)