James's Tech & Life Blog

什麼是 Compiled Bindings ?

Compiled Binding 是讓 Xamarin.Forms 能對 Binding 的資料，在編譯時期就具型化資料以利使用。

這也就意味著 Xamairn.Forms 就不用在執行時期 (runtime) ，才進行重新解譯 Data Binding 的過程。透過使用定義在任一種 "Visual Element" 中的 XAML 延伸標記 "x:DataType" 來指定資料應具型化的類別，就能輕鬆的享受 Compiled Bindings 帶來的效益。 

 

效益

使用 Compiled Bindings 對開發的 App 帶來兩個最主要的好處:

1. 編譯時期就檢驗 Binding 的陳述式。
2. 透過在編譯時期處理 Binding 過程進而達到效能的提升。

 

啟用 XAML Compilation

而要使用 Compiled Binding 有個前提，就是要先啟用 XAML Compilation。

這對近期新開發 Xamarin.Forms App 的開發人員來說，這項功能應該都是預設啟用的，並且應該已經透過此 XAML Compilation 獲得效能的大幅改善。

若是要手動啟用此功能，可透過在你的共用程式碼專案加入 assembly 層的相關旗標:

[assembly:XamlCompilation(XamlCompilationOptions.Compile)]

使用 Compiled Binding

接下來就透過一段 Sample Code 來解釋，我們要做一個利用 ListView 來呈現很多猴子的資料頁面。

首先，我們有個猴子的類別 (Class) Monkey 並利用這個類別產生了多隻的猴子，形成一個集合。並設計此集合成為 MonkeysViewModel 當中的一個屬性，使其繫結到其 ListView 列表中。

而 MonkeysPage 則是我們所謂的 XAML UI 頁面。

下面則是上述文句的展示 XAML 標記:

<ContentPage 
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="Monkeys.Views.MonkeysPage"
        Title="Monkeys">
<StackLayout>
    <Label Margin="10,0" Text="{Binding MonkeyCount, StringFormat='{0} Monkeys'}"/>
    <ListView ItemsSource="{Binding Monkeys}"
            HasUnevenRows="true">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <controls:CircleImage 
                                BorderColor="Aqua"
                                BorderThickness="3"
                                HeightRequest="66"
                                WidthRequest="66"
                                HorizontalOptions="CenterAndExpand"
                                VerticalOptions="CenterAndExpand"
                                Aspect="AspectFill"
                                Source="{Binding Image}"/>
                        <StackLayout VerticalOptions="Center">
                            <Label Text="{Binding Name}"/>
                            <Label Text="{Binding Location}"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

這裡要注意我們透過在 MonkeysViewModel 中設計 MonkeyCount 與 Monkeys 這兩個屬性來用以繫結資料，並且針對 ListView 要呈現猴子資料們的 UI 項目中，設計了 Image, Name, 與 Location 的 UI 到其 ListView 的 DataTemplate 中的 ItemTemplate 當中。

為了使這 MonkeysViewModel 後續都能正常使用，我們必須在此頁面的 XAML 標記中增加其所需引用的 XAML 命名空間 (namespace)，並且替此命名空間 (namespace) 取了別名為 "viewmodels":

xmlns:viewmodels="clr-namespace:Monkeys.ViewModels"

然後在 ContentPage 的標記節點中，我們增加了 "x:DataType" 的屬性設定:

<ContentPage 
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="Monkeys.Views.MonkeysPage"
        xmlns:viewmodels="clr-namespace:Monkeys.ViewModels"
        x:DataType="viewmodels:MonkeysViewModel"
        Title="Monkeys">
</ContentPage>

就這樣，好戲開始啦~
 

當如果我們在 Visual Studio 中編輯 XAML 時，若不小心有 Binding 資料上的撰寫錯誤，就會 "等燈" 的得到紅色的 Compiler Error:



而如果在使用類似 ListView 的這些集合元件時，有客製化其 DataTemplate 就也必須要在其身上設定 Compiled Binding 的 x:DataType，如我們的範例當中的 ListView 有個繫結集合 "ObservableCollection<Monkey>"，我們就得再次如前述所作的設定，在 ListView 的 DataTemplate 當中做相關的處理。

加入 Monkey 類別的 namespace:

xmlns:models="clr-namespace:Monkeys.Models"

然後在 ListView 的 DataTemplate 當中就要設定 x:DataType 如下:

<ListView ItemsSource="{Binding Monkeys}"
          HasUnevenRows="true">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="models:Monkey">
            <ViewCell>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

就這樣，完成了喔~~~

其實跟原本的 XAML UI 的設計的時候比較起來，說實在的真沒增加多少功夫呢!

了解更多

好啦，其實在使用 Compiled Bindings 還有更多手法可以運用到你的 Xamarin.Forms App 當中。

你可以參考微軟文件 "comprehensive documentation" 了解到更多好用的方式，阿...如果你想要這個範例程式檔，那就請到這個 Blog 專屬 GitHub 找到它吧!
 

---

PS: 啟用 XAML Pre-compilation 會有的特殊現象，可參考 .NET 海角點部落 - Xamarin 的 XamlCompilation Attribute 後半段敘述。

 

---

I'm a Microsoft MVP - Developer Technologies (From 2015 ~).
 

I focus on the following topics: Xamarin Technology, Azure, Mobile DevOps, and Microsoft EM+S.

If you want to know more about them, welcome to my website:
https://jamestsai.tw 

---

本部落格文章之圖片相關後製處理皆透過 Techsmith 公司 所贊助其授權使用之 "Snagit" 與 "Snagit Editor" 軟體製作。