DataTemplateSelector
可以幫助我們實現動態選擇數據綁定的模版,如通過ListView+DataTemplateSelector實現微信朋友圈或聊天列表效果。
Github已有聊天效果圖
喜歡閱讀代碼請直接移步:https://github.com/nishanil/Xamarin.Forms-Samples/tree/master/DataTemplateSelector
本文通過一個簡單的Demo練習DataTemplateSelector的使用。
首先在新建的空項目中添加三個Model類:
其中BaseModel
作基類,表示數據源類型,TitleModel
和DescribeModel
分別是BaseModel的子類表示數據源的不同情況。作為練習BaseModel中僅定義了一個String類型屬性Title,TitleModel只是單純的繼承BaseModel,DescribeModel繼承BaseModel的同時增加了一個String類型屬性Describe。
接下來開始為本文的主角編碼,聲明一個MyDataTemplateSelector
繼承DataTemplateSelector
。
其中TitleTemplate和DescribeTemplate是我們根據情況定義的兩個數據模版,TitleTemplate對應TitleModel,DescribeTemplate對應DescribeModel。
OnSelectTemplate
方法是我們必須重寫的一個方法,在OnSelectTemplate方法中判斷item的類型或某個屬性值返回對應的DataTemplate。
接下來主要介紹DataTemplateSelector在Xaml中的使用。
首先在Resources中定義我們需要的兩個DataTemplate。
為了方便用TextCell代替自定義Cell,兩個DataTemplate 的Key值方便使用區分分別定義為TitleTemplate和DescribeTemplate,可以定義你自己的任意值。
定義了需要的DataTemplate后再定義我們的MyDataTemplateSelector。并將提前定義好的DataTemplate通過StaticResource
賦值給MyDataTemplateSelector的TitleTemplate和DescribeTemplate屬性。
Demo中所有內容都定義在了ContentPage.Resources內,完整定義代碼。
定義ListView時再將我們定義好的MyDataTemplateSelector對象賦值給ListView的ItemTemplate
屬性
模擬數據源并綁定到ListView:
Demo效果圖: