共用方式為


ListView 數據源

Xamarin.FormsListView用於顯示資料清單。 本文說明如何使用數據填入 ListView ,以及如何將數據系結至選取的專案。

ItemsSource

ListView使用 屬性填入數據ItemsSource,這個屬性可以接受任何實作 的IEnumerable集合。 填入 ListView 的最簡單方式包括使用字串數組:

<ListView>
      <ListView.ItemsSource>
          <x:Array Type="{x:Type x:String}">
            <x:String>mono</x:String>
            <x:String>monodroid</x:String>
            <x:String>monotouch</x:String>
            <x:String>monorail</x:String>
            <x:String>monodevelop</x:String>
            <x:String>monotone</x:String>
            <x:String>monopoly</x:String>
            <x:String>monomodal</x:String>
            <x:String>mononucleosis</x:String>
          </x:Array>
      </ListView.ItemsSource>
</ListView>

對等的 C# 程式碼為:

var listView = new ListView();
listView.ItemsSource = new string[]
{
  "mono",
  "monodroid",
  "monotouch",
  "monorail",
  "monodevelop",
  "monotone",
  "monopoly",
  "monomodal",
  "mononucleosis"
};

顯示字串清單的 ListView

此方法會以字串清單填入 ListView 。 根據預設, ListView 將會針對每個數據列呼叫 ToString 並顯示結果 TextCell 。 若要自定義數據的顯示方式,請參閱 數據格外觀

因為 ItemsSource 已傳送至陣列,因此內容不會隨著基礎清單或陣列變更而更新。 如果您希望 ListView 在基礎清單中新增、移除和變更項目時自動更新,則必須使用 ObservableCollectionObservableCollection 定義於 System.Collections.ObjectModel 中,與 相同 List,不同之處在於它可以通知 ListView 任何變更:

ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
listView.ItemsSource = employees;

//Mr. Mono will be added to the ListView because it uses an ObservableCollection
employees.Add(new Employee(){ DisplayName="Mr. Mono"});

資料繫結

數據系結是「黏附」,會將使用者介面對象的屬性系結至某些 CLR 對象的屬性,例如 viewmodel 中的類別。 數據系結很有用,因為它可藉由取代許多無聊的重複使用程式代碼來簡化使用者介面的開發。

數據系結的運作方式是讓對象在系結值變更時保持同步。 您不必在每次控件的值變更時撰寫事件處理程式,而是在 viewmodel 中建立系結並啟用系結。

如需數據系結的詳細資訊,請參閱 XAML 基本概念文章系列的第四Xamarin.Forms部分數據系結基本概念。

系結單元格

單元格的屬性(和儲存格的子系)可以系結至 中的 ItemsSource物件屬性。 例如, ListView 可用來呈現員工清單。

員工類別:

public class Employee
{
    public string DisplayName {get; set;}
}

ObservableCollection<Employee>會建立 、設定為 ListViewItemsSource,且清單會填入資料:

ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
public ObservableCollection<Employee> Employees { get { return employees; }}

public EmployeeListPage()
{
    EmployeeView.ItemsSource = employees;

    // ObservableCollection allows items to be added after ItemsSource
    // is set and the UI will react to changes
    employees.Add(new Employee{ DisplayName="Rob Finnerty"});
    employees.Add(new Employee{ DisplayName="Bill Wrestler"});
    employees.Add(new Employee{ DisplayName="Dr. Geri-Beth Hooper"});
    employees.Add(new Employee{ DisplayName="Dr. Keith Joyce-Purdy"});
    employees.Add(new Employee{ DisplayName="Sheri Spruce"});
    employees.Add(new Employee{ DisplayName="Burt Indybrick"});
}

警告

ListView雖然會更新以回應其基礎ObservableCollection中的變更,ListView但如果將不同的ObservableCollection實例指派給原始ObservableCollection參考,則 不會更新 (例如 )。 employees = otherObservableCollection;

下列代碼段示範 ListView 系結至員工清單:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample"
             x:Class="XamarinFormsXamlSample.Views.EmployeeListPage"
             Title="Employee List">
  <ListView x:Name="EmployeeView"
            ItemsSource="{Binding Employees}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <TextCell Text="{Binding DisplayName}" />
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

這個 XAML 範例會 ContentPage 定義包含 的 ListViewListView 的資料來源是透過 ItemsSource 屬性設定的。 ItemsSource 中每個資料列的配置都是在 ListView.ItemTemplate 元素內定義的。 這會產生下列螢幕快照:

使用數據系結的 ListView

警告

ObservableCollection 不是安全線程。 ObservableCollection修改會導致 UI 更新發生在執行修改的相同線程上。 如果線程不是主要UI線程,則會導致例外狀況。

系結 SelectedItem

您通常會想要系結至 的 ListView選取專案,而不是使用事件處理程式來回應變更。 若要在 XAML 中執行此動作,請繫結 SelectedItem 屬性:

<ListView x:Name="listView"
          SelectedItem="{Binding Source={x:Reference SomeLabel},
          Path=Text}">
 …
</ListView>

假設 listViewItemsSource 是字串清單, SomeLabelText 屬性會繫結至 SelectedItem