Xamarin.ios의 테이블 뷰Table Views in Xamarin.Mac

이 문서에서는 Xamarin.ios 응용 프로그램의 테이블 뷰 작업을 설명 합니다. Xcode 및 Interface Builder에서 테이블 뷰를 만들고 코드에서이를 조작 하는 방법을 설명 합니다.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.

Xamarin.ios 응용 프로그램 C# 에서 및 .net을 사용 하는 경우 목표-CXcode 에서 작업 하는 개발자가 동일한 테이블 뷰에 액세스할 수 있습니다.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. Xamarin.ios는 Xcode와 직접 통합 되므로 Xcode의 Interface Builder 를 사용 하 여 테이블 뷰를 만들고 유지 관리 하거나 (필요에 따라 코드에서 C# 직접 만들 수 있습니다.)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).

테이블 뷰는 여러 행의 정보 열을 하나 이상 포함 하는 테이블 형식으로 데이터를 표시 합니다.A Table View displays data in a tabular format containing one or more columns of information in multiple rows. 생성 되는 테이블 뷰의 유형에 따라 사용자는 열 기준으로 정렬, 열 다시 구성, 열 추가, 열 제거 또는 테이블 내에 포함 된 데이터 편집을 수행할 수 있습니다.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.

이 문서에서는 Xamarin.ios 응용 프로그램의 테이블 뷰 작업에 대 한 기본 사항을 다룹니다.In this article, we'll cover the basics of working with Table Views in a Xamarin.Mac application. Hello, Mac 문서를 먼저 사용 하는 것이 가장 좋습니다. 특히 Xcode 및 Interface Builder콘센트 및 작업 섹션을 소개 하 고,에서 사용할 주요 개념 및 기술을 설명 하 고 있습니다. 이 문서를 참조 하세요.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.

Xamarin.ios 내부 문서의 클래스/메서드를 대상으로 노출 C# -C 섹션을 살펴볼 수 있습니다. C# 클래스를 연결 하는 데 사용 되는 RegisterExport 명령을 설명 합니다. 목표-C 개체 및 UI 요소입니다.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.

테이블 뷰 소개Introduction to Table Views

테이블 뷰는 여러 행의 정보 열을 하나 이상 포함 하는 테이블 형식으로 데이터를 표시 합니다.A Table View displays data in a tabular format containing one or more columns of information in multiple rows. 테이블 뷰는 스크롤 뷰 (NSScrollView) 내에 표시 되 고 macos 10.7부터 시작 하 여 행과 열을 모두 표시 하는 대신 any NSView Cells (NSCell)을 사용할 수 있습니다.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. 그러나 계속 해 서 사용할 NSCell 수 있지만 일반적으로 사용자 지정 행과 열을 서브클래싱하 NSTableCellView 고 만듭니다.That said, you can still use NSCell however, you'll typically subclass NSTableCellView and create your custom rows and columns.

테이블 뷰에서는 자체 데이터를 저장 하지 않고 데이터 원본 (NSTableViewDataSource)을 사용 하 여 필요한 경우 필요한 행과 열을 모두 제공 합니다.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.

테이블 뷰 대리자 (NSTableViewDelegate)의 하위 클래스를 제공 하 여 테이블 열 관리를 지원 하 고, 기능을 선택 하 고, 열을 선택 하 고 편집 하 고, 사용자 지정 추적을 제공 하 고, 개별 열에 대 한 사용자 지정 열.A 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.

테이블 뷰를 만들 때 Apple에서는 다음을 제안 합니다.When creating Table Views, Apple suggests the following:

  • 사용자가 열 머리글을 클릭 하 여 테이블을 정렬할 수 있습니다.Allow the user to sort the table by clicking on a Column Headers.
  • 해당 열에 표시 되는 데이터를 설명 하는 명사 또는 짧은 명사 구에 열 머리글을 만듭니다.Create Column Headers that are nouns or short noun phrases that describe the data being shown in that column.

자세한 내용은 Apple OS X 휴먼 인터페이스 지침콘텐츠 보기 섹션을 참조 하세요.For more information, please see the Content Views section of Apple's OS X Human Interface Guidelines.

Xcode에서 테이블 뷰 만들기 및 유지 관리Creating and Maintaining Table Views in Xcode

