TableView

아티클
02/13/2024

.NET 다중 플랫폼 앱 UI(.NET MAUI) TableView 는 섹션으로 그룹화할 수 있는 스크롤 가능한 항목의 테이블을 표시합니다. A TableView 는 일반적으로 각 행의 모양이 다른 항목(예: 설정 표 표시)을 표시하는 데 사용됩니다.

테이블의 모양을 관리하는 동안 TableView 테이블의 각 항목 모양은 에 의해 Cell정의됩니다. .NET MAUI에는 서로 다른 데이터 조합을 표시하는 데 사용되는 5가지 셀 형식이 포함되어 있으며 원하는 콘텐츠를 표시하는 사용자 지정 셀을 정의할 수도 있습니다.

TableView는 다음 속성을 정의합니다.

Intent형식 TableIntent의 iOS에서 테이블의 용도를 정의합니다.
HasUnevenRows형식 bool의 은 테이블의 항목에 서로 다른 높이의 행을 가질 수 있는지 여부를 나타냅니다. 이 속성의 기본값은 false입니다.
Root형식 TableRoot의 .은 .의 자식 값을 TableView정의합니다.
RowHeight형식 int의 경우 각 행 HasUnevenRowsfalse의 높이를 결정합니다.

및 RowHeight 속성은 HasUnevenRows 개체에 의해 BindableProperty 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

속성 값 Intent 은 iOS에서만 모양을 정의하는 TableView 데 도움이 됩니다. 이 속성은 다음 멤버를 정의하는 열거형 값 TableIntent 으로 설정해야 합니다.

Menu- 선택 가능한 메뉴를 표시합니다.
Settings구성 설정 테이블을 표시하기 위한 입니다.
Form- 데이터 입력 양식을 표시하기 위한 것입니다.
Data데이터를 표시하기 위한 입니다.

참고 항목

TableView 는 항목 컬렉션에 대한 바인딩을 지원하도록 설계되지 않았습니다.

TableView 만들기

테이블을 만들려면 개체를 TableView 만들고 해당 Intent 속성을 멤버로 TableIntent 설정합니다. 자 TableView 식은 하나 이상의 TableSection 개체에 TableRoot 대한 부모인 개체여야 합니다. 각각 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 메뉴를 정의합니다.

참고 항목

속성이 유효한 ICommand 구현으로 설정된 경우 탭할 Command 때 각각 TextCell 명령을 실행할 수 있습니다.

셀 모양 정의

각 TableView 항목은 개체에 의해 Cell 정의되며 Cell 사용되는 형식은 셀 데이터의 모양을 정의합니다. .NET MAUI에는 다음과 같은 기본 제공 셀이 포함되어 있습니다.

TextCell- 기본 텍스트와 보조 텍스트를 별도의 줄에 표시합니다.
ImageCell- 기본 및 보조 텍스트가 있는 이미지를 별도의 줄에 표시합니다.
SwitchCell- 켜거나 끌 수 있는 텍스트와 스위치를 표시합니다.
EntryCell- 편집 가능한 레이블 및 텍스트를 표시합니다.
ViewCell- 모양이 .에 의해 정의된 사용자 지정 셀입니다 View. 이 셀 형식은 에 있는 TableView각 항목의 모양을 완전히 정의하려는 경우에 사용해야 합니다.

텍스트 셀

기본 TextCell 텍스트와 보조 텍스트를 별도의 줄에 표시합니다. TextCell는 다음 속성을 정의합니다.

Text형식 string의 은 표시할 기본 텍스트를 정의합니다.
TextColor형식 Color의 는 기본 텍스트의 색을 나타냅니다.
Detail형식 string의 은 표시할 보조 텍스트를 정의합니다.
DetailColor의 형식 Color은 보조 텍스트의 색을 나타냅니다.
Command형식 ICommand의 셀을 탭할 때 실행되는 명령을 정의합니다.
CommandParameter형식 object의 는 명령에 전달되는 매개 변수를 나타냅니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

다음 예제에서는 a를 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>

다음 스크린샷은 결과 셀 모양을 보여줍니다.

이미지 셀

기본 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 합니다.

다음 예제에서는 a를 SwitchCell 사용하여 다음 항목의 모양을 정의하는 방법을 보여 있습니다.TableView

<TableView Intent="Settings">
    <TableRoot>
        <TableSection>
            <SwitchCell Text="Airplane Mode"
                        On="False" />
            <SwitchCell Text="Notifications"
                        On="True" />
        </TableSection>
    </TableRoot>
</TableView>

