2016/11/06

如何在 Xamarin.Forms 使用 BindingContext 設定 ListView 的資料來源並且綁定

在這份筆記中，將會描述如何建立一個 ViewModel，但是，不使用 Prism 這種框架來直接進行 ViewModel 的綁定，而是透過了 Code Behind 中，設定了 BindingContext的方式，讓整個頁面具有這個 ViewModel，可用於相關 View 資料綁定之用。

底下為這個範例用到的 ViewModel

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace sampleListView
{

    public class ViewModel
    {
        public ObservableCollection<someDataClass> MyItemList { get; set; }

        public ViewModel()
        {
            MyItemList = new ObservableCollection<someDataClass>()
            {
                new someDataClass { sometext="sometext1", othertext="othertext1" },
                new someDataClass { sometext="sometext2", othertext="othertext2" },
                new someDataClass { sometext="sometext3", othertext="othertext3" },
                new someDataClass { sometext="sometext4", othertext="othertext4" },
            };
        }
    }

    public class someDataClass
    {
        public string sometext { get; set; }
        public string othertext { get; set; }
    }
}

接著在這個頁面的 Code Behind 中，使用了 this.BindingContext = new ViewModel(); 敘述，將 ViewMdoel 設定頁面的 BindingContext 上。

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new ViewModel();
        }
    }

若不想要透過 Code Behind 的方式來設定 BindingContext，也可以在 XAML 中，直接透過底下方式來宣告。

首先，宣告一個命名空間 xmlns:local="clr-namespace:sampleListView" 名稱為 local，這個命名空間可以指向 ViewModel 類別所在的命名空間。接著使用 Property-Element 表示方式，宣告了 ContentPage.BindingContext 這個屬性的值為 local:ViewModel />

<?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:local="clr-namespace:sampleListView"
             x:Class="sampleListView.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>

    <ListView x:Name="listView" ItemsSource="{Binding MyItemList}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding sometext}" Detail="{Binding othertext}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>