XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2017/01/31

Xamarin FAQ 1-30 : 如何確認我的開發環境可以順利進行 Xamarin.Forms 專案開發

問題

當要進行 Xamarin.Forms 專案開發的時候，最為重要，也是第一次接觸並想要利用 Xamarin 來開發跨平台應用程式的朋友最為頭痛的問題，那就是我的開發環境無法進行 Xamarin.Forms 的應用程式開發。不過，要解決無法順利進行 Xamarin.Forms的應用程式開發上的問題，您需要有一套SOP來逐步檢測問題發生在哪裡。

解答

在這裡，請您依照底下的程序進行操作。若您無法按照底下說明來進行下去，請將當時遇到的問題、錯誤訊息、螢幕截圖等相關情況，提列出來，以便進行分析問題在哪裡。

建立練習專案

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

Android 平台執行結果

  • 滑鼠右擊 原生 Android 專案
  • 選擇 設定為起始專案
  • 選擇您要執行的目的裝置或者模擬器
  • 按下 F5 開始進行偵錯
  • 此時您應該可以看到螢幕上看到這個文字 Hello from Xamarin.Forms and Prism

iOS 平台執行結果

  • 滑鼠右擊 原生 iOS 專案
  • 選擇 設定為起始專案
  • 選擇您要執行的目的裝置或者模擬器
  • 按下 F5 開始進行偵錯
  • 此時您應該可以看到螢幕上看到這個文字 Hello from Xamarin.Forms and Prism

UWP 平台執行結果

  • 滑鼠右擊 原生 UWP 專案
  • 選擇 設定為起始專案
  • 選擇您要執行的目的裝置或者模擬器
  • 按下 F5 開始進行偵錯
  • 此時您應該可以看到螢幕上看到這個文字 Hello from Xamarin.Forms and Prism
張貼者：
於 沒有留言:
標籤： , , ,

2017/01/30

Xamarin FAQ 1-29 : 如何客製導航抽屜的抽屜面板

問題

使用 Xamarin.Forms 開發一個導航抽屜頁面 ( MasterDetailPage ) ，您會發現到在 Android 平台下，當抽屜從左往右滑動出來，狀態列會被遮蓋掉，若想解決這類抽屜上的相關問題 ( 變更抽屜寬度、暫時隱藏狀態列 )，這些需求該如何處理呢?

解答

底下的螢幕截圖將會在 Android 平台下執行的結果，這裡範例專案中，一開始是提供一個 MasterDetailPage / NavigationPage / ContentPage，執行結果如下：
若沒有特別設定的情況下，當我們點選了左上方的漢堡按鈕，會推出一個面板，但是，這個面板會佔據調螢幕最上方的狀態列。
此時，若想要設計出這樣的效果，當導航抽屜推出來的時候，不要遮蔽掉最上方的狀態列，甚至上方的工具列的工具列，您可以在 MasterDetailPage.Master 這個屬性內的 ContentPage 來指定抽屜的上方要內縮一小段距離，這樣就不會把狀態列或者工具列給遮蔽掉了。例如，底下的 XAML 範例中，就是使用了 ContentPage.Padding 屬性來設定；經過這樣的設定，導航抽屜的顯示效果如下圖所示。
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage 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="XFMDStatusBar.Views.MDPadding">

    <MasterDetailPage.Master>
        <ContentPage 
            Title="Master" 
            BackgroundColor="Transparent"
            Padding="0,80,0,0">
            <Grid>
                <BoxView
                    Color="Pink"/>
                <Label Text="「多奇數位創意」是一群擁有理想與信念的網際網路資源整合團隊，致力於達成「數位創意服務」的願景，追求不斷的卓越創新是我們的信念"
                       HorizontalOptions="Center" VerticalOptions="Center"
                       Margin="20"
                       TextColor="White"
                       />
            </Grid>
        </ContentPage>
    </MasterDetailPage.Master>

</MasterDetailPage>
接下來的需求那就是想要做到導航抽屜面板寬度不要這麼寬，此時，您可以參考底下的 XAML 宣告；此時，我們的最上方的工具列與狀態列不用被遮蔽掉的需求，可以在 ContentPage 內的 Grid 控制巷內，設定 Padding 的屬性值，定義上方內縮值。至於寬度上，同樣可以在 Grid 控制項上設定右側內縮，此時，這樣的執行效果會如下圖所示。
<?xml version="1.0" encoding="utf-8" ?>
<local:MyMD 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:local="clr-namespace:XFMDStatusBar"
                  prism:ViewModelLocator.AutowireViewModel="True"
                  x:Class="XFMDStatusBar.Views.MDRenderer">

    <MasterDetailPage.Master>
        <ContentPage 
            Title="Master" 
            BackgroundColor="Transparent">
            <Grid
                Margin="0,55,150,0"
                >
                <BoxView
                    Color="Yellow"/>
                <Label Text="「多奇數位創意」是一群擁有理想與信念的網際網路資源整合團隊，致力於達成「數位創意服務」的願景，追求不斷的卓越創新是我們的信念"
                       HorizontalOptions="Center" VerticalOptions="Center"
                       Margin="10"
                       TextColor="Black"
                       />
            </Grid>
        </ContentPage>
    </MasterDetailPage.Master>

</local:MyMD>
不過，在這個範例中您可以發現到，這個 XAML 頁面的根項目是 local:MyMD，不過，這個項目是個客製化控制項，這個類別是繼承 MasterDetailPage 類別，並且在 Android 平台下宣告一個 Renderer ，讓這個導航抽屜頁面執行的時候，是沒有狀態列；像是這樣的需求就可以透過底下程式碼來做到。
[assembly: ExportRenderer(typeof(MyMD), typeof(MyMDRenderer))]
namespace XFMDStatusBar.Droid
{
    public class MyMDRenderer : MasterDetailPageRenderer
    {
        public override void AddView(Android.Views.View child)
        {
            child.GetType().GetRuntimeProperty("TopPadding").SetValue(child, 0);
            var padding = child.GetType().GetRuntimeProperty("TopPadding").GetValue(child);

            base.AddView(child);
        }
    }
}


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

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-跨平台手機應用程式設計入門-粉絲團



張貼者：
於 沒有留言:
標籤： , , , , ,
訂閱： 文章 (Atom)