Xamarin.ios의 개요 보기Outline views in Xamarin.Mac

이 문서에서는 Xamarin.ios 응용 프로그램에서 개요 보기를 사용 하는 방법을 설명 합니다. Xcode에서 개요 보기를 만들고 유지 관리 하는 방법 및 Interface Builder 하 고 프로그래밍 방식으로 작업 하는 방법을 설명 합니다.This article covers working with outline views in a Xamarin.Mac application. It describes creating and maintaining outline views in Xcode and Interface Builder and working with them programmatically.

Xamarin.ios 응용 프로그램 C# 에서 및 .net을 사용 하는 경우 목표-CXcode 에서 작업 하는 개발자가 같은 개요 보기에 액세스할 수 있습니다.When working with C# and .NET in a Xamarin.Mac application, you have access to the same Outline 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 Outline Views (or optionally create them directly in C# code).

개요 뷰는 사용자가 계층적 데이터의 행을 확장 하거나 축소할 수 있도록 하는 테이블 유형입니다.An Outline View is a type of Table that allows the user expand or collapse rows of hierarchical data. 테이블 뷰와 마찬가지로 개요 보기에는 관련 항목 집합에 대 한 데이터와 해당 항목의 특성을 나타내는 개별 항목 및 열을 나타내는 행이 표시 됩니다.Like a Table View, an Outline View displays data for a set of related items, with rows representing individual items and columns representing the attributes of those items. 테이블 뷰와 달리 개요 보기의 항목은 단순 목록에 있지 않으며 하드 드라이브의 파일 및 폴더와 같은 계층 구조로 구성 됩니다.Unlike a Table View, items in an Outline View are not in a flat list, they are organized in a hierarchy, like files and folders on a hard drive.

이 문서에서는 Xamarin.ios 응용 프로그램에서 개요 보기를 사용 하는 기본 사항을 설명 합니다.In this article, we'll cover the basics of working with Outline 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 Outline Views

개요 뷰는 사용자가 계층적 데이터의 행을 확장 하거나 축소할 수 있도록 하는 테이블 유형입니다.An Outline View is a type of Table that allows the user expand or collapse rows of hierarchical data. 테이블 뷰와 마찬가지로 개요 보기에는 관련 항목 집합에 대 한 데이터와 해당 항목의 특성을 나타내는 개별 항목 및 열을 나타내는 행이 표시 됩니다.Like a Table View, an Outline View displays data for a set of related items, with rows representing individual items and columns representing the attributes of those items. 테이블 뷰와 달리 개요 보기의 항목은 단순 목록에 있지 않으며 하드 드라이브의 파일 및 폴더와 같은 계층 구조로 구성 됩니다.Unlike a Table View, items in an Outline View are not in a flat list, they are organized in a hierarchy, like files and folders on a hard drive.

개요 보기의 항목에 다른 항목이 포함 되어 있으면 사용자가 확장 하거나 축소할 수 있습니다.If an item in an Outline View contains other items, it can be expanded or collapsed by the user. 확장 가능한 항목은 항목이 축소 될 때 오른쪽을 가리키고 항목이 확장 될 때 아래로 이동 하는 공개 삼각형을 표시 합니다.An expandable item displays a disclosure triangle, which points to the right when the item is collapsed and points down when the item is expanded. 노출 삼각형을 클릭 하면 항목이 확장 또는 축소 됩니다.Clicking on the disclosure triangle causes the item to expand or collapse.

개요 뷰 (NSOutlineView)는 테이블 뷰 (NSTableView)의 하위 클래스 이므로 부모 클래스에서 대부분의 동작을 상속 합니다.The Outline View (NSOutlineView) is a subclass of the Table View (NSTableView) and as such, inherits much of its behavior from its parent class. 따라서 행 또는 열 선택, 열 머리글을 끌어서 열 위치 조정 등 테이블 뷰에서 지원 되는 많은 작업은 개요 보기 에서도 지원 됩니다.As a result, many operations supported by a Table View, such as selecting rows or columns, repositioning columns by dragging Column Headers, etc., are also supported by an Outline View. Xamarin.ios 응용 프로그램은 이러한 기능을 제어할 수 있으며 코드 또는 Interface Builder에서 개요 뷰의 매개 변수를 구성 하 여 특정 작업을 허용 하거나 허용 하지 않을 수 있습니다.A Xamarin.Mac application has control of these features, and can configure the Outline View's parameters (either in code or Interface Builder) to allow or disallow certain operations.

