테이블 뷰
샘플 찾아보기
.NET 다중 플랫폼 앱 UI(.NET MAUI)는 섹션으로 그룹화할 수 있는 스크롤 가능한 항목의 테이블을 표시합니다. A TableView 는 일반적으로 각 행의 모양이 다른 항목(예: 설정 표 표시)을 표시하는 데 사용됩니다.
중요하다
TableView 더 이상 사용되지 않습니다. 대신 CollectionView 사용해야 합니다.
TableView가 테이블의 모양을 관리하는 동안, 테이블의 각 항목의 모양은 Cell에 의해 정의됩니다. .NET MAUI에는 서로 다른 데이터 조합을 표시하는 데 사용되는 5가지 셀 형식이 포함되어 있으며 원하는 콘텐츠를 표시하는 사용자 지정 셀을 정의할 수도 있습니다.
TableView는 다음의 속성을 정의합니다.
- , 유형의 iOS에서 테이블의 용도를 정의합니다.
HasUnevenRows는bool형식으로, 테이블의 항목이 서로 다른 높이의 행을 가질 수 있는지 여부를 나타냅니다. 이 속성의 기본값은false입니다.Root형식의TableRoot은 TableView의 자식을 정의합니다.-
RowHeight유형int는HasUnevenRows이false일 때 각 행의 높이를 결정합니다.
HasUnevenRows 및 RowHeight 속성은 BindableProperty 개체에 의해 지원됩니다. 이는 이들이 데이터 바인딩의 대상으로 사용될 수 있으며 스타일을 지정할 수 있음을 의미합니다.
Intent 속성 값은 오직 iOS에서만 TableView의 모양을 정의하는 데 도움이 됩니다. 이 속성은 다음 멤버들을 정의하는 TableIntent 열거형 값으로 설정해야 합니다.
-
Menu, 선택 메뉴를 표시하기 위해. -
Settings는 구성 설정 테이블을 표시하기 위한 것입니다. -
Form는 데이터 입력 양식을 나타내기 위한 것입니다. Data데이터를 표시하기 위한 입니다.
참고
TableView는 항목 컬렉션에 대한 바인딩을 지원하도록 설계되지 않았습니다.
TableView 만들기
테이블을 만들려면 개체를 TableView 만들고 해당 Intent 속성을 멤버로 TableIntent 설정합니다.
TableView의 자식은 TableRoot 개체여야 하며, 이는 하나 이상의 TableSection 개체에 대한 부모여야 합니다. 각 TableSection는 색을 설정할 수 있는 선택적 제목과 하나 이상의 Cell 개체로 구성됩니다.
다음 예제에서는 TableView를 만드는 방법을 보여줍니다.
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Chapters">
<TextCell Text="1. Introduction to .NET MAUI"
Detail="Learn about .NET MAUI and what it provides." />
<TextCell Text="2. Anatomy of an app"
Detail="Learn about the visual elements in .NET MAUI" />
<TextCell Text="3. Text"
Detail="Learn about the .NET MAUI controls that display text." />
<TextCell Text="4. Dealing with sizes"
Detail="Learn how to size .NET MAUI controls on screen." />
<TextCell Text="5. XAML vs code"
Detail="Learn more about creating your UI in XAML." />
</TableSection>
</TableRoot>
</TableView>
이 예제에서는 TableView 개체를 사용하여 TextCell 메뉴를 정의합니다.
메뉴를 표시하는 TableView의 스크린샷
참고
TextCell는 탭할 때 명령을 실행할 수 있으며, 이는 속성이 유효한 Command 구현으로 설정된 경우에 가능합니다.
셀 모양 정의
각 안의 항목은 개체로 정의되며, 사용되는 형식은 셀 데이터의 모양을 결정합니다. .NET MAUI에는 다음과 같은 기본 제공 셀이 포함되어 있습니다.
- TextCell은 기본 텍스트와 보조 텍스트를 별도의 줄에 표시합니다.
- ImageCell는 기본 및 보조 텍스트가 별도의 줄에 표시된 이미지를 나타냅니다.
- SwitchCell, 텍스트와 켜거나 끌 수 있는 스위치를 표시합니다.
- EntryCell- 편집 가능한 레이블 및 텍스트를 표시합니다.
- 어떤 ViewCell의 모양은 View에 의해 정의된 사용자 지정 셀입니다. 이 셀 유형은 TableView의 각 항목의 모양을 완전히 정의하려는 경우에 사용해야 합니다.
텍스트 셀
TextCell는 기본 텍스트와 보조 텍스트를 별도의 줄에 표시합니다. TableView는 다음 속성을 정의합니다.
Text유형의string은 표시할 주요 텍스트를 정의합니다.TextColor형식의 Color는 기본 텍스트의 색을 나타냅니다.Detail형식string의 은 표시할 보조 텍스트를 정의합니다.-
DetailColor형식의 Color은 보조 텍스트의 색을 나타냅니다. - \
의 ``의 셀을 탭할 때 실행되는 명령을 정의합니다. -
CommandParameter형식의object은 명령에 전달되는 매개 변수를 나타냅니다.
이러한 속성은 BindableProperty 개체에서 지원되며, 그 결과 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
다음 예제에서는 TextCell를 사용하여 TableView의 항목 모양을 정의하는 방법을 보여줍니다.
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Chapters">
<TextCell Text="1. Introduction to .NET MAUI"
Detail="Learn about .NET MAUI and what it provides." />
<TextCell Text="2. Anatomy of an app"
Detail="Learn about the visual elements in .NET MAUI" />
<TextCell Text="3. Text"
Detail="Learn about the .NET MAUI controls that display text." />
<TextCell Text="4. Dealing with sizes"
Detail="Learn how to size .NET MAUI controls on screen." />
<TextCell Text="5. XAML vs code"
Detail="Learn more about creating your UI in XAML." />
</TableSection>
</TableRoot>
</TableView>
다음 스크린샷은 결과 셀 모양을 보여줍니다.
메뉴를 표시하는 TableView의 스크린샷
이미지 셀
ImageCell는 기본 텍스트와 보조 텍스트가 각각 다른 줄에 표시된 이미지를 보여줍니다. ImageCell은 TextCell의 속성을 상속하고, 셀에 표시할 이미지를 지정하는 ImageSource 유형의 ImageSource 속성을 정의합니다. 이 속성은 BindableProperty 개체에 의해 지원됩니다. 즉, 데이터 바인딩의 대상으로 사용할 수 있고 스타일을 지정할 수 있습니다.
다음 예제에서는 ImageCell을(를) 사용하여 TableView의 항목 모양을 정의하는 방법을 보여줍니다.
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Learn how to use your XBox">
<ImageCell Text="1. Introduction"
Detail="Learn about your XBox and its capabilities."
ImageSource="xbox.png" />
<ImageCell Text="2. Turn it on"
Detail="Learn how to turn on your XBox."
ImageSource="xbox.png" />
<ImageCell Text="3. Connect your controller"
Detail="Learn how to connect your wireless controller."
ImageSource="xbox.png" />
<ImageCell Text="4. Launch a game"
Detail="Learn how to launch a game."
ImageSource="xbox.png" />
</TableSection>
</TableRoot>
</TableView>
다음 스크린샷은 결과 셀 모양을 보여줍니다.
각 항목이 ImageCell인 TableView의 스크린샷
셀 전환
SwitchCell에서 텍스트와 스위치를 표시하며, 스위치는 켜거나 끌 수 있습니다. SwitchCell는 다음 속성을 정의합니다.
-
Text형식의string은 스위치 옆에 표시될 텍스트를 정의합니다. -
On,bool유형으로, 스위치가 켜져 있는지 꺼져 있는지를 나타냅니다. OnColor및 Color 형식은 스위치가 켜진 상태일 때 스위치의 색을 나타냅니다.
이러한 속성은 BindableProperty 개체에서 지원되며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
SwitchCell 또한 스위치의 상태가 변경될 때 발생하는 OnChanged 이벤트를 정의합니다. 이 이벤트와 함께 제공되는 ToggledEventArgs 개체는 스위치가 켜져 있는지 아니면 꺼져 있는지를 나타내는 Value 속성을 정의합니다.
다음 예제에서는
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<SwitchCell Text="Airplane Mode"
On="False" />
<SwitchCell Text="Notifications"
On="True" />
</TableSection>
</TableRoot>
</TableView>
다음 스크린샷은 결과 셀 모양을 보여줍니다.
TableView에 있는 각 항목이 SwitchCell인 스크린샷
입력 셀
EntryCell는 편집 가능한 레이블과 텍스트 데이터를 표시합니다. TableView는 다음과 같은 속성을 정의합니다.
-
HorizontalTextAlignment, TextAlignment 형식은 텍스트의 가로 맞춤을 나타냅니다. -
Keyboard유형Keyboard는 텍스트를 입력할 때 표시할 키보드를 결정합니다. - 형식의 은 편집 가능한 텍스트의 왼쪽에 표시할 텍스트를 나타냅니다.
-
LabelColor형식 Color은(는) 레이블 텍스트의 색상을 정의합니다. -
Placeholder형식의string에서Text속성이 비어 있을 때 표시되는 텍스트를 나타냅니다. string유형의Text은 편집 가능한 텍스트를 정의합니다.- 형식
VerticalTextAlignment의 TextAlignment은 텍스트의 세로 맞춤을 나타냅니다.
이러한 속성은 BindableProperty 개체에 의해 지원되므로, 데이터 바인딩의 대상으로 사용할 수 있으며 스타일을 적용할 수 있습니다.
EntryCell 또한 사용자가 반환 키에 도달할 때 발생하는 이벤트를 정의 Completed 하여 편집이 완료되었음을 나타냅니다.
다음 예제에서는 ImageCell을(를) 사용하여 TableView의 항목 모양을 정의하는 방법을 보여줍니다.
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<EntryCell Label="Login"
Placeholder="username" />
<EntryCell Label="Password"
Placeholder="password" />
</TableSection>
</TableRoot>
</TableView>
다음 스크린샷은 결과 셀 모양을 보여줍니다.
각 항목이 EntryCell인 TableView의 스크린샷입니다.
셀 보기
ViewCell는 View에 의해 정의된 모양을 가진 사용자 지정 셀입니다. ViewCell 는 View 셀의 내용을 나타내는 뷰를 정의하는 형식 View의 속성을 정의합니다. 이 속성은 BindableProperty 개체에 의해 지원되며, 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.
다음 예제는 TableView에서 항목의 모양을 정의하기 위해 ViewCell를 사용하는 방법을 보여줍니다.
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Silent">
<ViewCell>
<Grid RowDefinitions="Auto,Auto"
ColumnDefinitions="0.5*,0.5*">
<Label Text="Vibrate"
Margin="10,10,0,0"/>
<Switch Grid.Column="1"
HorizontalOptions="End" />
<Slider Grid.Row="1"
Grid.ColumnSpan="2"
Margin="10"
Minimum="0"
Maximum="10"
Value="3" />
</Grid>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
ViewCell 내부에서, 레이아웃은 모든 .NET MAUI 레이아웃으로 관리할 수 있습니다. 다음 스크린샷은 결과 셀 모양을 보여줍니다.
항목이 ViewCell인 TableView의 스크린샷
항목 크기 설정
기본적으로 TableView에서 같은 형식의 모든 셀은 동일한 높이를 가집니다. 그러나 이 동작은 HasUnevenRows 및 RowHeight 속성으로 변경할 수 있습니다. 기본적으로 HasUnevenRows 속성은 false입니다.
속성은 int형을 사용하여 TableView에서 각 항목의 높이를 나타내도록 설정할 수 있으며, 이는 false인 경우에 가능합니다.
HasUnevenRows이 true로 설정되면, TableView의 각 항목의 높이가 다를 수 있습니다. 각 항목의 높이는 각 셀의 내용에서 파생되므로 각 항목의 크기는 해당 내용에 맞게 조정됩니다.
HasUnevenRows 속성이 true인 경우, 셀 내 요소의 레이아웃 관련 속성을 변경하여 런타임에 개별 셀의 크기를 프로그래밍 방식으로 조정할 수 있습니다. 다음 예제에서는 탭할 때 셀의 높이를 변경합니다.
void OnViewCellTapped(object sender, EventArgs e)
{
label.IsVisible = !label.IsVisible;
viewCell.ForceUpdateSize();
}
이 예제에서는 OnViewCellTapped 이벤트 처리기가 셀이 탭될 때 실행됩니다. 이벤트 핸들러는 Label 개체의 가시성을 업데이트하고, 메서드는 Cell.ForceUpdateSize 셀의 크기를 업데이트합니다.
경고
동적 항목 크기 조정을 과도하게 사용하면 TableView 성능이 저하될 수 있습니다.
오른쪽에서 왼쪽 레이아웃
TableView은 FlowDirection 속성을 RightToLeft로 설정하여 콘텐츠를 오른쪽에서 왼쪽으로 흐르는 방향으로 배열할 수 있습니다. 그러나 이 속성은 페이지 또는 루트 레이아웃에 이상적으로 설정되어야 하며, 이는 페이지 또는 루트 레이아웃 내의 모든 요소들이 흐름 방향에 반응하도록 만듭니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TableViewDemos.RightToLeftTablePage"
Title="Right to left TableView"
FlowDirection="RightToLeft">
<TableView Intent="Settings">
...
</TableView>
</ContentPage>
부모가 있는 요소의 기본값 FlowDirection은 MatchParent입니다. 따라서 는 FlowDirection 속성 값을 ContentPage에서 상속받습니다.
.NET MAUI