読者です 読者をやめる 読者になる 読者になる

yamamoWorks

.NET技術を中心に気まぐれに更新していきます

TableViewにコレクションデータをバインドする

Xamarin

Xamarin FormsのTableViewListViewと異なりコレクションデータをバインドする機能はありません。 TableViewは設定画面の構築で使用する事を想定しているようですが、メールのアカウント設定のように可変なレコードを扱いたいケースがあるかと思います。 この場合、コードビハインドでレコードをループしてTableViewの中のTableSectionに行を追加するコーディングとなり美しくありません。 そこで今回はTableView(TableSection)にコレクションデータをバインドする機能を追加してみました。

なんちゃってデータバインドなので限定的な用途での参考程度とお考えください。

github.com

コードはGitHubを参照して頂くとして、ここでは使い方と実行イメージだけ載せておきます。

使い方

<?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:XFApp1"
             x:Class="XFApp1.MainPage" Title="Settings" x:Name="root">
  <ContentPage.BindingContext>
    <local:MainPageViewModel />
  </ContentPage.BindingContext>
  <TableView Intent="Settings">
    <TableRoot>
      <TableSection Title="アカウント" local:CollectionBindings.ItemsSource="{Binding Accounts}">
        <local:CollectionBindings.ItemTemplate>
          <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Text}" />
          </DataTemplate>
        </local:CollectionBindings.ItemTemplate>
        <TextCell Text="アカウントを追加" Command="{Binding Source={x:Reference root}, Path=BindingContext.AddCommand}" />
      </TableSection>
    </TableRoot>
  </TableView>
</ContentPage>
public class MainPageViewModel : BindableObject
{
    public ObservableCollection<Account> Accounts { get; }

    public ICommand AddCommand { get; }

    public MainPageViewModel()
    {
        Accounts = new ObservableCollection<Account>(new[]
        {
            new Account { Name= "iCloud", Text="iCloud Drive, リマインダー, メモとその他2項目" },
            new Account { Name= "Outlook", Text="メール、連絡先、カレンダーリマインダー、メモ" },
            new Account { Name= "Gmail", Text="メール、連絡先、カレンダー" }
        });

        AddCommand = new Command(() =>
        {
            Accounts.Add(new Account { Name = "Yahoo!", Text = "メール、連絡先、カレンダー" });
        });
    }
}

public class Account
{
    public string Name { get; set; }

    public string Text { get; set; }
}

実行イメージ

f:id:yamamoWorks:20160730225601p:plain:w300  f:id:yamamoWorks:20160730225611p:plain:w300