새 Xamarin.ios Cocoa 응용 프로그램을 만들면 기본적으로 표준 빈 창이 표시 됩니다.When you create a new Xamarin.Mac Cocoa application, you get a standard blank, window by default. 이 창은 프로젝트에 자동으로 .storyboard 포함 되는 파일에 정의 됩니다.This windows is defined in a .storyboard file automatically included in the project. Windows 디자인을 편집 하려면 솔루션 탐색기에서 Main.storyboard 파일을 두 번 클릭 합니다.To edit your windows design, in the Solution Explorer, double click the Main.storyboard file:

이렇게 하면 Xcode의 Interface Builder에서 창 디자인이 열립니다.This will open the window design in Xcode's Interface Builder:

table 라이브러리 검사기의 검색 상자에를 입력 하 여 테이블 뷰 컨트롤을 보다 쉽게 찾을 수 있습니다.Type table into the Library Inspector's Search Box to make it easier to find the Table View controls:

인터페이스 편집기에서 뷰 컨트롤러로 테이블 뷰를 끌고, 뷰 컨트롤러의 콘텐츠 영역에 맞게 설정 하 고, 제약 조건 편집기에서 창으로 축소 하 고 증가 하는 위치로 설정 합니다.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:

인터페이스 계층 구조 에서 테이블 뷰를 선택 하면 특성 검사자에서 다음 속성을 사용할 수 있습니다.Select the Table View in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

  • 내용 모드 -뷰 (NSView) 또는 셀 (NSCell) 중 하나를 사용 하 여 행과 열에 데이터를 표시할 수 있습니다.Content Mode - Allows you to use either Views (NSView) or Cells (NSCell) to display the data in the rows and columns. MacOS 10.7부터 보기를 사용 해야 합니다.Starting with macOS 10.7, you should use Views.
  • Float 그룹 행 -인 true경우 테이블 뷰에서 그룹화 된 셀이 부동 된 것 처럼 그려집니다.Floats Group Rows - If true, the Table View will draw grouped cells as if they are floating.
  • Columns -표시 되는 열 수를 정의 합니다.Columns - Defines the number of columns displayed.
  • Headers -이면 true열에 머리글이 포함 됩니다.Headers - If true, the columns will have Headers.
  • 다시 정렬 - true이면 사용자가 테이블의 열 순서를 끌 수 있습니다.Reordering - If true, the user will be able to drag reorder the columns in the table.
  • 크기 조정 - true이면 사용자가 열 머리글을 끌어 열 크기를 조정할 수 있습니다.Resizing - If true, the user will be able to drag column Headers to resize columns.
  • 열 크기 조정 -테이블에서 열 크기를 자동으로 조정 하는 방법을 제어 합니다.Column Sizing - Controls how the table will auto size columns.
  • 강조 표시 -셀이 선택 될 때 테이블에서 사용 하는 강조 표시 유형을 제어 합니다.Highlight - Controls the type of highlighting the table uses when a cell is selected.
  • 교대로 반복 되는 true행-다른 행의 배경색이 달라 집니다.Alternate Rows - If true, ever other row will have a different background color.
  • 가로 그리드 -셀 사이에 그려진 테두리의 형식을 선택 합니다.Horizontal Grid - Selects the type of border drawn between cells horizontally.
  • 세로 그리드 -셀 사이에 그려진 테두리의 형식을 선택 합니다.Vertical Grid - Selects the type of border drawn between cells vertically.
  • Grid color -셀 테두리 색을 설정 합니다.Grid Color - Sets the cell border color.
  • 배경 -셀 배경색을 설정 합니다.Background - Sets the cell background color.
  • 선택 -사용자가 테이블의 셀을 선택 하는 방법을 제어할 수 있습니다.Selection - Allow you to control how the user can select cells in the table as:
    • Multiple -이면 true사용자가 여러 행과 열을 선택할 수 있습니다.Multiple - If true, the user can select multiple rows and columns.
    • -이면 true사용자가 열을 선택할 수 있습니다.Column - If true,the user can select columns.
    • Select -If true를 입력 하 고 사용자가 문자를 입력 하 여 행을 선택할 수 있습니다.Type Select - If true, the user can type a character to select a row.
    • Empty -인 true경우 사용자가 행 또는 열을 선택할 필요가 없으면 테이블에서 선택할 수 없습니다.Empty - If true, the user is not required to select a row or column, the table allows for no selection at all.
  • 자동 저장-테이블 형식이 자동으로 저장 되는 이름입니다.Autosave - The name that the tables format is automatically save under.
  • 열 정보 -이면 true열의 순서와 너비가 자동으로 저장 됩니다.Column Information - If true, the order and width of the columns will be automatically saved.
  • 줄 바꿈 -셀에서 줄 바꿈을 처리 하는 방법을 선택 합니다.Line Breaks - Select how the cell handles line breaks.
  • 마지막으로 표시 되 는 줄 true을 자릅니다.-인 경우 데이터에서 잘린 셀은 해당 범위 내에 맞지 않을 수 있습니다.Truncates Last Visible Line - If true, the cell will be truncated in the data can not fit inside it's bounds.

