Xamarin.Mac のテーブルビュー

[アーティクル]
07/13/2023

この記事では、Xamarin.Mac アプリケーションでのテーブルビューの操作について説明します。ここでは、Xcode と Interface Builder でテーブルビューを作成し、それらをコードで操作する方法について説明します。

Xamarin.Mac アプリケーションで C# と .NET を使用する場合は、開発者と Xcode で作業しているのと同じテーブルビューにObjective-Cアクセスできます。 Xamarin.Mac は Xcode と直接統合されるため、Xcode の Interface Builder を使用してテーブルビューを作成および保守できます (または、必要に応じて C# コードで直接作成することもできます)。

テーブルビューでは、1 つ以上の情報列を複数の行に含む表形式でデータが表示されます。作成されるテーブルビューの種類に基づいて、ユーザーは列による並べ替え、列の再構成、列の追加、列の削除、またはテーブルに含まれるデータの編集を行うことができます。

この記事では、Xamarin.Mac アプリケーションでのテーブルビューの操作の基本について説明します。この記事で使用する主要な概念と手法については、「 Hello, Mac 」の記事、特に「Xcode とインターフェイスビルダーとアウトレットとアクションの概要」セクションを最初に説明することを強くお勧めします。

Xamarin.Mac Internals ドキュメントの「C# クラス/メソッドを Xamarin.Mac Internals に公開するObjective-C」セクションも参照してください。C# クラスObjective-Cをオブジェクトと UI 要素に結び付けるために使用されるコマンドと Export コマンドについても説明Registerしています。

テーブルビューの概要

テーブルビューでは、1 つ以上の情報列を複数の行に含む表形式でデータが表示されます。テーブルビューはスクロールビュー (NSScrollView) 内に表示され、macOS 10.7 以降では、セル (NSCell) の代わりに任意NSViewのを使用して行と列の両方を表示できます。ただし、使用することはできます NSCell が、通常はカスタムの行と列をサブクラス化 NSTableCellView して作成します。

テーブルビューでは、独自のデータは格納されません。代わりに、データソース (NSTableViewDataSource) に依存して、必要に応じて必要な行と列の両方を提供します。

テーブルビューの動作をカスタマイズするには、テーブルビューデリゲート (NSTableViewDelegate) のサブクラスを指定して、テーブル列の管理をサポートし、型を使用して機能を選択し、行の選択と編集、カスタム追跡、および個々の列と行のカスタムビューを指定します。

テーブルビューを作成する場合、Apple は次のことを提案します。

ユーザーが列ヘッダーをクリックしてテーブルを並べ替えることを許可します。
その列に表示されるデータを記述する名詞または短い名詞句である列ヘッダーを作成します。

詳細については、Apple の OS X ヒューマンインターフェイスガイドラインの「コンテンツビュー」セクションを参照してください。

Xcode でのテーブルビューの作成と保守

新しい Xamarin.Mac Cocoa アプリケーションを作成すると、既定で標準の空白のウィンドウが表示されます。このウィンドウは、プロジェクトに .storyboard 自動的に含まれるファイルで定義されます。 Windows デザインを編集するには、ソリューションエクスプローラーでファイルをMain.storyboardダブルクリックします。

これにより、Xcode のインターフェイスビルダーでウィンドウデザインが開きます。

[ライブラリインスペクター] の [検索] ボックスに「」と入力tableして、テーブルビューコントロールを見つけやすくします。

テーブルビューを インターフェイスエディターのビューコントローラーにドラッグし、ビューコントローラーのコンテンツ領域を埋め、 制約エディターのウィンドウで縮小および拡大する場所に設定します。

インターフェイス階層でテーブルビューを選択すると、属性インスペクターで次のプロパティを使用できます。

