Tabellen Ansichten in xamarin. MacTable Views in Xamarin.Mac

In diesem Artikel wird das Arbeiten mit Tabellen Sichten in einer xamarin. Mac-Anwendung behandelt. Es beschreibt das Erstellen von Tabellen Sichten in Xcode und Interface Builder und die Interaktion mit Ihnen im Code.This article covers working with table views in a Xamarin.Mac application. It describes creating table views in Xcode and Interface Builder and interacting with them in code.

Wenn Sie mit c# und .net in einer xamarin. Mac-Anwendung arbeiten, haben Sie Zugriff auf die gleichen Tabellen Sichten, die von einem Entwickler in " Ziel-C " und Xcode verwendet werden.When working with C# and .NET in a Xamarin.Mac application, you have access to the same Table Views that a developer working in Objective-C and Xcode does. Da xamarin. Mac direkt in Xcode integriert ist, können Sie die Interface Builder von Xcode verwenden, um Tabellen Sichten zu erstellen und zu verwalten (oder Sie optional direkt in c#-Code zu erstellen).Because Xamarin.Mac integrates directly with Xcode, you can use Xcode's Interface Builder to create and maintain your Table Views (or optionally create them directly in C# code).

In einer Tabellen Sicht werden Daten in einem Tabellenformat angezeigt, das mindestens eine Spalte mit Informationen in mehreren Zeilen enthält.A Table View displays data in a tabular format containing one or more columns of information in multiple rows. Basierend auf dem Typ der zu erstellenden Tabellenansicht kann der Benutzer nach Spalte sortieren, Spalten neu organisieren, Spalten hinzufügen, Spalten entfernen oder die in der Tabelle enthaltenen Daten bearbeiten.Based on the type of Table View being created, the user can sort by column, reorganize columns, add columns, remove columns or edit the data contained within the table.

Beispiel TabelleAn example table

In diesem Artikel werden die Grundlagen der Arbeit mit Tabellen Sichten in einer xamarin. Mac-Anwendung behandelt.In this article, we'll cover the basics of working with Table Views in a Xamarin.Mac application. Es wird dringend empfohlen, dass Sie zunächst den Artikel Hello, Mac , insbesondere die Einführung in Xcode und die Abschnitte zu Interface Builder und Outlets und Aktionen , durcharbeiten, da er wichtige Konzepte und Techniken behandelt, die wir in diesem Artikel verwenden werden.It is highly suggested that you work through the Hello, Mac article first, specifically the Introduction to Xcode and Interface Builder and Outlets and Actions sections, as it covers key concepts and techniques that we'll be using in this article.

Lesen Sie ggf. den Abschnitt verfügbar machen von c#-Klassen/-Methoden zu "Ziel-c " im Dokument " xamarin. Mac ". darin werden die Register -und-Befehle erläutert, die Export zum Verknüpfen ihrer c#-Klassen mit Ziel-c-Objekten und Benutzeroberflächen Elementen verwendet werden.You may want to take a look at the Exposing C# classes / methods to Objective-C section of the Xamarin.Mac Internals document as well, it explains the Register and Export commands used to wire-up your C# classes to Objective-C objects and UI Elements.

Einführung in Tabellen SichtenIntroduction to Table Views

In einer Tabellen Sicht werden Daten in einem Tabellenformat angezeigt, das mindestens eine Spalte mit Informationen in mehreren Zeilen enthält.A Table View displays data in a tabular format containing one or more columns of information in multiple rows. Tabellen Sichten werden in Bild Lauf Ansichten ( NSScrollView ) angezeigt. ab macOS 10,7 können Sie beliebige NSView anstelle von Zellen () verwenden, NSCell um Zeilen und Spalten anzuzeigen.Table Views are displayed inside of Scroll Views (NSScrollView) and starting with macOS 10.7, you can use any NSView instead of Cells (NSCell) to display both rows and columns. Das heißt, Sie können jedoch weiterhin verwenden NSCell . Sie werden in der Regel Unterklassen NSTableCellView und benutzerdefinierte Zeilen und Spalten erstellen.That said, you can still use NSCell however, you'll typically subclass NSTableCellView and create your custom rows and columns.

In einer Tabellen Sicht werden die eigenen Daten nicht gespeichert. stattdessen wird eine Datenquelle () verwendet, NSTableViewDataSource um sowohl die erforderlichen Zeilen als auch die Spalten bereitzustellen.A Table View does not store it's own data, instead it relies on a Data Source (NSTableViewDataSource) to provide both the rows and columns required, on a as-needed basis.

Das Verhalten einer Tabellenansicht kann angepasst werden, indem eine Unterklasse des Tabellen Ansichts Delegaten () bereitgestellt wird NSTableViewDelegate , um die Tabellen Spalten Verwaltung, den Typ zur Auswahl von Funktionen, die Zeilenauswahl und-Bearbeitung, die benutzerdefinierte Nachverfolgung und benutzerdefinierte Ansichten für einzelne Spalten und Zeilen zu unterstützenA Table View's behavior can be customized by providing a subclass of the Table View Delegate (NSTableViewDelegate) to support table column management, type to select functionality, row selection and editing, custom tracking, and custom views for individual columns and rows.

Beim Erstellen von Tabellen Sichten schlägt Apple folgendes vor:When creating Table Views, Apple suggests the following:

  • Ermöglicht dem Benutzer das Sortieren der Tabelle durch Klicken auf Spaltenüberschriften.Allow the user to sort the table by clicking on a Column Headers.
  • Erstellen Sie Spaltenüberschriften, bei denen es sich um Nomen oder kurze Substantiv-Ausdrücke handelt, die die in dieser Spalte angezeigten Daten beschreiben.Create Column Headers that are nouns or short noun phrases that describe the data being shown in that column.

Weitere Informationen finden Sie im Abschnitt " Inhalts Ansichten " in den Richtlinien für die Benutzeroberfläche von Apple OS X.For more information, please see the Content Views section of Apple's OS X Human Interface Guidelines.

Erstellen und warten von Tabellen Sichten in XcodeCreating and Maintaining Table Views in Xcode