중요

레거시 xamarin.ios 응용 프로그램을 유지 관리 하지 않는 경우 기반 NSView 테이블 뷰를 NSCell 기반으로 테이블 뷰를 사용 해야 합니다.Unless you are maintaining a legacy Xamarin.Mac application, NSView based Table Views should be used over NSCell based Table Views. NSCell는 레거시로 간주 되며 향후 지원 되지 않을 수 있습니다.NSCell is considered legacy and may not be supported going forward.

인터페이스 계층 구조 에서 테이블 열을 선택 하면 특성 검사자에서 다음 속성을 사용할 수 있습니다.Select a Table Column in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

  • 제목 -열의 제목을 설정 합니다.Title - Sets the title of the column.
  • 맞춤 -셀 내의 텍스트 맞춤을 설정 합니다.Alignment - Set the alignment of the text within the cells.
  • 제목 글꼴 -셀 머리글 텍스트의 글꼴을 선택 합니다.Title Font - Selects the font for the cell's Header text.
  • 정렬 키 -열의 데이터를 정렬 하는 데 사용 되는 키입니다.Sort Key - Is the key used to sort data in the column. 사용자가이 열을 정렬할 수 없으면 비워 둡니다.Leave blank if the user cannot sort this column.
  • Selector -정렬을 수행 하는 데 사용 되는 동작 입니다.Selector - Is the Action used to perform the sort. 사용자가이 열을 정렬할 수 없으면 비워 둡니다.Leave blank if the user cannot sort this column.
  • Order -열 데이터의 정렬 순서입니다.Order - Is the sort order for the columns data.
  • 크기 조정 -열의 크기 조정 유형을 선택 합니다.Resizing - Selects the type of resizing for the column.
  • 편집 가능 - true이면 사용자가 셀 기반 테이블의 셀을 편집할 수 있습니다.Editable - If true, the user can edit cells in a cell based table.
  • Hidden -이면 true열이 숨겨집니다.Hidden - If true, the column is hidden.

왼쪽 또는 오른쪽의 핸들 (열 오른쪽 가운데 세로 방향)을 끌어서 열 크기를 조정할 수도 있습니다.You can also resize the column by dragging it's handle (vertically centered on the column's right side) left or right.

테이블 뷰에서 각 열을 선택 하 고 첫 번째 열에의 Product 제목 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.

인터페이스 계층 구조 에서 테이블 셀NSTableViewCell뷰 ()를 선택 하면 특성 검사자에서 다음 속성을 사용할 수 있습니다.Select a Table Cell View (NSTableViewCell) in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

이러한 속성은 모두 표준 보기의 속성입니다.These are all of the properties of a standard View. 이 열에 대 한 행의 크기를 조정 하는 옵션도 있습니다.You also have the option of resizing the rows for this column here.

NSTextField 인터페이스 계층 구조 에서 테이블 뷰 셀 (기본적으로는)을 선택 하면 특성 검사자에서 다음 속성을 사용할 수 있습니다.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:

여기에서 설정할 표준 텍스트 필드의 모든 속성을 갖게 됩니다.You'll have all the properties of a standard text field to set here. 기본적으로 표준 텍스트 필드는 열에 있는 셀에 대 한 데이터를 표시 하는 데 사용 됩니다.By default, a standard Text Field is used to display data for a cell in a column.

인터페이스 계층 구조 에서 테이블 셀NSTableFieldCell뷰 ()를 선택 하면 특성 검사자에서 다음 속성을 사용할 수 있습니다.Select a Table Cell View (NSTableFieldCell) in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