コンテンツモード - ビュー () またはセル (NSViewNSCell) を使用して、行と列にデータを表示できます。 macOS 10.7 以降では、Views を使用する必要があります。
Floats Group Rows - の場合 true、テーブルビューでは、グループ化されたセルがフローティングであるかのように描画されます。
列 - 表示される列の数を定義します。
ヘッダー - の場合 true、列にはヘッダーが含まれます。
並べ替え - の場合 true、ユーザーはテーブル内の列の並べ替えをドラッグできます。
サイズ変更 - の場合 true、ユーザーは列ヘッダーをドラッグして列のサイズを変更できます。
列のサイズ設定 - テーブルで列の自動サイズを設定する方法を制御します。
強調表示 - セルを選択したときに使用するテーブルの強調表示の種類を制御します。
代替行 - の場合 true、他の行の背景色が異なります。
[水平グリッド ] - セル間に水平方向に描画される罫線の種類を選択します。
[垂直グリッド ] - セル間に垂直方向に描画される罫線の種類を選択します。
[グリッドの色] - セルの境界線の色を設定します。
背景 - セルの背景色を設定します。
選択 - ユーザーがテーブル内のセルを次のように選択する方法を制御できます。
- 複数 - の場合 true、ユーザーは複数の行と列を選択できます。
- 列 - の場合 true、ユーザーは列を選択できます。
- 「選択 」 - の場合 true、ユーザーは文字を入力して行を選択できます。
- 空 - の場合 true、ユーザーは行または列を選択する必要はありません。テーブルでは、まったく選択できません。
自動保存 - テーブル形式が自動的に保存される名前。
列情報 - の場合 true、列の順序と幅が自動的に保存されます。
[改行] - セルが改行を処理する方法を選択します。
最後に表示される行を切り捨てる - の場合 true、セルはデータ内で切り捨てられ、境界内に収まりません。

重要

従来の Xamarin.Mac アプリケーションを維持している場合を除き、 NSView ベースのテーブルビューに対してベースのテーブルビューを NSCell 使用する必要があります。 NSCell はレガシと見なされ、今後サポートされない可能性があります。

インターフェイス階層でテーブル列を選択すると、属性インスペクターで次のプロパティを使用できます。

Title - 列のタイトルを設定します。
[配置 ] - セル内のテキストの配置を設定します。
タイトルフォント - セルのヘッダーテキストのフォントを選択します。
並べ替えキー - 列のデータを並べ替えるために使用されるキーです。ユーザーがこの列を並べ替えることができない場合は、空白のままにします。
セレクター - 並べ替えを実行するために使用される アクション です。ユーザーがこの列を並べ替えることができない場合は、空白のままにします。
Order - 列データの並べ替え順序です。
[サイズ変更] - 列のサイズ変更の種類を選択します。
編集可能 - の場合 true、ユーザーはセルベースのテーブル内のセルを編集できます。
非表示 - の場合 true、列は非表示になります。

また、ハンドル (列の右側の垂直方向の中央) を左または右にドラッグして、列のサイズを変更することもできます。

テーブルビューで各列を選択し、最初の列に Title と 2 番目DetailsのProduct列を指定します。

インターフェイス階層でテーブルセルビュー (NSTableViewCell) を選択すると、属性インスペクターで次のプロパティを使用できます。

これらはすべて標準ビューのプロパティです。この列の行のサイズを変更することもできます。

[インターフェイス階層] で [テーブルビュー] セル (既定ではこれが NSTextFieldです) を選択すると、属性インスペクターで次のプロパティを使用できます。

ここで設定する標準テキストフィールドのすべてのプロパティがあります。既定では、標準のテキストフィールドを使用して、列内のセルのデータを表示します。

インターフェイス階層でテーブルセルビュー (NSTableFieldCell) を選択すると、属性インスペクターで次のプロパティを使用できます。

ここで最も重要な設定は次のとおりです。

レイアウト - この列のセルのレイアウト方法を選択します。
単一行モードを使用 する - の場合 true、セルは 1 行に制限されます。
First Runtime Layout Width - の場合 true、アプリケーションの初回実行時にセルが表示されるときに、セルに設定された幅 (手動または自動) が優先されます。
Action - セルに対して編集 アクション が送信されるタイミングを制御します。
動作 - セルが選択可能か編集可能か定義します。
リッチテキスト - の場合 true、セルには書式設定されたテキストとスタイル設定されたテキストを表示できます。
元に戻す - の場合 true、セルは元に戻す動作の責任を負います。

インターフェイス階層のテーブル列の下部にあるテーブルセルビュー (NSTableFieldCell) を選択します。

これにより、特定の列に対して作成されたすべてのセルの基本 パターン として使用されるテーブルセルビューを編集できます。

アクションとアウトレットの追加

他の Cocoa UI コントロールと同様に、(必要な機能に基づいて) Actions と Outlet を 使用して、テーブルビューと列とセルを C# コードに公開する必要があります。

