[.NET MAUI][TableView] TableView の基本

.NET MAUI

.NET MAUI TIPS

2022.09.17

本記事の概要
TableView の基本使用方法
.NET MAUI Tips

本記事の概要

TableView は、テキストやイメージなどをグループ化して表示するコントロールです。

この記事では TableView の基本使用方法について説明します。

公式サイト情報はコチラを参照してください。

TableView の基本

TableView の基本使用方法

XAML で TableView を作成するには <TableView> <TableRoot> を使用します。この<TableRoot> の中には、セクションを作成するために <TableSection> を置き、<TableSection> の中には、<TextCell> や <ImageCell>、<SwitchCell> といっや部品を配置することができます。

以下は、XAML で TableView を作成する例です。

この例では、「基本」と「コントロール」の２つのセクションを作成し、基本の中には２つの TextCell を、コントロールの中には 3つの TextCell を配置しています。

<TableSection> の Title プロパティを使用することで、セクションの見出し（この例では「基本」「コントロール」）を表示することができます。

また、<TextCell> では Text プロパティで見出しを、Detail プロパティで詳細テキストを表示することができます。

XAML の例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppSample.MainPage">

    <TableView Intent="Menu">
        <TableRoot>
            <TableSection Title="基本">
                <TextCell Text="1. .NET MAUI とは？"
                      Detail="この章では .NET MAUI とは何かについて説明します。" />
                <TextCell Text="2. Binding の基礎"
                      Detail="この章では Bindingの基礎について説明します。" />
            </TableSection>
            <TableSection Title="コントロール">
                <TextCell Text="1. Entry コントロール"
                      Detail="Entry コントロールの使い方について説明します。" />
                <TextCell Text="2. Label コントロール"
                      Detail="Label コントロールの使い方について説明します。" />
                <TextCell Text="3. Picker コントロール"
                      Detail="Picker コントロールの使い方について説明します。" />
            </TableSection>
        </TableRoot>
    </TableView>

</ContentPage>

TableView の基本