가장 중요 한 설정은 다음과 같습니다.The most important settings here are:

  • 레이아웃 -이 열에 있는 셀의 레이아웃을 선택 하는 방법을 선택 합니다.Layout - Select how cells in this column are laid out.
  • 단일 줄 모드를 사용 합니다 true. 인 경우 셀이 한 줄로 제한 됩니다.Uses Single Line Mode - If true, the cell is limited to a single line.
  • 첫 번째 런타임 레이아웃 너비 - true인 경우 셀은 응용 프로그램을 처음 실행할 때 표시 되는 너비 (수동 또는 자동)를 선호 합니다.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 -셀에 대 한 편집 작업 을 보내는 시기를 제어 합니다.Action - Controls when the Edit Action is sent for the cell.
  • 동작 -셀을 선택할 수 있는지 또는 편집할 수 있는지를 정의 합니다.Behavior - Defines if a cell is selectable or editable.
  • 서식 있는 텍스트 - true인 경우 셀에 서식 지정 및 스타일 지정 된 텍스트가 표시 될 수 있습니다.Rich Text - If true, the cell can display formatted and styled text.
  • Undo -이면 true셀에서 실행 취소 동작을 담당 하는 것으로 가정 합니다.Undo - If true, the cell assumes responsibility for it's undo behavior.

인터페이스 계층 구조에서 테이블 열의NSTableFieldCell맨 아래에 있는 테이블 셀 뷰 ()를 선택 합니다.Select the Table Cell View (NSTableFieldCell) at the bottom of a Table Column in the Interface Hierarchy:

이렇게 하면 지정 된 열에 대해 생성 된 모든 셀의 기본 패턴 으로 사용 되는 테이블 셀 뷰를 편집할 수 있습니다.This allows you to edit the Table Cell View used as the base Pattern for all cells created for the given column.

작업 및 콘센트 추가Adding Actions and Outlets

다른 Cocoa UI 컨트롤과 마찬가지로, 작업콘센트 를 사용 하 여 코드를 표시 하는 데 필요한 기능을 C# 기준으로 테이블 뷰 및 열과 셀을 표시 해야 합니다.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).

이 프로세스는 노출 하려는 모든 테이블 뷰 요소에 대해 동일 합니다.The process is the same for any Table View element that we want to expose:

  1. 길잡이 편집기 로 전환 하 여 ViewController.h 파일이 선택 되었는지 확인 합니다.Switch to the Assistant Editor and ensure that the ViewController.h file is selected:

  2. 인터페이스 계층 구조에서 테이블 뷰를 선택 하 고 컨트롤을 클릭 한 다음 ViewController.h 파일을 끕니다.Select the Table View from the Interface Hierarchy, control-click and drag to the ViewController.h file.

  3. 이라는ProductTable테이블 뷰에 대 한 콘센트 를 만듭니다.Create an Outlet for the Table View called ProductTable:

  4. ProductColumnDetailsColumn라는 테이블 열에 대 한 콘센트를 만듭니다.Create Outlets for the tables columns as well called ProductColumn and DetailsColumn:

  5. 변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save you changes and return to Visual Studio for Mac to sync with Xcode.

다음으로, 응용 프로그램을 실행할 때 테이블에 대 한 일부 데이터를 표시 하는 코드를 작성 합니다.Next, we'll write the code display some data for the table when the application is run.

테이블 뷰 채우기Populating the Table View

Interface Builder에서 디자인 되었으며 콘센트를 통해 노출 되는 테이블 뷰를 사용 하 여 다음 C# 코드를 작성 해야 합니다.With our Table View designed in Interface Builder and exposed via an Outlet, next we need to create the C# code to populate it.

먼저 개별 행에 대 한 정보 Product 를 보유할 새 클래스를 만들어 보겠습니다.First, let's create a new Product class to hold the information for the individual rows. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. Product 일반빈 클래스를 선택 하 고 이름으로를 입력 한 다음 새로 만들기 단추를 클릭 합니다. > 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:

파일이 다음과 Product.cs 같이 표시 되도록 합니다.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
  }
}

다음으로, 요청 된 테이블에 대 한 NSTableDataSource 데이터를 제공 하는의 하위 클래스를 만들어야 합니다.Next, we need to create a subclass of NSTableDataSource to provide the data for our table as it is requested. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. ProductTableDataSource 일반빈 클래스를 선택 하 고 이름으로를 입력 한 다음 새로 만들기 단추를 클릭 합니다. > 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.

ProductTableDataSource.cs 파일을 편집 하 여 다음과 같이 만듭니다.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
  }
}

이 클래스는 테이블 뷰의 항목에 대 한 저장소를 포함 하 GetRowCount 고를 재정의 하 여 테이블의 행 수를 반환 합니다.This class has storage for our Table View's items and overrides the GetRowCount to return the number of rows in the table.