このプロセスは、公開する Table View 要素と同じです。

アシスタントエディターに切り替え、ファイルがViewController.h選択されていることを確認します。
インターフェイス階層からテーブルビューを選択し、control キーを押しながらクリックしてファイルにViewController.hドラッグします。
という名前ProductTableのテーブルビューのアウトレットを作成します。
と呼ばれるProductColumnDetailsColumnテーブル列のアウトレットを作成します。
変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、アプリケーションの実行時にテーブルのデータを表示するコードを記述します。

テーブルビューの設定

Interface Builder で設計され 、Outlet 経由で公開されたテーブルビューを使用して、次に C# コードを作成して設定する必要があります。

まず、個々の行の情報を保持する新しい Product クラスを作成しましょう。 ソリューションエクスプローラーで[プロジェクト]を右クリックし、[新しいファイルの追加>]を選択します。[全般>空のクラス] を選択し、[名前] に「」と入力Productし、[新規作成] ボタンをクリックします。

ファイルを Product.cs 次のようにします。

using System;

namespace MacTables
{
  public class Product
  {
    #region Computed Properties
    public string Title { get; set;} = "";
    public string Description { get; set;} = "";
    #endregion

    #region Constructors
    public Product ()
    {
    }

    public Product (string title, string description)
    {
      this.Title = title;
      this.Description = description;
    }
    #endregion
  }
}

次に、の NSTableDataSource サブクラスを作成して、要求されたとおりにテーブルのデータを提供する必要があります。 ソリューションエクスプローラーで[プロジェクト]を右クリックし、[新しいファイルの追加>]を選択します。[全般>空のクラス] を選択し、[名前] に「」と入力ProductTableDataSourceし、[新規作成] ボタンをクリックします。

ファイルを ProductTableDataSource.cs 編集し、次のようにします。

using System;
using AppKit;
using CoreGraphics;
using Foundation;
using System.Collections;
using System.Collections.Generic;

namespace MacTables
{
  public class ProductTableDataSource : NSTableViewDataSource
  {
    #region Public Variables
    public List<Product> Products = new List<Product>();
    #endregion

    #region Constructors
    public ProductTableDataSource ()
    {
    }
    #endregion

    #region Override Methods
    public override nint GetRowCount (NSTableView tableView)
    {
      return Products.Count;
    }
    #endregion
  }
}

このクラスは、テーブルビューの項目のストレージを持ち、を GetRowCount オーバーライドしてテーブル内の行数を返します。

最後に、のサブクラス NSTableDelegate を作成して、テーブルの動作を提供する必要があります。 ソリューションエクスプローラーで[プロジェクト]を右クリックし、[新しいファイルの追加>]を選択します。[全般>空のクラス] を選択し、[名前] に「」と入力ProductTableDelegateし、[新規作成] ボタンをクリックします。

ファイルを ProductTableDelegate.cs 編集し、次のようにします。

using System;
using AppKit;
using CoreGraphics;
using Foundation;
using System.Collections;
using System.Collections.Generic;

namespace MacTables
{
  public class ProductTableDelegate: NSTableViewDelegate
  {
    #region Constants 
    private const string CellIdentifier = "ProdCell";
    #endregion

    #region Private Variables
    private ProductTableDataSource DataSource;
    #endregion

    #region Constructors
    public ProductTableDelegate (ProductTableDataSource datasource)
    {
      this.DataSource = datasource;
    }
    #endregion

    #region Override Methods
    public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
    {
      // This pattern allows you reuse existing views when they are no-longer in use.
      // If the returned view is null, you instance up a new view
      // If a non-null view is returned, you modify it enough to reflect the new data
      NSTextField view = (NSTextField)tableView.MakeView (CellIdentifier, this);
      if (view == null) {
        view = new NSTextField ();
        view.Identifier = CellIdentifier;
        view.BackgroundColor = NSColor.Clear;
        view.Bordered = false;
        view.Selectable = false;
        view.Editable = false;
      }

      // Setup view based on the column selected
      switch (tableColumn.Title) {
      case "Product":
        view.StringValue = DataSource.Products [(int)row].Title;
        break;
      case "Details":
        view.StringValue = DataSource.Products [(int)row].Description;
        break;
      }

      return view;
    }
    #endregion
  }
}