Wenn Sie eine neue xamarin. Mac-Cocoa-Anwendung erstellen, erhalten Sie standardmäßig ein Standardmäßiges leeres Standardfenster.When you create a new Xamarin.Mac Cocoa application, you get a standard blank, window by default. Dieses Fenster wird in einer Datei definiert, .storyboard die automatisch im Projekt enthalten ist.This windows is defined in a .storyboard file automatically included in the project. Um den Windows-Entwurf zu bearbeiten, doppelklicken Sie im Projektmappen-Explorer auf die Main.storyboard Datei:To edit your windows design, in the Solution Explorer, double click the Main.storyboard file:

Auswählen des Haupt StoryboardsSelecting the main storyboard

Dadurch wird das Fensterdesign in der Interface Builder von Xcode geöffnet:This will open the window design in Xcode's Interface Builder:

Bearbeiten der Benutzeroberfläche in XcodeEditing the UI in Xcode

Geben table Sie im Suchfeld des Bibliotheks Inspektors ein, um die Suche nach den Tabellenansicht-Steuerelementen zu vereinfachen:Type table into the Library Inspector's Search Box to make it easier to find the Table View controls:

Auswählen einer Tabellenansicht aus der BibliothekSelecting a Table View from the Library

Ziehen Sie eine Tabellenansicht auf den Ansichts Controller im Schnittstellen-Editor, füllen Sie den Inhalts Bereich des Ansichts Controllers aus, und legen Sie ihn an der Stelle ab, an der er verkleinert wird und mit dem Fenster im Einschränkungs- Editor wächst:Drag a Table View onto the View Controller in the Interface Editor, make it fill the content area of the View Controller and set it to where it shrinks and grows with the window in the Constraint Editor:

Bearbeitungs EinschränkungenEditing constraints

Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und die folgenden Eigenschaften sind im Attribut Inspektor verfügbar:Select the Table View in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

Screenshot zeigt die Eigenschaften an, die im Attribut Inspektor verfügbar sind.Screenshot shows the properties available in the Attribute Inspector.

  • Inhalts Modus : ermöglicht es Ihnen, NSView NSCell die Daten in den Zeilen und Spalten entweder mithilfe von Sichten () oder Zellen () anzuzeigen.Content Mode - Allows you to use either Views (NSView) or Cells (NSCell) to display the data in the rows and columns. Ab macOS 10,7 sollten Sie Ansichten verwenden.Starting with macOS 10.7, you should use Views.
  • Gleit Komma Gruppen Zeilen : Wenn true , werden in der Tabellenansicht gruppierte Zellen so gezeichnet, als wären Sie unverankert.Floats Group Rows - If true, the Table View will draw grouped cells as if they are floating.
  • Columns : definiert die Anzahl der angezeigten Spalten.Columns - Defines the number of columns displayed.
  • Headers : Wenn true , enthalten die Spaltenheader.Headers - If true, the columns will have Headers.
  • Neuanordnen : Wenn true , kann der Benutzer die Reihenfolge der Spalten in der Tabelle verschieben.Reordering - If true, the user will be able to drag reorder the columns in the table.
  • Größen Änderung: Wenn true , kann der Benutzer Spaltenüberschriften ziehen, um die Größe der Spalten zu ändern.Resizing - If true, the user will be able to drag column Headers to resize columns.
  • Spaltengröße : steuert die automatische Größenanpassung von Spalten durch die Tabelle.Column Sizing - Controls how the table will auto size columns.
  • Hervor Hebung: steuert den Typ der Hervorhebung, die die Tabelle verwendet, wenn eine Zelle ausgewählt wird.Highlight - Controls the type of highlighting the table uses when a cell is selected.
  • Alternative Zeilen : Wenn true , hat eine andere Zeile eine andere Hintergrundfarbe.Alternate Rows - If true, ever other row will have a different background color.
  • Horizontales Raster : wählt den Typ des Rahmens aus, der zwischen Zellen horizontal gezeichnet wird.Horizontal Grid - Selects the type of border drawn between cells horizontally.
  • Vertikales Raster : wählt den Typ des Rahmens aus, der zwischen Zellen vertikal gezeichnet wird.Vertical Grid - Selects the type of border drawn between cells vertically.
  • Raster Farbe : legt die Farbe für den Zell Rahmen fest.Grid Color - Sets the cell border color.
  • Background : legt die Hintergrundfarbe der Zelle fest.Background - Sets the cell background color.
  • Auswahl : Hiermit können Sie steuern, wie der Benutzer Zellen in der Tabelle auswählen kann:Selection - Allow you to control how the user can select cells in the table as:
    • Multiple -if true , der Benutzer kann mehrere Zeilen und Spalten auswählen.Multiple - If true, the user can select multiple rows and columns.
    • Spalte : Wenn true , kann der Benutzer Spalten auswählen.Column - If true,the user can select columns.
    • Typ SELECT -if true , der Benutzer kann ein Zeichen eingeben, um eine Zeile auszuwählen.Type Select - If true, the user can type a character to select a row.
    • Leer : Wenn true , der Benutzer ist nicht erforderlich, um eine Zeile oder Spalte auszuwählen, kann die Tabelle überhaupt keine Auswahl treffen.Empty - If true, the user is not required to select a row or column, the table allows for no selection at all.
  • Autosave : der Name, unter dem das Tabellenformat automatisch gespeichert wird.Autosave - The name that the tables format is automatically save under.
  • Spalten Informationen : Wenn true , werden die Reihenfolge und Breite der Spalten automatisch gespeichert.Column Information - If true, the order and width of the columns will be automatically saved.
  • Zeilenumbrüche : Wählen Sie aus, wie die Zelle Zeilenumbrüche behandelt.Line Breaks - Select how the cell handles line breaks.
  • Abgeschnitten der letzten sichtbaren Zeile : Wenn true , wird die Zelle in den Daten abgeschnitten und kann nicht in die Grenzen passen.Truncates Last Visible Line - If true, the cell will be truncated in the data can not fit inside it's bounds.

Wichtig