마지막으로의 NSTableDelegate 서브 클래스를 만들어 테이블의 동작을 제공 해야 합니다.Finally, we need to create a subclass of NSTableDelegate to provide the behavior for our table. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. ProductTableDelegate 일반빈 클래스를 선택 하 고 이름으로를 입력 한 다음 새로 만들기 단추를 클릭 합니다. > 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.

ProductTableDelegate.cs 파일을 편집 하 여 다음과 같이 만듭니다.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
  }
}

인스턴스 ProductTableDelegate를 만들 때 테이블에 대 한 데이터를 제공 ProductTableDataSource 하는의 인스턴스도 전달 합니다.When we create an instance of the ProductTableDelegate, we also pass in an instance of the ProductTableDataSource that provides the data for the table. 메서드 GetViewForItem 는 열 및 행에 대 한 셀을 표시 하기 위해 뷰 (데이터)를 반환 합니다.The GetViewForItem method is responsible for returning a view (data) to display the cell for a give column and row. 가능 하면 새 보기를 만들어야 하는 경우 기존 뷰를 다시 사용 하 여 셀을 표시 합니다.If possible, an existing view will be reused to display the cell, if not a new view must be created.

테이블을 채우기 위해 ViewController.cs 파일을 편집 하 고 메서드를 AwakeFromNib 다음과 같이 만듭니다.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);
}

응용 프로그램을 실행 하는 경우 다음이 표시 됩니다.If we run the application, the following is displayed:

열별로 정렬Sorting by Column

사용자가 열 머리글을 클릭 하 여 테이블의 데이터를 정렬할 수 있습니다.Let's allow the user to sort the data in the table by clicking on a Column Header. 먼저 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.First, double-click the Main.storyboard file to open it for editing in Interface Builder. Title compare: Ascending열을 선택 하 고, 정렬 키로를 입력 하 고, 선택기에 대해를 입력 하 고, 순서를 선택 합니다. ProductSelect the Product column, enter Title for the Sort Key, compare: for the Selector and select Ascending for the Order:

Description compare: Ascending열을 선택 하 고, 정렬 키로를 입력 하 고, 선택기에 대해를 입력 하 고, 순서를 선택 합니다. DetailsSelect the Details column, enter Description for the Sort Key, compare: for the Selector and select Ascending for the Order:

변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

이제 파일을 ProductTableDataSource.cs 편집 하 고 다음 메서드를 추가 해 보겠습니다.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 ();
}

메서드 Sort 를 사용 하면 지정 Product 된 클래스 필드를 기반으로 하 여 데이터 소스의 데이터를 오름차순 또는 내림차순으로 정렬할 수 있습니다.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. 재정의 SortDescriptorsChanged 된 메서드는가 열 머리글을 클릭할 때마다 호출 됩니다.The overridden SortDescriptorsChanged method will be called every time the use clicks on a Column Heading. Interface Builder에 설정 된 값과 해당 열에 대 한 정렬 순서를 전달 합니다.It will be passed the Key value that we set in Interface Builder and the sort order for that column.

응용 프로그램을 실행 하 고 열 머리글을 클릭 하면 해당 열을 기준으로 행이 정렬 됩니다.If we run the application and click in the Column Headers, the rows will be sorted by that column:

행 선택Row Selection

사용자가 단일 행을 선택할 수 있도록 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.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. 인터페이스 계층 구조 에서 테이블 뷰를 선택 하 고 특성 검사자에서 여러 확인란의 선택을 취소 합니다.Select the Table View in the Interface Hierarchy and uncheck the Multiple checkbox in the Attribute Inspector:

변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

그런 다음 ProductTableDelegate.cs 파일을 편집 하 고 다음 메서드를 추가 합니다.Next, edit the ProductTableDelegate.cs file and add the following method:

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

이렇게 하면 사용자가 테이블 뷰에서 단일 행을 선택할 수 있습니다.This will allow the user to select any single row in the Table View. 사용자가 행을 선택할 수 없도록 하려는 경우 사용자가 선택할 수 없도록 하려는 행 이나 false false 모든 행에 대해를 반환 합니다. ShouldSelectRowReturn 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.