の ProductTableDelegateインスタンスを作成するとき、テーブルのデータを提供するの ProductTableDataSource インスタンスも渡します。メソッドは GetViewForItem 、give 列と行のセルを表示するビュー (データ) を返す役割を担います。可能であれば、新しいビューを作成する必要がない場合は、既存のビューを再利用してセルを表示します。

テーブルにデータを入力するには、ファイルを ViewController.cs 編集し、メソッドを AwakeFromNib 次のようにします。

public override void AwakeFromNib ()
{
  base.AwakeFromNib ();

  // Create the Product Table Data Source and populate it
  var DataSource = new ProductTableDataSource ();
  DataSource.Products.Add (new Product ("Xamarin.iOS", "Allows you to develop native iOS Applications in C#"));
  DataSource.Products.Add (new Product ("Xamarin.Android", "Allows you to develop native Android Applications in C#"));
  DataSource.Products.Add (new Product ("Xamarin.Mac", "Allows you to develop Mac native Applications in C#"));

  // Populate the Product Table
  ProductTable.DataSource = DataSource;
  ProductTable.Delegate = new ProductTableDelegate (DataSource);
}

アプリケーションを実行すると、次のように表示されます。

列による並べ替え

列ヘッダーをクリックして、テーブル内のデータを並べ替えることをユーザーに許可しましょう。まず、ファイルを Main.storyboard ダブルクリックして、インターフェイスビルダーで編集用に開きます。列を選択しProduct、並べ替えキーに「」と入力Titleし、[ compare:セレクター] に「Order」を選択Ascendingします。

列を選択しDetails、並べ替えキーに「」と入力Descriptionし、[ compare:セレクター] に「Order」を選択Ascendingします。

変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、ファイルを ProductTableDataSource.cs 編集し、次のメソッドを追加します。

public void Sort(string key, bool ascending) {

  // Take action based on key
  switch (key) {
  case "Title":
    if (ascending) {
      Products.Sort ((x, y) => x.Title.CompareTo (y.Title));
    } else {
      Products.Sort ((x, y) => -1 * x.Title.CompareTo (y.Title));
    }
    break;
  case "Description":
    if (ascending) {
      Products.Sort ((x, y) => x.Description.CompareTo (y.Description));
    } else {
      Products.Sort ((x, y) => -1 * x.Description.CompareTo (y.Description));
    }
    break;
  }

}

public override void SortDescriptorsChanged (NSTableView tableView, NSSortDescriptor[] oldDescriptors)
{
  // Sort the data
  if (oldDescriptors.Length > 0) {
    // Update sort
    Sort (oldDescriptors [0].Key, oldDescriptors [0].Ascending);
  } else {
    // Grab current descriptors and update sort
    NSSortDescriptor[] tbSort = tableView.SortDescriptors; 
    Sort (tbSort[0].Key, tbSort[0].Ascending); 
  }
      
  // Refresh table
  tableView.ReloadData ();
}

Sortメソッドを使用すると、指定Productされたクラスフィールドに基づいて、データソース内のデータを昇順または降順で並べ替えることができます。オーバーライドされた SortDescriptorsChanged メソッドは、使用が列見出しをクリックするたびに呼び出されます。インターフェイスビルダーで設定した Key 値と、その列の並べ替え順序が渡されます。

アプリケーションを実行して [列ヘッダー] をクリックすると、行はその列で並べ替えられます。

行の選択

ユーザーが 1 つの行を選択できるようにする場合は、ファイルを Main.storyboard ダブルクリックして、インターフェイスビルダーで編集用に開きます。 [インターフェイス階層] で [テーブルビュー] を選択し、[属性インスペクター] の [複数] チェックボックスをオフにします。

変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、ファイルを ProductTableDelegate.cs 編集し、次のメソッドを追加します。

public override bool ShouldSelectRow (NSTableView tableView, nint row)
{
  return true;
}

これにより、ユーザーはテーブルビュー内の任意の行を選択できます。 ShouldSelectRowユーザーが選択できないようにする行のを返します。ユーザーfalseが行を選択できないようにする場合は、すべての行に対してを返falseします。

テーブルビュー (NSTableView) には、行の選択を操作するための次のメソッドが含まれています。