Wenn Sie keine ältere xamarin. Mac-Anwendung verwalten, sollten Sie auf den Tabellen Sichten basierende Tabellen Sichten NSView verwenden NSCell .Unless you are maintaining a legacy Xamarin.Mac application, NSView based Table Views should be used over NSCell based Table Views. NSCell wird als Legacy angesehen und wird möglicherweise nicht weiter unterstützt.NSCell is considered legacy and may not be supported going forward.

Wählen Sie eine Tabellenspalte in der Schnittstellen Hierarchie aus, und die folgenden Eigenschaften sind im Attribut Inspektor verfügbar:Select a Table Column in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

Screenshot zeigt die Eigenschaften, die für eine Tabellenspalte im Attribut Inspektor verfügbar sind.Screenshot shows the properties available for a Table Column in the Attribute Inspector.

  • Title : legt den Titel der Spalte fest.Title - Sets the title of the column.
  • Ausrichtung : Legen Sie die Ausrichtung des Texts innerhalb der Zellen fest.Alignment - Set the alignment of the text within the cells.
  • Titel Schriftart : wählt die Schriftart für den Header Text der Zelle aus.Title Font - Selects the font for the cell's Header text.
  • Sortierschlüssel : der Schlüssel, der zum Sortieren der Daten in der Spalte verwendet wird.Sort Key - Is the key used to sort data in the column. Lassen Sie das Feld leer, wenn der Benutzer diese Spalte nicht sortieren kann.Leave blank if the user cannot sort this column.
  • Selector : ist die Aktion , die zum Ausführen der Sortierung verwendet wird.Selector - Is the Action used to perform the sort. Lassen Sie das Feld leer, wenn der Benutzer diese Spalte nicht sortieren kann.Leave blank if the user cannot sort this column.
  • Order : gibt die Sortierreihenfolge für die Spaltendaten an.Order - Is the sort order for the columns data.
  • Ändern der Größe : wählt den Typ der Größe der Größe für die Spalte aus.Resizing - Selects the type of resizing for the column.
  • Editable -if true , der Benutzer kann Zellen in einer Zellen basierten Tabelle bearbeiten.Editable - If true, the user can edit cells in a cell based table.
  • Hidden : Wenn true , wird die Spalte ausgeblendet.Hidden - If true, the column is hidden.

Sie können auch die Größe der Spalte ändern, indem Sie den Zieh Punkt (vertikal auf der rechten Seite der Spalte) nach links oder rechts ziehen.You can also resize the column by dragging it's handle (vertically centered on the column's right side) left or right.

Wählen Sie in der Tabellenansicht die einzelnen Spalten aus, und geben Sie der ersten Spalte den Titel Product und die zweite Spalte Details .Let's select the each Column in our Table View and give the first column a Title of Product and the second one Details.

Wählen Sie NSTableViewCell in der Schnittstellen Hierarchie eine Tabellenzellen Ansicht () aus, und die folgenden Eigenschaften sind im Attribut Inspektor verfügbar:Select a Table Cell View (NSTableViewCell) in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

Screenshot zeigt die Eigenschaften an, die für eine Tabellenzellen Ansicht im Attribut Inspektor verfügbar sind.Screenshot shows the properties available for a Table Cell View in the Attribute Inspector.

Dabei handelt es sich um alle Eigenschaften einer Standardansicht.These are all of the properties of a standard View. Sie haben auch die Möglichkeit, die Zeilen für diese Spalte hier zu ändern.You also have the option of resizing the rows for this column here.

Wählen Sie eine Tabellen Ansichts Zelle (standardmäßig eine NSTextField ) in der Schnittstellen Hierarchie aus, und die folgenden Eigenschaften sind im Attribut Inspektor verfügbar:Select a Table View Cell (by default, this is a NSTextField) in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

Screenshot zeigt die Eigenschaften, die für eine Tabellen Ansichts Zelle im Attribut Inspektor verfügbar sind.Screenshot shows the properties available for a Table View Cell in the Attribute Inspector.

Sie verfügen über alle Eigenschaften eines Standard Textfelds, das hier festgelegt werden soll.You'll have all the properties of a standard text field to set here. Standardmäßig wird ein Standard Textfeld verwendet, um Daten für eine Zelle in einer Spalte anzuzeigen.By default, a standard Text Field is used to display data for a cell in a column.

Wählen Sie NSTableFieldCell in der Schnittstellen Hierarchie eine Tabellenzellen Ansicht () aus, und die folgenden Eigenschaften sind im Attribut Inspektor verfügbar:Select a Table Cell View (NSTableFieldCell) in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

Screenshot zeigt die Eigenschaften, die für eine andere Tabellen Ansichts Zelle im Attribut Inspektor verfügbar sind.Screenshot shows the properties available for a different Table View Cell in the Attribute Inspector.

Die wichtigsten Einstellungen finden Sie hier:The most important settings here are:

  • Layout : Wählen Sie aus, wie Zellen in dieser Spalte angelegt werden.Layout - Select how cells in this column are laid out.
  • Verwendet den Einzeilenmodus : Wenn true der Wert ist, ist die Zelle auf eine einzelne Zeile beschränkt.Uses Single Line Mode - If true, the cell is limited to a single line.
  • Breite des ersten Lauf Zeit Layouts : Wenn true , wird die Zelle die für Sie festgelegte Breite (entweder manuell oder automatisch) bevorzugen, wenn Sie beim ersten Ausführen der Anwendung angezeigt wird.First Runtime Layout Width - If true, the cell will prefer the width set for it (either manually or automatically) when it is displayed the first time the application is run.
  • Action : steuert, wann die Bearbeitungs Aktion für die Zelle gesendet wird.Action - Controls when the Edit Action is sent for the cell.
  • Behavior : definiert, ob eine Zelle auswählbar ist oder bearbeitet werden kann.Behavior - Defines if a cell is selectable or editable.
  • Rich-Text : Wenn true , kann die Zelle formatierten und formatierten Text anzeigen.Rich Text - If true, the cell can display formatted and styled text.
  • Rückgängig -Wenn true , übernimmt die Zelle die Verantwortung für das rückgängig-Verhalten.Undo - If true, the cell assumes responsibility for it's undo behavior.

