요약 17 장입니다.Summary of Chapter 17. 눈금 마스터Mastering the Grid

샘플 다운로드 샘플 다운로드Download Sample Download the sample

합니다 Grid 자식 셀의 행과 열으로 정렬 하는 강력한 레이아웃 메커니즘입니다.The Grid is a powerful layout mechanism that arranges its children into rows and columns of cells. 비슷한 HTML과는 달리 table 요소는 Grid 표시가 아니라 레이아웃의 용도로 됩니다.Unlike the similar HTML table element, the Grid is solely for purposes of layout rather than presentation.

기본 표The basic Grid

Grid 파생 Layout<View> 를 정의 하는 Children 속성은 Grid 상속 합니다.Grid derives from Layout<View>, which defines a Children property that Grid inherits. XAML 또는 코드에서이 컬렉션을 채울 수 있습니다.You can fill this collection in either XAML or code.

XAML에서 표The Grid in XAML

정의 Grid XAML에서 일반적으로 채우기를 사용 하 여 시작 합니다 RowDefinitions ColumnDefinitions 컬렉션을 Grid 사용 하 여 RowDefinition 하 고 ColumnDefinition 개체입니다.The definition of a Grid in XAML generally begins with filling the RowDefinitions and ColumnDefinitions collections of the Grid with RowDefinition and ColumnDefinition objects. 이 행 개수 및 열을 설정 하는 방법의 Grid, 및 해당 속성입니다.This is how you establish the number of rows and columns of the Grid, and their properties.

RowDefinition Height 속성 및 ColumnDefinition Width 형식의 두 속성인 GridLength , 구조체입니다.RowDefinition has a Height property and ColumnDefinition has a Width property, both of type GridLength, a structure.

XAML에 GridLengthTypeConverter 간단한 텍스트 문자열을 변환 GridLength 값입니다.In XAML, the GridLengthTypeConverter converts simple text strings into GridLength values. 내부적으로 GridLength 생성자 만듭니다 합니다 GridLength 숫자와 형식의 값에 따라 값 GridUnitType , 세 가지 멤버로 구성 된 열거형:Behind the scenes, the GridLength constructor creates the GridLength value based on a number and a value of type GridUnitType, an enumeration with three members:

  • Absolute — 너비 또는 높이가 장치 독립적 단위 (XAML의 숫자)에 지정 된Absolute — the width or height is specified in device-independent units (a number in XAML)
  • Auto — 높이 또는 너비는 셀 내용 (XAML에서 "Auto")에 따라 자동 크기 조정Auto — the height or width is autosized based on cell contents ("Auto" in XAML)
  • Star — 남은 높이 또는 너비 크기를 비례적으로 할당 됩니다 (숫자 "*" 라는 스타, XAML에서)Star — leftover height or width is allocated proportionally (a number with "*", called star, in XAML)

각 자식은 Grid 할당 되어야 행 및 열 (명시적 또는 암시적으로).Each child of the Grid must also be assigned a row and column (either explicitly or implicitly). 행에 걸쳐 및 열 범위는 선택 사항입니다.Row spans and column spans are optional. 이러한 모든 지정 된 연결 된 바인딩 가능한 속성을 사용 하 여 — 에 정의 된 속성을 Grid 자식의 설정 하지만 Grid합니다.These are all specified using attached bindable properties — properties that are defined by the Grid but set on children of the Grid. Grid 4 개의 정적 연결 된 바인딩 가능한 속성을 정의합니다.Grid defines four static attached bindable properties:

코드에서 프로그램을 설정 하 고 이러한 값을 가져오는 8 개의 정적 메서드를 따르면 됩니다.In code, a program can use eight static methods to set and get these values:

XAML에서 이러한 값을 설정 하는 것에 대 한 다음과 같은 특성을 사용 합니다.In XAML you use the following attributes for setting these values:

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

합니다 SimpleGridDemo 샘플과 만들기 및 초기화를 Grid XAML에서.The SimpleGridDemo sample demonstrates creating and initializing a Grid in XAML.

Grid 상속 된 Padding 속성을 Layout 행 및 열 사이의 간격을 제공 하는 두 개의 추가 속성을 정의 하 고:The Grid inherits the Padding property from Layout and defines two additional properties that provide spacing between the rows and columns:

합니다 RowDefinitionsColumnDefinitions 컬렉션을 엄격 하 게 필요 하지 않습니다.The RowDefinitions and ColumnDefinitions collections aren't strictly required. 없는 경우는 Grid 행 및 열을 만듭니다 합니다 Grid 자식 모두 기본값을 제공 하 고 GridLength 의 "*" (별표).If absent, the Grid creates rows and columns for the Grid children and gives them all a default GridLength of "*" (star).