DeselectRow(nint) - テーブル内の指定された行の選択を解除します。
SelectRow(nint,bool) - 指定された行を選択します。 2 番目のパラメーターにを渡 false して、一度に 1 つの行のみを選択します。
SelectedRow - テーブルで選択されている現在の行を返します。
IsRowSelected(nint) - 指定された true 行が選択されている場合はを返します。

複数行選択

ユーザーが複数の行を選択できるようにする場合は、ファイルを Main.storyboard ダブルクリックして、インターフェイスビルダーで編集用に開きます。 [インターフェイス階層] の [テーブルビュー] を選択し、[属性インスペクター] の [複数] チェックボックスをチェックします。

変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、ファイルを ProductTableDelegate.cs 編集し、次のメソッドを追加します。

public override bool ShouldSelectRow (NSTableView tableView, nint row)
{
  return true;
}

テーブルビュー (NSTableView) には、行の選択を操作するための次のメソッドが含まれています。

DeselectAll(NSObject) - テーブル内のすべての行の選択を解除します。選択を行うオブジェクトで送信する最初のパラメーターにを使用 this します。
DeselectRow(nint) - テーブル内の指定された行の選択を解除します。
SelectAll(NSobject) - テーブル内のすべての行を選択します。選択を行うオブジェクトで送信する最初のパラメーターにを使用 this します。
SelectRow(nint,bool) - 指定された行を選択します。 2 番目のパラメーターに渡すと false 、選択範囲がクリアされ、1 つの行のみを選択し、を渡 true して選択範囲を拡張し、この行を含めます。
SelectRows(NSIndexSet,bool) - 指定された行セットを選択します。 2 番目のパラメーターに渡す false 選択範囲をクリアし、これらの行のみを選択し、を渡 true して選択範囲を拡張し、これらの行を含めます。
SelectedRow - テーブルで選択されている現在の行を返します。
SelectedRows - 選択した行のインデックスを含むを返 NSIndexSet します。
SelectedRowCount - 選択した行の数を返します。
IsRowSelected(nint) - 指定された true 行が選択されている場合はを返します。

行を選択するタイプ

ユーザーが [テーブルビュー] を選択して文字を入力し、その文字を含む最初の行を選択できるようにする場合は、ファイルを Main.storyboard ダブルクリックしてインターフェイスビルダーで編集用に開きます。 インターフェイス階層のテーブルビューを選択し、[属性インスペクター] の [種類の選択] チェックボックスをチェックします。

変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、ファイルを ProductTableDelegate.cs 編集し、次のメソッドを追加します。

public override nint GetNextTypeSelectMatch (NSTableView tableView, nint startRow, nint endRow, string searchString)
{
  nint row = 0;
  foreach(Product product in DataSource.Products) {
    if (product.Title.Contains(searchString)) return row;

    // Increment row counter
    ++row;
  }

  // If not found select the first row
  return 0;
}

メソッドはGetNextTypeSelectMatch、指定searchStringされたを受け取り、その文字列Titleがの最初Productの行を返します。

アプリケーションを実行して文字を入力すると、行が選択されます。

列の並べ替え

ユーザーがテーブルビューで列の並べ替えをドラッグできるようにする場合は、ファイルを Main.storyboard ダブルクリックして、インターフェイスビルダーで編集用に開きます。 インターフェイス階層のテーブルビューを選択し、属性インスペクターの [並べ替え] チェックボックスをチェックします。

[自動保存] プロパティの値を指定し、[列情報] フィールドをチェックすると、テーブルのレイアウトに加えた変更はすべて自動的に保存され、次回アプリケーションが実行されるときに復元されます。

変更を保存し、Visual Studio for Macに戻って Xcode と同期します。

次に、ファイルを ProductTableDelegate.cs 編集し、次のメソッドを追加します。

public override bool ShouldReorder (NSTableView tableView, nint columnIndex, nint newColumnIndex)
{
  return true;
}

メソッドは ShouldReorder 、にドラッグ並べ替えを許可する列に対してを返 true す必要があります。それ以外の場合はを newColumnIndex返します false。

アプリケーションを実行する場合は、列ヘッダーをドラッグして列の順序を変更できます。

セルの編集