개요 뷰에서는 자체 데이터를 저장 하지 않고 데이터 원본 (NSOutlineViewDataSource)을 사용 하 여 필요한 행과 열을 모두 필요에 따라 제공 합니다.An Outline View does not store it's own data, instead it relies on a Data Source (NSOutlineViewDataSource) to provide both the rows and columns required, on a as-needed basis.

개요 열 관리를 지원 하 고, 기능을 선택 하 고, 열을 선택 하NSOutlineViewDelegate고, 편집 하 고, 사용자 지정 추적 하 고, 개별 사용자 지정 보기를 지원 하려면 개요 뷰 대리자 ()의 하위 클래스를 제공 하 여 개요 뷰의 동작을 사용자 지정할 수 있습니다. 열 및 행An Outline View's behavior can be customized by providing a subclass of the Outline View Delegate (NSOutlineViewDelegate) to support Outline column management, type to select functionality, row selection and editing, custom tracking, and custom views for individual columns and rows.

개요 보기는 대부분의 동작 및 기능을 테이블 뷰와 공유 하므로이 문서를 계속 하기 전에 표 뷰 문서를 진행 하는 것이 좋습니다.Since an Outline View shares much of it's behavior and functionality with a Table View, you might want to go through our Table Views documentation before continuing with this article.

Xcode에서 개요 보기 만들기 및 유지 관리Creating and Maintaining Outline 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:

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