코드에서 표The Grid in code

합니다 GridCodeDemo 샘플을 만들고 채우는 방법을 보여 줍니다는 Grid 코드에서입니다.The GridCodeDemo sample demonstrates how to create and populate a Grid in code. 각 자식에 직접 또는 간접적으로 추가 호출 하 여 연결 된 속성을 설정할 수 있습니다 Add 와 같은 메서드와 Add 정의한 합니다 Grid.IGridList 인터페이스입니다.You can set the attached properties for each child directly, or indirectly by calling additional Add methods such as Add defined by the Grid.IGridList interface.

표 가로 막대형 차트The Grid bar chart

합니다 GridBarChart 샘플에서는 여러 개를 추가 하는 방법을 보여 줍니다 BoxView 요소를 사용 하는 Grid 대량을 사용 하 여 AddHorizontal 메서드.The GridBarChart sample shows how to add multiple BoxView elements to a Grid using the bulk AddHorizontal method. 기본적으로 이러한 BoxView 요소는 동일 너비입니다.By default, these BoxView elements have equal width. 각각의 높이 BoxView 가로 막대형 차트와 유사 하 게 제어할 수 있습니다.The height of each BoxView can then be controlled to resemble a bar chart.

GridGridBarChart 샘플 공유를 AbsoluteLayout 처음에 보이지 않는 사용 하 여 부모 Frame.The Grid in the GridBarChart sample shares an AbsoluteLayout parent with an initially invisible Frame. 프로그램 설정를 TapGestureRecognizerBoxView 사용 하는 Frame 탭된 막대에 대 한 정보를 표시 합니다.The program also sets a TapGestureRecognizer on each BoxView to use the Frame to display information about the tapped bar.

눈금에 맞춤Alignment in the Grid

GridAlignment 샘플을 사용 하는 방법에 설명 합니다 VerticalOptionsHorizontalOptions 속성에서 자식에 맞게를 Grid 셀.The GridAlignment sample demonstrates how to use the VerticalOptions and HorizontalOptions properties to align children in a Grid cell.

합니다 SpacingButtons 공간을 균등 하 게 샘플 Button 요소 가운데에 Grid 셀입니다.The SpacingButtons sample equally spaces Button elements centered in Grid cells.

셀 구분선 및 테두리Cell dividers and borders

Grid 셀 분할자 또는 테두리를 그릴 수 있는 기능을 다루지 않습니다.The Grid does not include a feature that draws cell dividers or borders. 그러나 가능 고유한 합니다.However, you can make your own.

합니다 GridCellDividers 씬 추가 행과 열에 구체적으로 정의 하는 방법을 보여 줍니다 BoxView 기준은 모방 하는 요소입니다.The GridCellDividers demonstrates how to define additional rows and column specifically for thin BoxView elements to mimic dividing lines.

합니다 GridCellBorders 프로그램 추가 셀 만들지는 않지만 대신 맞춥니다 BoxView 셀 테두리를 모방 하기 위해 각 셀에는 요소입니다.The GridCellBorders program does not create any additional cells but instead aligns BoxView elements in each cell to mimic a cell border.

거의 실제 Grid 예제Almost real-life Grid examples

합니다 KeypadGrid 사용 하 여 샘플을 Grid 키패드를 표시 하려면:The KeypadGrid sample uses a Grid to display a keypad:

키패드 그리드의 삼중 스크린 샷Triple screenshot of Keypad Grid

방향 변경에 응답Responding to orientation changes

Grid 방향 변경에 응답 하는 프로그램을 구성 하는 데 도움이 됩니다.The Grid can help structure a program to respond to orientation changes. 합니다 GridRgbSliders 샘플 세로 방향의 휴대폰의 두 번째 행에서 가로 방향 휴대폰의 두 번째 열 사이의 요소를 이동 하는 방법을 보여 줍니다.The GridRgbSliders sample demonstrates a technique that moves an element between a second row of a portrait-oriented phone and the second column of a landscape-oriented phone.

프로그램 초기화 Slider 다양 한 0 ~ 255 및 슬라이더의 값을 16 진수에서 표시를 사용 하 여 데이터 바인딩 요소입니다.The program initializes Slider elements to a range of 0 to 255, and uses data bindings to display the value of the sliders in hexadecimal. 때문에 합니다 Slider 값은 부동 소수점, 정수, 16 진수 에서만 작동에 대 한 문자열의 형식을 지정 하는.NET을 DoubleToIntConvert 클래스를 Xamarin.FormsBook.Toolkit out 라이브러리를 사용 하면 됩니다.Because the Slider values are floating point, and the .NET formatting string for hexadecimal only works with integers, a DoubleToIntConvert class in the Xamarin.FormsBook.Toolkit library helps out.