ユーザーが特定のセルの値を編集できるようにする場合は、ファイルを ProductTableDelegate.cs 編集し、次のようにメソッドを GetViewForItem 変更します。

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{
  // This pattern allows you reuse existing views when they are no-longer in use.
  // If the returned view is null, you instance up a new view
  // If a non-null view is returned, you modify it enough to reflect the new data
  NSTextField view = (NSTextField)tableView.MakeView (tableColumn.Title, this);
  if (view == null) {
    view = new NSTextField ();
    view.Identifier = tableColumn.Title;
    view.BackgroundColor = NSColor.Clear;
    view.Bordered = false;
    view.Selectable = false;
    view.Editable = true;

    view.EditingEnded += (sender, e) => {
          
      // Take action based on type
      switch(view.Identifier) {
      case "Product":
        DataSource.Products [(int)view.Tag].Title = view.StringValue;
        break;
      case "Details":
        DataSource.Products [(int)view.Tag].Description = view.StringValue;
        break; 
      }
    };
  }

  // Tag view
  view.Tag = row;

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.StringValue = DataSource.Products [(int)row].Title;
    break;
  case "Details":
    view.StringValue = DataSource.Products [(int)row].Description;
    break;
  }

  return view;
}

アプリケーションを実行すると、ユーザーはテーブルビューのセルを編集できます。

テーブルビューでのイメージの使用

にセル NSTableViewの一部として画像を含めるには、テーブルビュー NSTableViewDelegate'sGetViewForItem のメソッドによってデータが返される方法を変更して、一般的なではなくを NSTableCellView 使用する必要があります NSTextField。次に例を示します。

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

  // This pattern allows you reuse existing views when they are no-longer in use.
  // If the returned view is null, you instance up a new view
  // If a non-null view is returned, you modify it enough to reflect the new data
  NSTableCellView view = (NSTableCellView)tableView.MakeView (tableColumn.Title, this);
  if (view == null) {
    view = new NSTableCellView ();
    if (tableColumn.Title == "Product") {
      view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
      view.AddSubview (view.ImageView);
      view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
    } else {
      view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
    }
    view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
    view.AddSubview (view.TextField);
    view.Identifier = tableColumn.Title;
    view.TextField.BackgroundColor = NSColor.Clear;
    view.TextField.Bordered = false;
    view.TextField.Selectable = false;
    view.TextField.Editable = true;

    view.TextField.EditingEnded += (sender, e) => {

      // Take action based on type
      switch(view.Identifier) {
      case "Product":
        DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
        break;
      case "Details":
        DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
        break; 
      }
    };
  }

  // Tag view
  view.TextField.Tag = row;

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.ImageView.Image = NSImage.ImageNamed ("tags.png");
    view.TextField.StringValue = DataSource.Products [(int)row].Title;
    break;
  case "Details":
    view.TextField.StringValue = DataSource.Products [(int)row].Description;
    break;
  }

  return view;
}

詳細については、画像の操作に関するドキュメントの「テーブルビューでのイメージの使用」セクションを参照してください。

行への削除ボタンの追加

アプリの要件に基づいて、テーブルの各行にアクションボタンを指定する必要がある場合があります。この例として、上で作成したテーブルビューの例を展開して、各行に [削除] ボタンを含めます。

まず、Xcode のインターフェイスビルダーでを Main.storyboard 編集し、テーブルビューを選択し、列の数を 3 に増やします。次に、新しい列の タイトル をに Action変更します。

ストーリーボードに変更を保存し、Visual Studio for Macに戻って変更を同期します。

次に、ファイルを ViewController.cs 編集し、次のパブリックメソッドを追加します。

public void ReloadTable ()
{
  ProductTable.ReloadData ();
}

同じファイルで、メソッド内での新しいテーブルビューデリゲートの作成を ViewDidLoad 次のように変更します。

// Populate the Product Table
ProductTable.DataSource = DataSource;
ProductTable.Delegate = new ProductTableDelegate (this, DataSource);

次に ProductTableDelegate.cs 、ビューコントローラーへのプライベート接続を含め、デリゲートの新しいインスタンスを作成するときにコントローラーをパラメーターとして受け取るようにファイルを編集します。

#region Private Variables
private ProductTableDataSource DataSource;
private ViewController Controller;
#endregion

#region Constructors
public ProductTableDelegate (ViewController controller, ProductTableDataSource datasource)
{
  this.Controller = controller;
  this.DataSource = datasource;
}
#endregion