개요 뷰를 인터페이스 편집기에서 뷰 컨트롤러로 끌어 놓고 뷰 컨트롤러의 콘텐츠 영역을 채운 후 제약 조건 편집기에서 창으로 축소 하 고 증가 하는 위치로 설정 합니다.Drag a Outline 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 Outline View in the Interface Hierarchy and the following properties are available in the Attribute Inspector:

  • 윤곽 열 -계층적 데이터가 표시 되는 테이블 열입니다.Outline Column - The Table Column in which the Hierarchical data is displayed.
  • 자동 저장 개요 열 - true이면 개요 열이 자동으로 저장 되 고 응용 프로그램 실행 사이에 복원 됩니다.Autosave Outline Column - If true, the Outline Column will be automatically saved and restored between application runs.
  • 들여쓰기 -확장 된 항목에서 열을 들여쓸 크기입니다.Indentation - The amount to indent columns under an expanded item.
  • 들여쓰기는 셀 뒤true표시 됩니다. 이면 들여쓰기 표시가 셀과 함께 들여쓰기 됩니다.Indentation Follows Cells - If true, the Indentation Mark will be indented along with the cells.
  • 확장 된 항목 자동 저장 -인 경우 true항목의 확장/축소 상태가 자동으로 저장 되 고 응용 프로그램 실행 간에 복원 됩니다.Autosave Expanded Items - If true, the expanded/collapsed state of the items will be automatically saved and restored between application runs.
  • 내용 모드 -뷰 (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 Outline 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 Outline 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 Outline 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 Outline View from the Interface Hierarchy, control-click and drag to the ViewController.h file.

  3. 다음 이라는 ProductOutline개요 보기의 콘센트를 만듭니다.Create an Outlet for the Outline View called ProductOutline:

  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 outline when the application is run.

개요 보기 채우기Populating the Outline View

Interface Builder에서 설계 되 고 콘센트를 통해 노출 되는 개요 보기를 사용 하 여 다음 C# 코드를 작성 해야 합니다.With our Outline 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 and groups of sub products. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. 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;
using Foundation;
using System.Collections.Generic;

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

        #region Computed Properties
        public string Title { get; set;} = "";
        public string Description { get; set;} = "";
        public bool IsProductGroup {
            get { return (Products.Count > 0); }
        }
        #endregion

        #region Constructors
        public Product ()
        {
        }

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

다음으로 요청 될 때 개요에 대 한 NSOutlineDataSource 데이터를 제공 하는의 하위 클래스를 만들어야 합니다.Next, we need to create a subclass of NSOutlineDataSource to provide the data for our outline as it is requested. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. ProductOutlineDataSource 일반빈 클래스를 선택 하 고 이름으로를 입력 한 다음 새로 만들기 단추를 클릭 합니다. > In the Solution Explorer, right-click the Project and select Add > New File... Select General > Empty Class, enter ProductOutlineDataSource 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 MacOutlines
{
    public class ProductOutlineDataSource : NSOutlineViewDataSource
    {
        #region Public Variables
        public List<Product> Products = new List<Product>();
        #endregion

        #region Constructors
        public ProductOutlineDataSource ()
        {
        }
        #endregion

        #region Override Methods
        public override nint GetChildrenCount (NSOutlineView outlineView, NSObject item)
        {
            if (item == null) {
                return Products.Count;
            } else {
                return ((Product)item).Products.Count;
            }

        }

        public override NSObject GetChild (NSOutlineView outlineView, nint childIndex, NSObject item)
        {
            if (item == null) {
                return Products [childIndex];
            } else {
                return ((Product)item).Products [childIndex];
            }
                
        }

        public override bool ItemExpandable (NSOutlineView outlineView, NSObject item)
        {
            if (item == null) {
                return Products [0].IsProductGroup;
            } else {
                return ((Product)item).IsProductGroup;
            }
        
        }
        #endregion
    }
}

이 클래스는 개요 보기의 항목에 대 한 저장소를 포함 GetChildrenCount 하 고를 재정의 하 여 테이블의 행 수를 반환 합니다.This class has storage for our Outline View's items and overrides the GetChildrenCount to return the number of rows in the table. GetChild 개요 뷰에서 요청한 대로 특정 부모 또는 자식 항목을 반환 하 고는 ItemExpandable 지정 된 항목을 부모 또는 자식으로 정의 합니다.The GetChild returns a specific parent or child item (as requested by the Outline View) and the ItemExpandable defines the specified item as either a parent or a child.

마지막으로의 NSOutlineDelegate 하위 클래스를 만들어 개요의 동작을 제공 해야 합니다.Finally, we need to create a subclass of NSOutlineDelegate to provide the behavior for our outline. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고새 파일 추가 > ...를 선택 합니다. ProductOutlineDelegate 일반빈 클래스를 선택 하 고 이름으로를 입력 한 다음 새로 만들기 단추를 클릭 합니다. > In the Solution Explorer, right-click the Project and select Add > New File... Select General > Empty Class, enter ProductOutlineDelegate for the Name and click the New button.

ProductOutlineDelegate.cs 파일을 편집 하 여 다음과 같이 만듭니다.Edit the ProductOutlineDelegate.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 MacOutlines
{
    public class ProductOutlineDelegate : NSOutlineViewDelegate
    {
        #region Constants 
        private const string CellIdentifier = "ProdCell";
        #endregion

        #region Private Variables
        private ProductOutlineDataSource DataSource;
        #endregion

        #region Constructors
        public ProductOutlineDelegate (ProductOutlineDataSource datasource)
        {
            this.DataSource = datasource;
        }
        #endregion

        #region Override Methods

        public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
            // 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)outlineView.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;
            }

            // Cast item
            var product = item as Product;

            // Setup view based on the column selected
            switch (tableColumn.Title) {
            case "Product":
                view.StringValue = product.Title;
                break;
            case "Details":
                view.StringValue = product.Description;
                break;
            }

            return view;
        }
        #endregion
    }
}