테이블 뷰 (NSTableView)에는 행 선택 작업을 위한 다음 메서드가 포함 되어 있습니다.The Table View (NSTableView) contains the following methods for working with row selection:

  • DeselectRow(nint)-테이블에서 지정 된 행을 선택 취소 합니다.DeselectRow(nint) - Deselects the given row in the table.
  • SelectRow(nint,bool)-지정 된 행을 선택 합니다.SelectRow(nint,bool) - Selects the given row. false 번째 매개 변수에 대해를 전달 하 여 한 번에 하나의 행만 선택 합니다.Pass false for the second parameter to select only one row at a time.
  • SelectedRow-테이블에서 선택한 현재 행을 반환 합니다.SelectedRow - Returns the current row selected in the table.
  • IsRowSelected(nint)-지정 true 된 행이 선택 된 경우을 반환 합니다.IsRowSelected(nint) - Returns true if the given row is selected.

여러 행 선택Multiple Row Selection

사용자가 여러 행을 선택할 수 있도록 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.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. 인터페이스 계층 구조 에서 테이블 뷰를 선택 하 고 특성 검사자에서 여러 확인란을 선택 합니다.Select the Table View in the Interface Hierarchy and check the Multiple checkbox in the Attribute Inspector:

변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

그런 다음 ProductTableDelegate.cs 파일을 편집 하 고 다음 메서드를 추가 합니다.Next, edit the ProductTableDelegate.cs file and add the following method:

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

이렇게 하면 사용자가 테이블 뷰에서 단일 행을 선택할 수 있습니다.This will allow the user to select any single row in the Table View. 사용자가 행을 선택할 수 없도록 하려는 경우 사용자가 선택할 수 없도록 하려는 행 이나 false false 모든 행에 대해를 반환 합니다. ShouldSelectRowReturn 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.

테이블 뷰 (NSTableView)에는 행 선택 작업을 위한 다음 메서드가 포함 되어 있습니다.The Table View (NSTableView) contains the following methods for working with row selection:

  • DeselectAll(NSObject)-테이블의 모든 행을 선택 취소 합니다.DeselectAll(NSObject) - Deselects all rows in the table. this 번째 매개 변수를 사용 하 여를 선택 하는 개체에서 보냅니다.Use this for the first parameter to send in the object doing the selecting.
  • DeselectRow(nint)-테이블에서 지정 된 행을 선택 취소 합니다.DeselectRow(nint) - Deselects the given row in the table.
  • SelectAll(NSobject)-테이블의 모든 행을 선택 합니다.SelectAll(NSobject) - Selects all rows in the table. this 번째 매개 변수를 사용 하 여를 선택 하는 개체에서 보냅니다.Use this for the first parameter to send in the object doing the selecting.
  • SelectRow(nint,bool)-지정 된 행을 선택 합니다.SelectRow(nint,bool) - Selects the given row. false 번째 매개 변수를 전달 하 여 선택 영역을 지우고 단일 행 true 만 선택 하 여 선택 영역을 확장 하 고이 행을 포함 합니다.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)-지정 된 행 집합을 선택 합니다.SelectRows(NSIndexSet,bool) - Selects the given set of rows. false 번째 매개 변수를 전달 하 여 선택을 취소 하 고 이러한 행 true 만 선택 하 여 선택 영역을 확장 하 고 이러한 행을 포함 합니다.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-테이블에서 선택한 현재 행을 반환 합니다.SelectedRow - Returns the current row selected in the table.
  • SelectedRows-선택한 행 NSIndexSet 의 인덱스를 포함 하는을 반환 합니다.SelectedRows - Returns a NSIndexSet containing the indexes of the selected rows.
  • SelectedRowCount-선택한 행의 수를 반환 합니다.SelectedRowCount - Returns the number of selected rows.
  • IsRowSelected(nint)-지정 true 된 행이 선택 된 경우을 반환 합니다.IsRowSelected(nint) - Returns true if the given row is selected.

입력 하 여 행 선택Type to Select Row

사용자가 선택한 테이블 뷰로 문자를 입력 하 고 해당 문자가 포함 된 첫 번째 행을 선택할 수 있도록 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.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. 인터페이스 계층 구조 에서 테이블 뷰를 선택 하 고 특성 검사자에서 유형 선택 확인란을 선택 합니다.Select the Table View in the Interface Hierarchy and check the Type Select checkbox in the Attribute Inspector:

변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

이제 파일을 ProductTableDelegate.cs 편집 하 고 다음 메서드를 추가 해 보겠습니다.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;
}

메서드 GetNextTypeSelectMatch 는 지정 searchString 된를 가져와서 해당 문자열이 Title있는 첫 번째 Product 의 행을 반환 합니다.The GetNextTypeSelectMatch method takes the given searchString and returns the row of the first Product that has that string in it's Title.