Wählen Sie die Tabellenzellen Ansicht ( NSTableFieldCell ) unten in einer Tabellenspalte in der Schnittstellen Hierarchie aus:Select the Table Cell View (NSTableFieldCell) at the bottom of a Table Column in the Interface Hierarchy:

Auswählen der Tabellenzellen AnsichtSelecting the Table Cell View

Dies ermöglicht es Ihnen, die Tabellenzellen Ansicht zu bearbeiten, die als Basis Muster für alle Zellen verwendet wird, die für die jeweilige Spalte erstellt werden.This allows you to edit the Table Cell View used as the base Pattern for all cells created for the given column.

Hinzufügen von Aktionen und OutletsAdding Actions and Outlets

Genau wie jedes andere Cocoa UI-Steuerelement müssen wir unsere Tabellenansicht und ihre Spalten und Zellen in c#-Code mithilfe von Aktionen und Outlets (basierend auf der erforderlichen Funktionalität) verfügbar machen.Just like any other Cocoa UI control, we need to expose our Table View and it's columns and cells to C# code using Actions and Outlets (based on the functionality required).

Der Prozess ist für jedes Tabellen Ansichts Element identisch, das wir verfügbar machen möchten:The process is the same for any Table View element that we want to expose:

  1. Wechseln Sie zum Assistenten-Editor , und stellen Sie sicher, dass die ViewController.h Datei ausgewählt ist:Switch to the Assistant Editor and ensure that the ViewController.h file is selected:

    Der Assistenten-EditorThe Assistant Editor

  2. Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und ziehen Sie Sie in die ViewController.h Datei.Select the Table View from the Interface Hierarchy, control-click and drag to the ViewController.h file.

  3. Erstellen Sie ein Outlet für die Tabellenansicht mit dem Namen ProductTable :Create an Outlet for the Table View called ProductTable:

    Screenshot zeigt eine für die Tabellenansicht mit dem Namen productfähig erstellte Outlet-Verbindung.Screenshot shows an Outlet connection created for the Table View named ProductTable.

  4. Erstellen Sie Outlets für die Tabellen Spalten ebenso wie ProductColumn und DetailsColumn :Create Outlets for the tables columns as well called ProductColumn and DetailsColumn:

    Screenshot zeigt eine für andere Tabellen Sichten erstellte Outlet-Verbindungen.Screenshot shows an Outlet connections created for other Table Views.

  5. Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save you changes and return to Visual Studio for Mac to sync with Xcode.

Als nächstes schreiben wir den Code zum Anzeigen einiger Daten für die Tabelle, wenn die Anwendung ausgeführt wird.Next, we'll write the code display some data for the table when the application is run.

Auffüllen der TabellenansichtPopulating the Table View

Wenn unsere Tabellenansicht in Interface Builder entworfen und über ein Outlet verfügbar gemacht wird, müssen Sie als nächstes den c#-Code erstellen, um ihn aufzufüllen.With our Table View designed in Interface Builder and exposed via an Outlet, next we need to create the C# code to populate it.

Zunächst erstellen wir eine neue Klasse, Product die die Informationen für die einzelnen Zeilen enthält.First, let's create a new Product class to hold the information for the individual rows. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie neue Datei Hinzufügen > ... aus. Wählen Sie Allgemeine > leere Klasse aus, geben Sie Product als Namen ein, und klicken Sie auf die Schaltfläche neu :In the Solution Explorer, right-click the Project and select Add > New File... Select General > Empty Class, enter Product for the Name and click the New button:

Erstellen einer leeren KlasseCreating an empty class

Erstellen Sie die Product.cs Datei wie folgt:Make the Product.cs file look like the following:

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
  }
}

Als nächstes müssen wir eine Unterklasse von erstellen, NSTableDataSource um die Daten für die Tabelle bereitzustellen, wie Sie angefordert wird.Next, we need to create a subclass of NSTableDataSource to provide the data for our table as it is requested. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie neue Datei Hinzufügen > ... aus. Wählen Sie Allgemeine > leere Klasse aus, geben Sie ProductTableDataSource als Namen ein, und klicken Sie auf die Schaltfläche neu .In the Solution Explorer, right-click the Project and select Add > New File... Select General > Empty Class, enter ProductTableDataSource for the Name and click the New button.

Bearbeiten ProductTableDataSource.cs Sie die Datei, und führen Sie Sie wie folgt aus:Edit the ProductTableDataSource.cs file and make it look like the following:

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
  }
}

Diese Klasse verfügt über Speicher für die Elemente der Tabellen Sicht und überschreibt die GetRowCount , um die Anzahl der Zeilen in der Tabelle zurückzugeben.This class has storage for our Table View's items and overrides the GetRowCount to return the number of rows in the table.

Zum Schluss muss eine Unterklasse von erstellt werden NSTableDelegate , um das Verhalten für die Tabelle bereitzustellen.Finally, we need to create a subclass of NSTableDelegate to provide the behavior for our table. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie neue Datei Hinzufügen > ... aus. Wählen Sie Allgemeine > leere Klasse aus, geben Sie ProductTableDelegate als Namen ein, und klicken Sie auf die Schaltfläche neu .In the Solution Explorer, right-click the Project and select Add > New File... Select General > Empty Class, enter ProductTableDelegate for the Name and click the New button.

Bearbeiten ProductTableDelegate.cs Sie die Datei, und führen Sie Sie wie folgt aus:Edit the ProductTableDelegate.cs file and make it look like the following:

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
  }
}

Wenn Sie eine Instanz von erstellen ProductTableDelegate , übergeben wir auch eine Instanz von ProductTableDataSource , die die Daten für die Tabelle bereitstellt.When we create an instance of the ProductTableDelegate, we also pass in an instance of the ProductTableDataSource that provides the data for the table. Die- GetViewForItem Methode ist dafür verantwortlich, eine Ansicht (Daten) zurückzugeben, um die Zelle für eine Spalte und eine Zeile mit dem Wert anzuzeigen.The GetViewForItem method is responsible for returning a view (data) to display the cell for a give column and row. Wenn möglich, wird eine vorhandene Ansicht wieder verwendet, um die Zelle anzuzeigen, wenn keine neue Ansicht erstellt werden muss.If possible, an existing view will be reused to display the cell, if not a new view must be created.