인스턴스 ProductOutlineDelegate를 만들 때 개요에 대 한 데이터를 제공 ProductOutlineDataSource 하는의 인스턴스도 전달 합니다.When we create an instance of the ProductOutlineDelegate, we also pass in an instance of the ProductOutlineDataSource that provides the data for the outline. 메서드 GetView 는 열 및 행에 대 한 셀을 표시 하기 위해 뷰 (데이터)를 반환 합니다.The GetView 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.

개요를 채우기 위해 MainWindow.cs 파일을 편집 하 고 메서드를 AwakeFromNib 다음과 같이 만듭니다.To populate the outline, let's edit the MainWindow.cs file and make the AwakeFromNib method look like the following:

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

    // Create data source and populate
    var DataSource = new ProductOutlineDataSource ();

    var Vegetables = new Product ("Vegetables", "Greens and Other Produce");
    Vegetables.Products.Add (new Product ("Cabbage", "Brassica oleracea - Leaves, axillary buds, stems, flowerheads"));
    Vegetables.Products.Add (new Product ("Turnip", "Brassica rapa - Tubers, leaves"));
    Vegetables.Products.Add (new Product ("Radish", "Raphanus sativus - Roots, leaves, seed pods, seed oil, sprouting"));
    Vegetables.Products.Add (new Product ("Carrot", "Daucus carota - Root tubers"));
    DataSource.Products.Add (Vegetables);

    var Fruits = new Product ("Fruits", "Fruit is a part of a flowering plant that derives from specific tissues of the flower");
    Fruits.Products.Add (new Product ("Grape", "True Berry"));
    Fruits.Products.Add (new Product ("Cucumber", "Pepo"));
    Fruits.Products.Add (new Product ("Orange", "Hesperidium"));
    Fruits.Products.Add (new Product ("Blackberry", "Aggregate fruit"));
    DataSource.Products.Add (Fruits);

    var Meats = new Product ("Meats", "Lean Cuts");
    Meats.Products.Add (new Product ("Beef", "Cow"));
    Meats.Products.Add (new Product ("Pork", "Pig"));
    Meats.Products.Add (new Product ("Veal", "Young Cow"));
    DataSource.Products.Add (Meats);

    // Populate the outline
    ProductOutline.DataSource = DataSource;
    ProductOutline.Delegate = new ProductOutlineDelegate (DataSource);

}

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

개요 보기에서 노드를 확장 하는 경우 다음과 같습니다.If we expand a node in the Outline View, it will look like the following:

열별로 정렬Sorting by Column

사용자가 열 머리글을 클릭 하 여 윤곽선의 데이터를 정렬할 수 있습니다.Let's allow the user to sort the data in the outline 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:

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

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