응용 프로그램을 실행 하 고 문자를 입력 하면 행이 선택 됩니다.If we run the application and type a character, a row is selected:

열 다시 정렬Reordering Columns

사용자가 테이블 뷰의 열 순서를 끌 수 있도록 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.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. 인터페이스 계층 구조 에서 테이블 뷰를 선택 하 고 특성 검사자에서 다시 정렬 확인란을 선택 합니다.Select the Table View in the Interface Hierarchy and check the Reordering checkbox in the Attribute Inspector:

자동 저장 속성의 값을 지정 하 고 열 정보 필드를 확인 하는 경우 테이블의 레이아웃에 대 한 모든 변경 내용은 자동으로 저장 되 고 다음에 응용 프로그램이 실행 될 때 복원 됩니다.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.

변경 내용을 저장 하 고 Xcode와 동기화 할 Mac용 Visual Studio로 돌아갑니다.Save your changes and return to Visual Studio for Mac to sync with Xcode.

이제 파일을 ProductTableDelegate.cs 편집 하 고 다음 메서드를 추가 해 보겠습니다.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;
}

메서드 ShouldReorder 는로 다시 true 정렬 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;

응용 프로그램을 실행 하는 경우 열 머리글을 끌어 열의 순서를 바꿀 수 있습니다.If we run the application, we can drag Column Headers around to reorder our columns:

셀 편집Editing Cells

사용자가 지정 된 셀에 대 한 값을 편집할 수 있게 하려면 ProductTableDelegate.cs 파일을 편집 하 고 메서드를 GetViewForItem 다음과 같이 변경 합니다.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;
}

이제 응용 프로그램을 실행 하는 경우 사용자는 테이블 뷰의 셀을 편집할 수 있습니다.Now if we run the application, the user can edit the cells in the Table View:

테이블 뷰에서 이미지 사용Using Images in Table Views

NSTableView있는 셀의 일부로 이미지를 포함 하려면 테이블 NSTableViewDelegate's GetViewForItem 뷰의 메서드에서 데이터가 반환 되는 방법을 변경 하 여 일반적인 NSTextField대신를 NSTableCellView 사용 해야 합니다.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. 예: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;
}

자세한 내용은 이미지를 사용 하 여 작업 설명서의 테이블 뷰에서 이미지 사용 섹션을 참조 하세요.For more information, please see the Using Images with Table Views section of our Working with Image documentation.

행에 삭제 단추 추가Adding a Delete Button to a Row

앱의 요구 사항에 따라 테이블의 각 행에 대 한 작업 단추를 제공 해야 하는 경우가 있을 수 있습니다.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. 이에 대 한 예로, 위에서 만든 테이블 뷰 예제를 확장 하 여 각 행에 삭제 단추를 포함 하겠습니다.As an example of this, let's expand the Table View example created above to include a Delete button on each row.

먼저 Xcode의 Interface Builder Main.storyboard 에서를 편집 하 고 테이블 뷰를 선택 하 여 열 수를 3 개로 늘립니다.First, edit the Main.storyboard in Xcode's Interface Builder, select the Table View and increase the number of columns to three (3). 다음으로 새 열의 제목을Action변경 합니다.Next, change the Title of the new column to Action:

스토리 보드에 대 한 변경 내용을 저장 하 고 Mac용 Visual Studio로 돌아가서 변경 내용을 동기화 합니다.Save the changes to the Storyboard and return to Visual Studio for Mac to sync the changes.

그런 다음 ViewController.cs 파일을 편집 하 고 다음 공용 메서드를 추가 합니다.Next, edit the ViewController.cs file and add the following public method:

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

동일한 파일에서 ViewDidLoad 메서드 내에 있는 새 테이블 뷰 대리자의 생성을 다음과 같이 수정 합니다.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);

이제 ProductTableDelegate.cs 파일을 편집 하 여 뷰 컨트롤러에 대 한 개인 연결을 포함 하 고, 대리자의 새 인스턴스를 만들 때 컨트롤러를 매개 변수로 사용 합니다.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

그런 다음 새 private 메서드를 클래스에 추가 합니다.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;
}

이렇게 하면 GetViewForItem 메서드에서 이전에 수행 된 모든 텍스트 뷰 구성이 사용 되며, 테이블의 마지막 열에는 텍스트 보기와 단추가 포함 되지 않기 때문에 호출 가능한 단일 위치에 배치 됩니다.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).