次に、次の新しいプライベートメソッドをクラスに追加します。

private void ConfigureTextField (NSTableCellView view, nint row)
{
  // Add to view
  view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
  view.AddSubview (view.TextField);

  // Configure
  view.TextField.BackgroundColor = NSColor.Clear;
  view.TextField.Bordered = false;
  view.TextField.Selectable = false;
  view.TextField.Editable = true;

  // Wireup events
  view.TextField.EditingEnded += (sender, e) => {

    // Take action based on type
    switch (view.Identifier) {
    case "Product":
      DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
      break;
    case "Details":
      DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
      break;
    }
  };

  // Tag view
  view.TextField.Tag = row;
}

これにより、メソッドで GetViewForItem 以前に実行されていたすべてのテキストビュー構成が取得され、1 つの呼び出し可能な場所に配置されます (テーブルの最後の列にはテキストビューではなくボタンが含まれるため)。

最後に、メソッドを GetViewForItem 編集し、次のようになります。

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

  // This pattern allows you reuse existing views when they are no-longer in use.
  // If the returned view is null, you instance up a new view
  // If a non-null view is returned, you modify it enough to reflect the new data
  NSTableCellView view = (NSTableCellView)tableView.MakeView (tableColumn.Title, this);
  if (view == null) {
    view = new NSTableCellView ();

    // Configure the view
    view.Identifier = tableColumn.Title;

    // Take action based on title
    switch (tableColumn.Title) {
    case "Product":
      view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
      view.AddSubview (view.ImageView);
      view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
      ConfigureTextField (view, row);
      break;
    case "Details":
      view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
      ConfigureTextField (view, row);
      break;
    case "Action":
      // Create new button
      var button = new NSButton (new CGRect (0, 0, 81, 16));
      button.SetButtonType (NSButtonType.MomentaryPushIn);
      button.Title = "Delete";
      button.Tag = row;

      // Wireup events
      button.Activated += (sender, e) => {
        // Get button and product
        var btn = sender as NSButton;
        var product = DataSource.Products [(int)btn.Tag];

        // Configure alert
        var alert = new NSAlert () {
          AlertStyle = NSAlertStyle.Informational,
          InformativeText = $"Are you sure you want to delete {product.Title}? This operation cannot be undone.",
          MessageText = $"Delete {product.Title}?",
        };
        alert.AddButton ("Cancel");
        alert.AddButton ("Delete");
        alert.BeginSheetForResponse (Controller.View.Window, (result) => {
          // Should we delete the requested row?
          if (result == 1001) {
            // Remove the given row from the dataset
            DataSource.Products.RemoveAt((int)btn.Tag);
            Controller.ReloadTable ();
          }
        });
      };

      // Add to view
      view.AddSubview (button);
      break;
    }

  }

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.ImageView.Image = NSImage.ImageNamed ("tag.png");
    view.TextField.StringValue = DataSource.Products [(int)row].Title;
    view.TextField.Tag = row;
    break;
  case "Details":
    view.TextField.StringValue = DataSource.Products [(int)row].Description;
    view.TextField.Tag = row;
    break;
  case "Action":
    foreach (NSView subview in view.Subviews) {
      var btn = subview as NSButton;
      if (btn != null) {
        btn.Tag = row;
      }
    }
    break;
  }

  return view;
}

このコードのいくつかのセクションを詳しく見てみましょう。最初に、新 NSTableViewCell しいアクションが作成されている場合は、 Column の名前に基づいてアクションが実行されます。最初の 2 つの列 (Product と Details) では、新しい ConfigureTextField メソッドが呼び出されます。

[アクション] 列では、新NSButtonしいが作成され、サブビューとしてセルに追加されます。

// Create new button
var button = new NSButton (new CGRect (0, 0, 81, 16));
button.SetButtonType (NSButtonType.MomentaryPushIn);
button.Title = "Delete";
button.Tag = row;
...

// Add to view
view.AddSubview (button);

Button の Tag プロパティは、現在処理中の Row の番号を保持するために使用されます。この番号は、ユーザーが Button Activated のイベントで行の削除を要求したときに後で使用されます。