public override void SortDescriptorsChanged (NSOutlineView outlineView, NSSortDescriptor[] oldDescriptors)
{
    // Sort the data
    Sort (oldDescriptors [0].Key, oldDescriptors [0].Ascending);
    outlineView.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 Outline 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.

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

public override bool ShouldSelectItem (NSOutlineView outlineView, NSObject item)
{
    // Don't select product groups
    return !((Product)item).IsProductGroup;
}

이렇게 하면 사용자가 개요 보기에서 단일 행을 선택할 수 있습니다.This will allow the user to select any single row in the Outline View. 사용자 false 가 항목 ShouldSelectItem 을 선택할 수 없도록 하려는 경우 사용자가 선택할 수 없도록 하거나 false 모든 항목에 대해를 반환 합니다.Return false for the ShouldSelectItem for any item that you don't want the user to be able to select or false for every item if you don't want the user to be able to select any items.

여러 행 선택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 Outline 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.

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

public override bool ShouldSelectItem (NSOutlineView outlineView, NSObject item)
{
    // Don't select product groups
    return !((Product)item).IsProductGroup;
}

이렇게 하면 사용자가 개요 보기에서 단일 행을 선택할 수 있습니다.This will allow the user to select any single row in the Outline View. 사용자 false 가 항목 ShouldSelectRow 을 선택할 수 없도록 하려는 경우 사용자가 선택할 수 없도록 하거나 false 모든 항목에 대해를 반환 합니다.Return false for the ShouldSelectRow for any item that you don't want the user to be able to select or false for every item if you don't want the user to be able to select any items.

입력 하 여 행 선택Type to Select Row

사용자가 개요 보기가 선택 된 문자를 입력 하 고 해당 문자가 포함 된 첫 번째 행을 선택 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.If you want to allow the user to type a character with the Outline 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 Outline 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.

이제 파일을 ProductOutlineDelegate.cs 편집 하 고 다음 메서드를 추가 해 보겠습니다.Now let's edit the ProductOutlineDelegate.cs file and add the following method:

public override NSObject GetNextTypeSelectMatch (NSOutlineView outlineView, NSObject startItem, NSObject endItem, string searchString)
{
    foreach(Product product in DataSource.Products) {
        if (product.Title.Contains (searchString)) {
            return product;
        }
    }

    // Not found
    return null;
}

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

열 다시 정렬Reordering Columns

사용자가 개요 보기에서 열 순서를 끌 수 있도록 하려면 Main.storyboard 파일을 두 번 클릭 하 여 Interface Builder에서 편집할 수 있도록 엽니다.If you want to allow the user to drag reorder columns in the Outline View, double-click the Main.storyboard file to open it for editing in Interface Builder. 인터페이스 계층 구조 에서 개요 뷰를 선택 하 고 특성 검사자에서 다시 정렬 확인란을 선택 합니다.Select the Outline 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.

이제 파일을 ProductOutlineDelegate.cs 편집 하 고 다음 메서드를 추가 해 보겠습니다.Now let's edit the ProductOutlineDelegate.cs file and add the following method:

public override bool ShouldReorder (NSOutlineView outlineView, 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

사용자가 지정 된 셀에 대 한 값을 편집할 수 있게 하려면 ProductOutlineDelegate.cs 파일을 편집 하 고 메서드를 GetViewForItem 다음과 같이 변경 합니다.If you want to allow the user to edit the values for a given cell, edit the ProductOutlineDelegate.cs file and change the GetViewForItem method as follows:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // 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)outlineView.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 = !product.IsProductGroup;
    }

    // Tag view
    view.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.StringValue;
            break;
        case "Details":
            prod.Description = view.StringValue;
            break; 
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.StringValue = product.Title;
        break;
    case "Details":
        view.StringValue = product.Description;
        break;
    }

    return view;
}

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

개요 뷰에서 이미지 사용Using Images in Outline Views

NSOutlineView에서 셀의 일부로 이미지를 포함 하려면 개요 NSTableViewDelegate's GetView 뷰의 메서드에서 데이터를 반환 하는 방법을 변경 하 여 일반적인 NSTextField대신를 NSTableCellView 사용 해야 합니다.To include an image as part of the cell in a NSOutlineView, you'll need to change how the data is returned by the Outline View's NSTableViewDelegate's GetView method to use a NSTableCellView instead of the typical NSTextField. 예를 들어:For example:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // 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)outlineView.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 = !product.IsProductGroup;
    }

    // Tag view
    view.TextField.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.TextField.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.TextField.StringValue;
            break;
        case "Details":
            prod.Description = view.TextField.StringValue;
            break; 
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed (product.IsProductGroup ? "tags.png" : "tag.png");
        view.TextField.StringValue = product.Title;
        break;
    case "Details":
        view.TextField.StringValue = product.Description;
        break;
    }

    return view;
}

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

데이터 바인딩 개요 뷰Data Binding Outline 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 Outline 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 Outline Views in a Xamarin.Mac application. Xcode의 Interface Builder에서 개요 보기를 만들고 유지 관리 하는 방법 및 코드에서 C# 개요 보기를 사용 하는 방법에 대 한 다양 한 유형 및 사용 방법을 살펴보았습니다.We saw the different types and uses of Outline Views, how to create and maintain Outline Views in Xcode's Interface Builder and how to work with Outline Views in C# code.