Um die Tabelle aufzufüllen, bearbeiten Sie die ViewController.cs Datei, und führen Sie die AwakeFromNib Methode wie folgt aus:To populate the table, let's edit the ViewController.cs file and make the AwakeFromNib method look like the following:

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);
}

Wenn die Anwendung ausgeführt wird, wird Folgendes angezeigt:If we run the application, the following is displayed:

Screenshot zeigt ein Fenster mit dem Namen Product Table mit drei Einträgen an.Screenshot shows a window named Product Table with three entries.

Sortieren nach SpalteSorting by Column

Lassen Sie den Benutzer das Sortieren der Daten in der Tabelle zu, indem Sie auf eine Spaltenüberschrift klicken.Let's allow the user to sort the data in the table by clicking on a Column Header. Doppelklicken Sie zunächst auf die Main.storyboard Datei, um Sie zur Bearbeitung in Interface Builder zu öffnen.First, double-click the Main.storyboard file to open it for editing in Interface Builder. Wählen Sie die Product Spalte aus, geben Sie für den Title Sortierschlüssel compare: für die Auswahl ein, und wählen Sie Ascending für die Reihenfolge aus:Select the Product column, enter Title for the Sort Key, compare: for the Selector and select Ascending for the Order:

Screenshot zeigt die Interface Builder, in der Sie den Sortierschlüssel für die Product-Spalte festlegen können.Screenshot shows the Interface Builder where you can set the sort key for the Product column.

Wählen Sie die Details Spalte aus, geben Sie für den Description Sortierschlüssel compare: für die Auswahl ein, und wählen Sie Ascending für die Reihenfolge aus:Select the Details column, enter Description for the Sort Key, compare: for the Selector and select Ascending for the Order:

Screenshot zeigt die Interface Builder, in der Sie den Sortierschlüssel für die Spalte "Details" festlegen können.Screenshot shows the Interface Builder where you can set the sort key for the Details column.

Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save your changes and return to Visual Studio for Mac to sync with Xcode.

Bearbeiten Sie nun die ProductTableDataSource.cs Datei, und fügen Sie die folgenden Methoden hinzu:Now let's edit the ProductTableDataSource.cs file and add the following methods:

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 ();
}

Mit der- Sort Methode können wir die Daten in der Datenquelle auf der Grundlage eines angegebenen Product Klassen Felds in aufsteigender oder absteigender Reihenfolge sortieren.The Sort method allow us to sort the data in the Data Source based on a given Product class field in either ascending or descending order. Die überschriebene- SortDescriptorsChanged Methode wird jedes Mal aufgerufen, wenn die Verwendung auf eine Spaltenüberschrift klickt.The overridden SortDescriptorsChanged method will be called every time the use clicks on a Column Heading. Der Schlüssel Wert, den wir in Interface Builder festgelegt haben, und die Sortierreihenfolge für diese Spalte werden an Sie übermittelt.It will be passed the Key value that we set in Interface Builder and the sort order for that column.

Wenn Sie die Anwendung ausführen und in die Spaltenüberschriften klicken, werden die Zeilen nach dieser Spalte sortiert:If we run the application and click in the Column Headers, the rows will be sorted by that column:

Ein Beispiel für eine APP-LaufzeitAn example app run

ZeilenauswahlRow Selection

Wenn Sie dem Benutzer die Auswahl einer einzelnen Zeile gestatten möchten, doppelklicken Sie auf die Main.storyboard Datei, um Sie für die Bearbeitung in Interface Builder zu öffnen.If you want to allow the user to select a single row, double-click the Main.storyboard file to open it for editing in Interface Builder. Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und deaktivieren Sie das Kontrollkästchen mehrfach im Attribut Inspektor:Select the Table View in the Interface Hierarchy and uncheck the Multiple checkbox in the Attribute Inspector:

Screenshot zeigt die Interface Builder, in der Sie mehrere in der Attribut Analyse auswählen können.Screenshot shows the Interface Builder where you can select Multiple in the Attribute Inspector.

Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save your changes and return to Visual Studio for Mac to sync with Xcode.

Bearbeiten Sie anschließend die ProductTableDelegate.cs Datei, und fügen Sie die folgende Methode hinzu:Next, edit the ProductTableDelegate.cs file and add the following method:

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

Dadurch kann der Benutzer eine beliebige einzelne Zeile in der Tabellenansicht auswählen.This will allow the user to select any single row in the Table View. Geben Sie false für ShouldSelectRow jede Zeile, die der Benutzer nicht auswählen kann, oder false für jede Zeile zurück, wenn der Benutzer nicht in der Lage sein soll, Zeilen auszuwählen.Return false for the ShouldSelectRow for any row that you don't want the user to be able to select or false for every row if you don't want the user to be able to select any rows.

Die Tabellen Sicht ( NSTableView ) enthält die folgenden Methoden zum Arbeiten mit der Zeilenauswahl:The Table View (NSTableView) contains the following methods for working with row selection:

  • DeselectRow(nint) -Deaktiviert die angegebene Zeile in der Tabelle.DeselectRow(nint) - Deselects the given row in the table.
  • SelectRow(nint,bool) : Wählt die angegebene Zeile aus.SelectRow(nint,bool) - Selects the given row. Übergeben false Sie für den zweiten Parameter, um jeweils nur eine Zeile auszuwählen.Pass false for the second parameter to select only one row at a time.
  • SelectedRow : Gibt die in der Tabelle ausgewählte aktuelle Zeile zurück.SelectedRow - Returns the current row selected in the table.
  • IsRowSelected(nint) -Gibt zurück, true Wenn die angegebene Zeile ausgewählt ist.IsRowSelected(nint) - Returns true if the given row is selected.

Auswahl mehrerer ZeilenMultiple Row Selection