다음 스크린샷은 결과 셀 모양을 보여줍니다.

각 항목이 SwitchCell인 TableView의 스크린샷

항목 셀

EntryCell 편집 가능한 레이블 및 텍스트 데이터를 표시합니다. EntryCell는 다음 속성을 정의합니다.

HorizontalTextAlignment형식 TextAlignment은 텍스트의 가로 맞춤을 나타냅니다.
Keyboard형식 Keyboard은 텍스트를 입력할 때 표시할 키보드를 결정합니다.
Label형식 string은 편집 가능한 텍스트의 왼쪽에 표시할 텍스트를 나타냅니다.
LabelColor형식 Color의 레이블 텍스트 색을 정의합니다.
Placeholder형식 string의 속성이 비어 있을 때 Text 표시되는 텍스트를 나타냅니다.
Text형식 string의 은 편집 가능한 텍스트를 정의합니다.
VerticalTextAlignment형식 TextAlignment의 는 텍스트의 세로 맞춤을 나타냅니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

EntryCell 또한 사용자가 반환 키에 도달할 때 발생하는 이벤트를 정의 Completed 하여 편집이 완료되었음을 나타냅니다.

다음 예제에서는 EntryCell 에 TableView있는 항목의 모양을 정의하는 방법을 보여줍니다.

<TableView Intent="Settings">
    <TableRoot>
        <TableSection>
            <EntryCell Label="Login"
                       Placeholder="username" />
            <EntryCell Label="Password"
                       Placeholder="password" />
        </TableSection>
    </TableRoot>
</TableView>

다음 스크린샷은 결과 셀 모양을 보여줍니다.

각 항목이 EntryCell인 TableView의 스크린샷

셀 보기

A ViewCell 는 모양이 .에 의해 정의된 사용자 지정 셀입니다 View. ViewCell 는 View 셀의 내용을 나타내는 뷰를 정의하는 형식 View의 속성을 정의합니다. 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

참고 항목

View 속성은 ViewCell 클래스의 콘텐츠 속성이므로 XAML에서 명시적으로 설정할 필요가 없습니다.

다음 예제에서는 a를 ViewCell 사용하여 항목의 모양을 정의합니다.TableView

<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 같습니다. 그러나 이 동작은 속성과 RowHeight 함께 HasUnevenRows 변경할 수 있습니다. 기본적으로 속성은 HasUnevenRows .입니다 false.

속성이 RowHeight 있는 경우 HasUnevenRows 각 항목TableView의 높이를 나타내는 속성으로 설정할 int 수 있습니다false. HasUnevenRows 설정true되면 각 항목의 높이가 TableView 다를 수 있습니다. 각 항목의 높이는 각 셀의 내용에서 파생되므로 각 항목의 크기는 해당 내용에 맞게 조정됩니다.

속성이 있는 경우 HasUnevenRows 셀 내 요소의 레이아웃 관련 속성을 변경하여 런타임에 개별 셀의 크기를 프로그래밍 방식으로 조정할 수 있습니다 true. 다음 예제에서는 탭할 때 셀의 높이를 변경합니다.

void OnViewCellTapped(object sender, EventArgs e)
{
    label.IsVisible = !label.IsVisible;
    viewCell.ForceUpdateSize();
}

이 예제에서는 OnViewCellTapped 이벤트 처리기가 탭되는 셀에 대한 응답으로 실행됩니다. 이벤트 처리기는 개체의 Label 표시 유형을 업데이트하고 메서드는 Cell.ForceUpdateSize 셀의 크기를 업데이트합니다. Label 표시된 경우 셀의 높이가 증가합니다. 셀이 Label 보이지 않으면 셀의 높이가 감소합니다.

Warning

동적 항목 크기 조정을 과도하게 사용하면 성능이 저하될 TableView 수 있습니다.

오른쪽에서 왼쪽 레이아웃

TableView 에서는 속성을 .로 설정 FlowDirection 하여 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃할 RightToLeft수 있습니다. 그러나 이 속성은 FlowDirection 페이지 또는 루트 레이아웃에서 설정해야 하며, 이로 인해 페이지 내의 모든 요소 또는 루트 레이아웃이 흐름 방향에 응답합니다.

<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. 따라서 속성 값은 TableView .에서 ContentPage상속됩니다FlowDirection.

TableView

TableView 만들기

셀 모양 정의

텍스트 셀

이미지 셀

셀 전환

항목 셀

셀 보기

항목 크기 조정

오른쪽에서 왼쪽 레이아웃

피드백

추가 리소스