마지막으로 GetViewForItem 메서드를 편집 하 여 다음과 같이 만듭니다.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;
}

이 코드의 몇 가지 섹션을 자세히 살펴보겠습니다.Let's look at several sections of this code in more detail. 첫째, 새 NSTableViewCell 을 만들 경우 열 이름을 기반으로 하는 작업이 수행 됩니다.First, if a new NSTableViewCell is being created action is taken based on the name of the Column. 처음 두 열 (제품세부 정보)에 대해 새 ConfigureTextField 메서드가 호출 됩니다.For the first two columns (Product and Details), the new ConfigureTextField method is called.

작업 열에는 새 NSButton 가 만들어져 하위 뷰로 셀에 추가 됩니다.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);

단추의 Tag 속성은 현재 처리 중인 행의 번호를 유지 하는 데 사용 됩니다.The Button's Tag property is used to hold the number of the Row that is currently being processed. 이 번호는 나중에 사용자가 단추의 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 ();
    }
  });
};

이벤트 처리기의 시작 부분에서 지정 된 테이블 행에 있는 단추와 제품을 가져옵니다.At the start of the event handler, we get the button and the product that is on the given table row. 그런 다음 사용자에 게 행 삭제를 확인 하는 경고가 표시 됩니다.Then an Alert is presented to the user confirming the row deletion. 사용자가 행을 삭제 하도록 선택 하면 지정 된 행이 데이터 원본에서 제거 되 고 테이블이 다시 로드 됩니다.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 ();

마지막으로, 새 테이블 뷰 셀을 새로 만드는 대신 다시 사용 하는 경우 다음 코드는 처리 되는 열을 기준으로 구성 합니다.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;
}

작업 열에 대 한 모든 하위 뷰는 NSButton 가 발견 될 때까지 검색 된 다음 Tag 현재 행을 가리키도록 속성을 업데이트 합니다.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.

이러한 변경 내용을 적용 하면 앱이 실행 될 때 각 행에 삭제 단추가 포함 됩니다.With these changes in place, when the app is run each row will have a Delete button:

사용자가 삭제 단추를 클릭 하면 지정 된 행을 삭제 하 라는 경고가 표시 됩니다.When the user clicks a Delete button, an alert will be displayed asking them to delete the given Row:

사용자가 삭제를 선택 하면 해당 행이 제거 되 고 테이블이 다시 그려집니다.If the user chooses delete, the row will be removed and the table will be redrawn:

데이터 바인딩 테이블 뷰Data Binding Table Views

Xamarin.ios 응용 프로그램에서 키-값 코딩 및 데이터 바인딩 기술을 사용 하 여 UI 요소를 채우고 사용 하기 위해 작성 하 고 유지 관리 해야 하는 코드의 양을 크게 줄일 수 있습니다.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. 또한 프런트 엔드 사용자 인터페이스 (모델-뷰-컨트롤러)에서 지원 데이터 (데이터 모델)를 추가로 분리 하 여 더 쉽게 유지 관리 하 고 더욱 유연한 응용 프로그램을 디자인할 수 있는 이점을 누릴 수 있습니다.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.

KVC (키-값 코딩)는 키 (특수 형식의 문자열)를 사용 하 여 개체의 속성에 간접적으로 액세스 하 고 인스턴스 변수 또는 접근자 메서드 (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). Xamarin.ios 응용 프로그램에서 키-값 코딩 규격 접근자를 구현 하 여 키-값 관찰 (KVO), 데이터 바인딩, 코어 데이터, Cocoa 바인딩, scriptability 등의 다른 macOS 기능에 액세스할 수 있습니다.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.

자세한 내용은 데이터 바인딩 및 키-값 코딩 설명서의 테이블 뷰 데이터 바인딩 섹션을 참조 하세요.For more information, please see the Table View Data Binding section of our Data Binding and Key-Value Coding documentation.

요약Summary

이 문서에서는 Xamarin.ios 응용 프로그램의 테이블 뷰로 작업 하는 방법에 대해 자세히 살펴봅니다.This article has taken a detailed look at working with Table Views in a Xamarin.Mac application. Xcode의 Interface Builder에서 테이블 뷰를 만들고 유지 관리 하는 방법 및 코드에서 C# 테이블 뷰를 사용 하는 방법에 대 한 다양 한 유형과 사용 방법을 살펴보았습니다.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.