Wenn Sie zulassen möchten, dass der Benutzer mehrere Zeilen auswählt, doppelklicken Sie Main.storyboard auf die Datei, um Sie für die Bearbeitung in Interface Builder zu öffnen.If you want to allow the user to select a multiple rows, double-click the Main.storyboard file to open it for editing in Interface Builder. Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und aktivieren Sie das Kontrollkästchen mehrfach im Attribut Inspektor:Select the Table View in the Interface Hierarchy and check the Multiple checkbox in the Attribute Inspector:

Screenshot zeigt die Interface Builder, in der Sie mehrere auswählen können, um die Auswahl mehrerer Zeilen zuzulassen.Screenshot shows the Interface Builder where you can select Multiple to allow multiple row selection.

Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save your changes and return to Visual Studio for Mac to sync with Xcode.

Bearbeiten Sie anschließend die ProductTableDelegate.cs Datei, und fügen Sie die folgende Methode hinzu:Next, edit the ProductTableDelegate.cs file and add the following method:

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

Dadurch kann der Benutzer eine beliebige einzelne Zeile in der Tabellenansicht auswählen.This will allow the user to select any single row in the Table View. Geben Sie false für ShouldSelectRow jede Zeile, die der Benutzer nicht auswählen kann, oder false für jede Zeile zurück, wenn der Benutzer nicht in der Lage sein soll, Zeilen auszuwählen.Return false for the ShouldSelectRow for any row that you don't want the user to be able to select or false for every row if you don't want the user to be able to select any rows.

Die Tabellen Sicht ( NSTableView ) enthält die folgenden Methoden zum Arbeiten mit der Zeilenauswahl:The Table View (NSTableView) contains the following methods for working with row selection:

  • DeselectAll(NSObject) : Deaktiviert alle Zeilen in der Tabelle.DeselectAll(NSObject) - Deselects all rows in the table. Verwenden this Sie für den ersten Parameter, um das Objekt zu senden, das die Auswahl durchgeführt hat.Use this for the first parameter to send in the object doing the selecting.
  • DeselectRow(nint) -Deaktiviert die angegebene Zeile in der Tabelle.DeselectRow(nint) - Deselects the given row in the table.
  • SelectAll(NSobject) : Wählt alle Zeilen in der Tabelle aus.SelectAll(NSobject) - Selects all rows in the table. Verwenden this Sie für den ersten Parameter, um das Objekt zu senden, das die Auswahl durchgeführt hat.Use this for the first parameter to send in the object doing the selecting.
  • SelectRow(nint,bool) : Wählt die angegebene Zeile aus.SelectRow(nint,bool) - Selects the given row. Übergeben false Sie für den zweiten Parameter die Auswahl, und wählen Sie nur eine einzelne Zeile aus. übergeben Sie, true um die Auswahl zu erweitern und diese Zeile einzuschließen.Pass false for the second parameter clear the selection and select only a single row, pass true to extend the selection and include this row.
  • SelectRows(NSIndexSet,bool) : Wählt den angegebenen Satz von Zeilen aus.SelectRows(NSIndexSet,bool) - Selects the given set of rows. Übergeben false Sie für den zweiten Parameter die Auswahl, und wählen Sie nur eine dieser Zeilen aus, übergeben Sie, true um die Auswahl zu erweitern und diese Zeilen einzuschließen.Pass false for the second parameter clear the selection and select only a these rows, pass true to extend the selection and include these rows.
  • SelectedRow : Gibt die in der Tabelle ausgewählte aktuelle Zeile zurück.SelectedRow - Returns the current row selected in the table.
  • SelectedRows -Gibt eine zurück, NSIndexSet die die Indizes der ausgewählten Zeilen enthält.SelectedRows - Returns a NSIndexSet containing the indexes of the selected rows.
  • SelectedRowCount : Gibt die Anzahl der ausgewählten Zeilen zurück.SelectedRowCount - Returns the number of selected rows.
  • IsRowSelected(nint) -Gibt zurück, true Wenn die angegebene Zeile ausgewählt ist.IsRowSelected(nint) - Returns true if the given row is selected.

Zum Auswählen der Zeile eingebenType to Select Row

Wenn Sie zulassen möchten, dass der Benutzer ein Zeichen mit ausgewählter Tabellenansicht eingibt, und die erste Zeile mit diesem Zeichen auswählen, doppelklicken Sie Main.storyboard auf die Datei, um Sie zur Bearbeitung in Interface Builder zu öffnen.If you want to allow the user to type a character with the Table View selected and select the first row that has that character, double-click the Main.storyboard file to open it for editing in Interface Builder. Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und aktivieren Sie im Attribut Inspektor das Kontrollkästchen Typ auswählen :Select the Table View in the Interface Hierarchy and check the Type Select checkbox in the Attribute Inspector:

Festlegen des Auswahl TypsSetting the selection type

Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save your changes and return to Visual Studio for Mac to sync with Xcode.

Nun bearbeiten wir die ProductTableDelegate.cs Datei und fügen die folgende Methode hinzu:Now let's edit the ProductTableDelegate.cs file and add the following method:

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;
}

Die GetNextTypeSelectMatch -Methode nimmt die angegebene searchString an und gibt die Zeile der ersten zurück Product , die diese Zeichenfolge enthält Title .The GetNextTypeSelectMatch method takes the given searchString and returns the row of the first Product that has that string in it's Title.

Wenn Sie die Anwendung ausführen und ein Zeichen eingeben, wird eine Zeile ausgewählt:If we run the application and type a character, a row is selected:

Screenshot zeigt das Ergebnis der Ausführung der Anwendung an.Screenshot shows the result of running the application.

Neuordnen von SpaltenReordering Columns

Wenn Sie zulassen möchten, dass der Benutzer die Spalten neu anordnen in der Tabellenansicht zieht, doppelklicken Sie Main.storyboard auf die Datei, um Sie in Interface Builder zu bearbeiten.If you want to allow the user to drag reorder columns in the Table View, double-click the Main.storyboard file to open it for editing in Interface Builder. Wählen Sie die Tabellenansicht in der Schnittstellen Hierarchie aus, und aktivieren Sie das Kontrollkästchen Neuanordnen im Attribut Inspektor:Select the Table View in the Interface Hierarchy and check the Reordering checkbox in the Attribute Inspector:

Screenshot zeigt die Interface Builder, in der Sie im Attribut Inspektor die Option "Wiederherstellen" auswählen können.Screenshot shows the Interface Builder where you can select Reodering in the Attribute Inspector.

Wenn wir einen Wert für die Eigenschaft Autosave festlegen und das Feld Spalten Informationen aktivieren, werden alle Änderungen, die wir am Layout der Tabelle vornehmen, automatisch für uns gespeichert und beim nächsten Ausführen der Anwendung wieder hergestellt.If we give a value for the Autosave property and check the Column Information field, any changes we make to the table's layout will automatically be saved for us and restored the next time the application is run.

Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.Save your changes and return to Visual Studio for Mac to sync with Xcode.

Nun bearbeiten wir die ProductTableDelegate.cs Datei und fügen die folgende Methode hinzu:Now let's edit the ProductTableDelegate.cs file and add the following method:

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

Die- ShouldReorder Methode sollte true für jede Spalte zurückgeben, für die das ziehen in das reorderstream erfolgen soll, andernfalls newColumnIndex false .The ShouldReorder method should return true for any column that it want to allow to be drag reordered into the newColumnIndex, else return false;

Wenn wir die Anwendung ausführen, können wir die Spaltenkopfzeilen verschieben, um die Spalten neu zu sortieren:If we run the application, we can drag Column Headers around to reorder our columns:

Ein Beispiel für die neu bestellten SpaltenAn example of the reordered columns

Bearbeiten von ZellenEditing Cells

Wenn Sie zulassen möchten, dass der Benutzer die Werte für eine bestimmte Zelle bearbeitet, bearbeiten Sie die ProductTableDelegate.cs Datei, und ändern Sie die GetViewForItem Methode wie folgt:If you want to allow the user to edit the values for a given cell, edit the ProductTableDelegate.cs file and change the GetViewForItem method as follows:

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;
}

Wenn nun die Anwendung ausgeführt wird, kann der Benutzer die Zellen in der Tabellenansicht bearbeiten:Now if we run the application, the user can edit the cells in the Table View:

Ein Beispiel für die Bearbeitung einer ZelleAn example of editing a cell

Verwenden von Bildern in Tabellen SichtenUsing Images in Table Views

Wenn Sie ein Bild als Teil der Zelle in einem einschließen möchten NSTableView , müssen Sie ändern, wie die Daten von der-Methode der Tabellen Sicht zurückgegeben werden, NSTableViewDelegate's GetViewForItem um anstelle der typischen zu verwenden NSTableCellView NSTextField .To include an image as part of the cell in a NSTableView, you'll need to change how the data is returned by the Table View's NSTableViewDelegate's GetViewForItem method to use a NSTableCellView instead of the typical NSTextField. Beispiel:For example:

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;
}

Weitere Informationen finden Sie im Abschnitt Verwenden von Images mit Tabellen Sichten in unserer Dokumentation zum Arbeiten mit Images.For more information, please see the Using Images with Table Views section of our Working with Image documentation.

Hinzufügen einer Lösch Schaltfläche zu einer ZeileAdding a Delete Button to a Row

Abhängig von den Anforderungen Ihrer APP kann es vorkommen, dass Sie eine Aktions Schaltfläche für jede Zeile in der Tabelle angeben müssen.Based on the requirements of your app, there might be occasions where you need to supply an action button for each row in the table. Als Beispiel hierfür erweitern wir das oben erstellte Tabellen Ansichts Beispiel, um eine Lösch Schaltfläche für jede Zeile einzuschließen.As an example of this, let's expand the Table View example created above to include a Delete button on each row.

Bearbeiten Sie zunächst die Main.storyboard in Xcode-Interface Builder, wählen Sie die Tabellenansicht aus, und erhöhen Sie die Anzahl der Spalten auf drei (3).First, edit the Main.storyboard in Xcode's Interface Builder, select the Table View and increase the number of columns to three (3). Ändern Sie als nächstes den Titel der neuen Spalte in Action :Next, change the Title of the new column to Action:

Bearbeiten des SpaltennamensEditing the column name

Speichern Sie die Änderungen am Storyboard, und kehren Sie zu Visual Studio für Mac zurück, um die Änderungen zu synchronisieren.Save the changes to the Storyboard and return to Visual Studio for Mac to sync the changes.

Bearbeiten Sie anschließend die ViewController.cs Datei, und fügen Sie die folgende öffentliche Methode hinzu:Next, edit the ViewController.cs file and add the following public method:

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

Ändern Sie in derselben Datei die Erstellung des neuen Tabellen Ansichts Delegaten in der- ViewDidLoad Methode wie folgt:In the same file, modify the creation of the new Table View Delegate inside of ViewDidLoad method as follows:

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

Bearbeiten Sie nun die ProductTableDelegate.cs Datei so, dass Sie eine private Verbindung mit dem Ansichts Controller einschließt, und verwenden Sie den Controller als Parameter, wenn Sie eine neue Instanz des Delegaten erstellen:Now, edit the ProductTableDelegate.cs file to include a private connection to the View Controller and to take the controller as a parameter when creating a new instance of the delegate:

#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

Fügen Sie dann der-Klasse die folgende neue private-Methode hinzu:Next, add the following new private method to the class:

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;
}

Dadurch werden alle Text Ansichts Konfigurationen übernommen, die zuvor in der GetViewForItem -Methode ausgeführt wurden, und Sie werden an einem einzelnen Aufruf baren Speicherort platziert (da die letzte Spalte der Tabelle keine Text Ansicht, sondern eine Schaltfläche enthält).This takes all of the Text View configurations that were previously being done in the GetViewForItem method and places them in a single, callable location (since the last column of the table does not include a Text View but a Button).

Bearbeiten Sie schließlich die GetViewForItem -Methode, und führen Sie Sie wie folgt aus:Finally, edit the GetViewForItem method and make it look like the following:

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;
}

