TableView

[アーティクル]
03/20/2024

.NET Multi-platform App UI (.NET MAUI) TableView には、セクションにグループ化できるスクロール可能な項目のテーブルが表示されます。通常、TableView は、設定のテーブル表示など、各行の外観が異なる項目を表示するために使用されます。

TableView がテーブルの外観を管理する一方で、テーブル内の各項目の外観は Cell で定義されます。 .NET MAUI には、さまざまなデータの組み合わせを表示するために使用される 5 つのセルの種類が含まれており、必要なコンテンツを表示するカスタムセルを定義することもできます。

TableView には、次のプロパティが定義されています。

TableIntent 型の Intent は、iOS のテーブルの目的を定義します。
bool 型の HasUnevenRows は、テーブル内の項目に異なる高さの行を含めることができるかどうかを示します。このプロパティの既定値は false です。
TableRoot 型の Root は、TableView の子を定義します。
int 型の RowHeight は、HasUnevenRows が false の場合に各行の高さを決定します。

HasUnevenRows と RowHeight のプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データバインディングの対象にすることができ、スタイルを設定できます。

Intent プロパティの値は、iOS でのみ TableView の外観を定義するのに役立ちます。 TableIntent プロパティをこの列挙体のメンバーに設定する方法を次のコードに示します。

Menu は、選択可能なメニューを表示します。
Settings は、構成設定のテーブルを表示します。
Form は、データ入力フォームを表示します。
Data は、データを表示します。

Note

TableView は、項目のコレクションへのバインドをサポートするようには設計されていません。

TableView を作成する

テーブルを作成するには、TableView オブジェクトを作成し、Intent プロパティを TableIntent メンバーに設定します。 TableView の子は、1 つ以上の TableSection オブジェクトの親である TableRoot オブジェクトである必要があります。それぞれの TableSection は、色を設定できるオプションのタイトルと、1 つ以上の 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 オブジェクトを使用してメニューを定義します。

Note

Command プロパティが有効な ICommand に設定されている場合、それぞれの TextCell がタップされたときにコマンドを実行できます。

セルの外観を定義する

TableView 内の各項目は Cell オブジェクトで定義され、使用される Cell 型によってセルのデータの外観が定義されます。 .NET MAUI には、次の組み込みセルが含まれています。

TextCell は、プライマリテキストとセカンダリテキストを別々の行に表示します。
ImageCell は、プライマリテキストとセカンダリテキストとともに画像を別々の行に表示します。
SwitchCell は、テキストと、オンまたはオフに切り替えることができるスイッチを表示します。
EntryCell は、編集可能なラベルとテキストを表示します。
ViewCell は、外観が View で定義されているカスタムセルです。このセルタイプは、TableView 内の各項目の外観を完全に定義する場合に使用する必要があります。

テキストのセル

TextCell は、プライマリテキストとセカンダリテキストを別々の行に表示します。 TextCell には、次のプロパティが定義されています。

string 型の Text は、表示するプライマリテキストを定義します。
Color 型の TextColor は、プライマリテキストの色を表します。
string 型の Detail は、表示するセカンダリテキストを定義します。
Color 型の DetailColor は、セカンダリテキストの色を表します。
ICommand 型の Command は、セルがタップされたときに実行されるコマンドを定義します。
object 型の CommandParameter は、コマンドに渡されるパラメーターを表します。

これらのプロパティは、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>

次のスクリーンショットは、セルの外観の結果を示しています。

画像セル

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 には、次のプロパティが定義されています。

string 型の Text は、スイッチの横に表示するテキストを定義します。
bool 型の On は、スイッチがオンかオフかを表します。
Color 型の OnColor は、スイッチがオンの場合の色を示します。

SwitchCell は、スイッチの状態が変化したときに発生する OnChanged イベントも定義します。このイベントに付随する ToggledEventArgs オブジェクトは、スイッチがオンかオフかを示す Value プロパティを定義します。

次の例は SwitchCell を使用して TableView のアイテムの外観を設定する方法を示しています。

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

次のスクリーンショットは、セルの外観の結果を示しています。

各項目が SwitchCell である TableView のスクリーンショット。

Entry cell

EntryCell には、ラベルと編集可能なテキストデータが表示されます。 EntryCell には、次のプロパティが定義されています。

TextAlignment 型の HorizontalTextAlignment は、テキストの水平方向の配置を表します。
Keyboard 型の Keyboard は、テキストを入力するときに表示するキーボードを決定します。
string 型の Label は、編集可能なテキストの左側に表示するテキストを表します。
Color 型の LabelColor は、ラベルのテキストの色を定義します。
string 型の Placeholder は、Text プロパティが空の場合に表示されるテキストを表します。
string 型の Text は、編集可能なテキストを定義します。
TextAlignment 型の VerticalTextAlignment は、テキストの垂直方向の配置を表します。

EntryCell はまた、ユーザーがリターンキーを押したときに発生する Completed イベントを定義して、編集が完了したことを示します。

次の例は EntryCell を使用して 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 オブジェクトが基になっています。つまり、データバインディングの対象にすることができ、スタイルを設定できます。

Note

View プロパティは ViewCell クラスのコンテンツプロパティであるため、XAML から明示的に設定する必要はありません。

次の例は 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 プロパティに int の値を設定し、TableView の各アイテムの高さを表すことができます。これは、HasUnevenRows が false の場合に有効です。 HasUnevenRows が true に設定されている場合、TableView 内の各項目は異なる高さを設定できます。各アイテムの高さは各セルの内容から派生するため、各アイテムはその内容に合わせてサイズが設定されます。

個々のセルは、実行時にプログラムでサイズ変更できます。HasUnevenRows プロパティが true の場合は、セル内の要素のレイアウト関連プロパティを変更します。次の例では、タップ時にセルの高さが変更されます。

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

この例では、タップされているセルに応答して OnViewCellTapped イベントハンドラーが実行されます。イベントハンドラーは Label オブジェクトの可視性を更新し、Cell.ForceUpdateSize メソッドはセルのサイズを更新します。 Label が表示されている場合は、セルの高さが増加します。 Label が非表示になっている場合は、セルの高さが減少します。

警告

項目の動的なサイズ変更を過度に使用すると、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 を作成する

セルの外観を定義する

テキストのセル

画像セル

セルの切り替え

Entry cell

ビューのセル

項目のサイズ設定

右から左へのレイアウト

フィードバック

その他のリソース