// Wireup events
button.Activated += (sender, e) => {
  // Get button and product
  var btn = sender as NSButton;
  var product = DataSource.Products [(int)btn.Tag];

  // Configure alert
  var alert = new NSAlert () {
    AlertStyle = NSAlertStyle.Informational,
    InformativeText = $"Are you sure you want to delete {product.Title}? This operation cannot be undone.",
    MessageText = $"Delete {product.Title}?",
  };
  alert.AddButton ("Cancel");
  alert.AddButton ("Delete");
  alert.BeginSheetForResponse (Controller.View.Window, (result) => {
    // Should we delete the requested row?
    if (result == 1001) {
      // Remove the given row from the dataset
      DataSource.Products.RemoveAt((int)btn.Tag);
      Controller.ReloadTable ();
    }
  });
};

イベントハンドラーの開始時に、ボタンと、指定されたテーブル行にある製品を取得します。その後、行の削除を確認するアラートがユーザーに表示されます。ユーザーが行の削除を選択すると、指定された行がデータソースから削除され、テーブルが再読み込みされます。

// Remove the given row from the dataset
DataSource.Products.RemoveAt((int)btn.Tag);
Controller.ReloadTable ();

最後に、テーブルビューセルが新規作成されるのではなく再利用されている場合、次のコードは、処理される列に基づいて構成します。

// Setup view based on the column selected
switch (tableColumn.Title) {
case "Product":
  view.ImageView.Image = NSImage.ImageNamed ("tag.png");
  view.TextField.StringValue = DataSource.Products [(int)row].Title;
  view.TextField.Tag = row;
  break;
case "Details":
  view.TextField.StringValue = DataSource.Products [(int)row].Description;
  view.TextField.Tag = row;
  break;
case "Action":
  foreach (NSView subview in view.Subviews) {
    var btn = subview as NSButton;
    if (btn != null) {
      btn.Tag = row;
    }
  }
  break;
}

[アクション] 列では、が見つかるまでNSButtonすべてのサブビューがスキャンされ、現在のTag行を指すプロパティが更新されます。

これらの変更を行うと、アプリを実行すると、各行に [削除 ] ボタンが表示されます。

ユーザーが [削除 ] ボタンをクリックすると、指定された行を削除するように求めるアラートが表示されます。

ユーザーが削除を選択すると、行が削除され、テーブルが再描画されます。

データバインディングテーブルビュー

Xamarin.Mac アプリケーションでKey-Valueコーディングとデータバインディングの手法を使用すると、UI 要素を設定して操作するために記述および保守する必要があるコードの量を大幅に減らすことができます。また、バッキングデータ (データモデル) をフロントエンドユーザーインターフェイス (Model-View-Controller) からさらに切り離すことで、保守が容易になり、アプリケーション設計が柔軟になります。

Key-Valueコーディング (KVC) は、インスタンス変数またはアクセサーメソッド () を介してプロパティにアクセスするのではなく、キー (特別に書式設定された文字列) を使用してプロパティを識別して、オブジェクトのプロパティに間接的にアクセスするためのメカニズムですget/set。 Xamarin.Mac アプリケーションKey-Valueコーディングに準拠したアクセサーを実装することで、Key-Value Observing (KVO)、データバインディング、コアデータ、Cocoa バインディング、スクリプト機能などの他の macOS 機能にアクセスできます。

詳細については、データバインディングとコーディングに関するドキュメントの「テーブルビューのデータバインディング」セクションKey-Value 参照してください。

まとめ

この記事では、Xamarin.Mac アプリケーションでのテーブルビューの操作について詳しく説明しました。テーブルビューのさまざまな種類と使用方法、Xcode のインターフェイスビルダーでテーブルビューを作成および管理する方法、および C# コードでテーブルビューを操作する方法について説明しました。

Xamarin.Mac のテーブル ビュー

テーブル ビューの概要

Xcode でのテーブル ビューの作成と保守

アクションとアウトレットの追加

テーブル ビューの設定

列による並べ替え

行の選択

複数行選択

行を選択するタイプ

列の並べ替え

セルの編集

テーブル ビューでのイメージの使用

行への削除ボタンの追加

データ バインディング テーブル ビュー

まとめ

関連リンク

その他のリソース

Xamarin.Mac のテーブルビュー

テーブルビューの概要

Xcode でのテーブルビューの作成と保守

テーブルビューの設定

テーブルビューでのイメージの使用

データバインディングテーブルビュー