Betrachten wir nun mehrere Abschnitte dieses Codes ausführlicher.Let's look at several sections of this code in more detail. Zuerst NSTableViewCell wird eine Aktion basierend auf dem Namen der Spalte erstellt, wenn eine neue erstellt wird.First, if a new NSTableViewCell is being created action is taken based on the name of the Column. Für die ersten beiden Spalten (Produkt und Details) wird die neue- ConfigureTextField Methode aufgerufen.For the first two columns (Product and Details), the new ConfigureTextField method is called.

In der Spalte Aktion wird ein neuer NSButton erstellt und der Zelle als untergeordnete Ansicht hinzugefügt:For the Action column, a new NSButton is created and added to the Cell as a Sub View:

// 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);

Die-Eigenschaft der Schaltfläche Tag wird zum Speichern der Nummer der Zeile verwendet, die gerade verarbeitet wird.The Button's Tag property is used to hold the number of the Row that is currently being processed. Diese Zahl wird später verwendet, wenn der Benutzer anfordert, eine Zeile im-Ereignis der Schaltfläche zu löschen Activated :This number will be used later when the user requests a row to be deleted in the Button's Activated event:

// 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 ();
    }
  });
};

Am Anfang des Ereignis Handlers werden die Schaltfläche und das Produkt für die angegebene Tabellenzeile angezeigt.At the start of the event handler, we get the button and the product that is on the given table row. Daraufhin wird dem Benutzer eine Warnung angezeigt, die das Löschen der Zeile bestätigt.Then an Alert is presented to the user confirming the row deletion. Wenn der Benutzer das Löschen der Zeile auswählt, wird die angegebene Zeile aus der Datenquelle entfernt, und die Tabelle wird erneut geladen:If the user chooses to delete the row, the given row is removed from the Data Source and the table is reloaded:

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

Wenn die Tabellen Ansichts Zelle zum Schluss wieder verwendet wird, anstatt neu erstellt zu werden, konfiguriert der folgende Code Sie basierend auf der verarbeiteten Spalte:Finally, if the Table View Cell is being reused instead of being created new, the following code configures it based on the Column being processed:

// 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;
}

In der Spalte Aktion werden alle untergeordneten Sichten überprüft, bis das NSButton gefunden wird, und die-Eigenschaft wird so aktualisiert, dass Sie Tag auf die aktuelle Zeile zeigt.For the Action column, all Sub Views are scanned until the NSButton is found, then it's Tag property is updated to point at the current Row.

Wenn diese Änderungen vorgenommen wurden, hat jede Zeile, wenn die app ausgeführt wird, eine Lösch Schaltfläche:With these changes in place, when the app is run each row will have a Delete button:

Tabellenansicht mit Lösch SchaltflächenThe table view with deletion buttons

Wenn der Benutzer auf eine Lösch Schaltfläche klickt, wird eine Warnung angezeigt, in der Sie aufgefordert werden, die angegebene Zeile zu löschen:When the user clicks a Delete button, an alert will be displayed asking them to delete the given Row:

Eine Warnung zum Löschen einer ZeileA delete row alert

Wenn der Benutzer löschen auswählt, wird die Zeile entfernt, und die Tabelle wird neu gezeichnet:If the user chooses delete, the row will be removed and the table will be redrawn:

Die Tabelle nach dem Löschen der Zeile.The table after the row is deleted

Daten Bindungs Tabellen-SichtenData Binding Table Views

Durch die Verwendung Key-Value Codierungs-und Daten Bindungs Techniken in ihrer xamarin. Mac-Anwendung können Sie die Menge des Codes, den Sie schreiben und verwalten müssen, erheblich verringern, um Benutzeroberflächen Elemente aufzufüllen und mit Ihnen zu arbeiten.By using Key-Value Coding and Data Binding techniques in your Xamarin.Mac application, you can greatly decrease the amount of code that you have to write and maintain to populate and work with UI elements. Außerdem profitieren Sie von der weiteren Entkopplung ihrer Sicherungsdaten (Datenmodell) von der Front-End-Benutzeroberfläche (Model-View-Controller). Dies führt zu einer einfacheren Wartung und einem flexibleren Anwendungs Entwurf.You also have the benefit of further decoupling your backing data (Data Model) from your front end User Interface (Model-View-Controller), leading to easier to maintain, more flexible application design.

Key-Value Coding (KVC) ist ein Mechanismus für den indirekten Zugriff auf die Eigenschaften eines Objekts, indem Schlüssel (speziell formatierte Zeichen folgen) verwendet werden, um Eigenschaften zu identifizieren, anstatt über Instanzvariablen oder Zugriffsmethoden () auf Sie zuzugreifen get/set .Key-Value Coding (KVC) is a mechanism for accessing an object’s properties indirectly, using keys (specially formatted strings) to identify properties instead of accessing them through instance variables or accessor methods (get/set). Durch die Implementierung Key-Value Codierungs kompatiblen Accessoren in ihrer xamarin. Mac-Anwendung erhalten Sie Zugriff auf andere macOS-Features, wie z. b. Key-Value Beobachtung (KVO), Datenbindung, Kerndaten, Cocoa-Bindungen und scriptbarkeit.By implementing Key-Value Coding compliant accessors in your Xamarin.Mac application, you gain access to other macOS features such as Key-Value Observing (KVO), Data Binding, Core Data, Cocoa bindings, and scriptability.

Weitere Informationen finden Sie im Abschnitt Tabellen Ansichts Datenbindung in der Dokumentation zur Datenbindung und Key-Value Codierung .For more information, please see the Table View Data Binding section of our Data Binding and Key-Value Coding documentation.

ZusammenfassungSummary

In diesem Artikel wurde die Arbeit mit Tabellen Sichten in einer xamarin. Mac-Anwendung ausführlich erläutert.This article has taken a detailed look at working with Table Views in a Xamarin.Mac application. Wir haben die verschiedenen Typen und Verwendungsmöglichkeiten von Tabellen Sichten gesehen, das Erstellen und Verwalten von Tabellen Sichten in der Interface Builder von Xcode und das Arbeiten mit Tabellen Sichten in c#-Code.We saw the different types and uses of Table Views, how to create and maintain Table Views in Xcode's Interface Builder and how to work with Table Views in C# code.