瀏覽範例
.NET 多平臺應用程式 UI (.NET MAUI) TableView 顯示一個可捲動的表格，分為不同的區段。 TableView 通常用於顯示每一行有不同樣式的專案，例如呈現設定表格。
這很重要
TableView 已被取代。 相反地，應該使用CollectionView。
從 TableView 移轉至 CollectionView
TableView 在 .NET 10 中已被取代。 在大部分情境中，您應該遷移至CollectionView，它使用ItemTemplate來定義項目外觀，而不是依賴儲存格。
- TextCell/ImageCell/ViewCell → 為您的項目類型定義 DataTemplate
- SwitchCell/EntryCell → 在項目範本內撰寫這些控制項
- 分組→使用
IsGrouped="true"GroupHeaderTemplate/GroupFooterTemplate
之前（帶有 TextCell 的 TableView）：
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Chapters">
<TextCell Text="1. Introduction" Detail="Overview" />
<TextCell Text="2. Layouts" Detail="Grids, stacks" />
</TableSection>
</TableRoot>
</TableView>
之後（CollectionView 與 DataTemplate）：
<CollectionView ItemsSource="{Binding Chapters}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="*,Auto" Padding="12,8">
<VerticalStackLayout>
<Label Text="{Binding Title}" FontAttributes="Bold" />
<Label Text="{Binding Detail}" FontSize="12" TextColor="Gray" />
</VerticalStackLayout>
<Image Grid.Column="1" Source="chevron.png" VerticalOptions="Center" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
之前（帶有 SwitchCell 的 TableView）：
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<SwitchCell Text="Airplane Mode" On="False" />
</TableSection>
</TableRoot>
</TableView>
之後 （具有組合控制項的 CollectionView）：
<CollectionView ItemsSource="{Binding Settings}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="local:SettingItem">
<Grid ColumnDefinitions="*,Auto" Padding="12,8">
<Label Text="{Binding Name}" VerticalOptions="Center" />
<Switch Grid.Column="1"
IsToggled="{Binding IsOn, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
指引如何建立清單，請參閱：
當TableView管理數據表的外觀時，數據表中每個項目的外觀是由Cell定義的。 .NET MAUI 包含五種用來顯示不同數據組合的數據格類型，您也可以定義顯示任何您想要內容的自定義單元格。
TableView 定義了以下屬性：
-
Intent類型的TableIntent定義了 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 顯示功能表的螢幕快照。
定義儲存格外觀
中的每個 TableView 項目都是由 Cell 物件定義，而 Cell 所使用的型別會定義儲存格的數據外觀。 .NET MAUI 包含下列內建單元格：
- TextCell，它將主要和次要文字分別顯示在不同的行上。
- ImageCell，它會在不同行上顯示包含主要和次要文字的影像。
- SwitchCell，其中顯示文字和可開啟或關閉的切換開關。
- EntryCell，顯示可編輯的標籤和文字。
- ViewCell，這是一個自定義儲存格，其外觀是由 View 定義的。 當您想要完整地定義 TableView 中每個項目的外觀時，應該使用這個儲存格類型。
文字儲存格
在TextCell上分別顯示主要文字和次要文字。 TextCell 定義下列屬性：
-
Text，其類型為string，定義了要顯示的主要文字。 -
TextColor型別 Color 表示主要文字的色彩。 -
Detail，型別為string，定義要顯示的次要文字。 -
DetailColor，類型為Color，表示次要文字的顏色。 - 以ICommand類型的
Command定義點選單元格時所執行的命令。 -
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 型屬性，以指定要顯示在儲存格中的影像。 這個屬性由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>
下列螢幕快照顯示產生的儲存格外觀：
TableView 的螢幕快照，其中每個專案都是 ImageCell。
切換儲存格
會顯示文字和一個可以開啟或關閉的切換開關。 SwitchCell 定義了以下屬性：
-
Text, 類型為string, 定義了要顯示在開關旁的文字。 -
On型bool表示開關是開啟還是關閉。 -
OnColor，Color類型，表示開位置時的開關顏色。
這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是資料綁定的目標，並且可以設定樣式。
SwitchCell 也定義當開關變更狀態時所引發的事件。 伴隨ToggledEventArgs此事件的物件定義了Value屬性，該屬性指出開關是開啟還是關閉。
下列範例顯示使用 TextCell 來定義 TableView 項目外觀：
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<SwitchCell Text="Airplane Mode"
On="False" />
<SwitchCell Text="Notifications"
On="True" />
</TableSection>
</TableRoot>
</TableView>
下列螢幕快照顯示儲存格的最終外觀：
TableView 的螢幕截圖，其中每個項目都是 SwitchCell。
輸入儲存格
EntryCell 是一個可以顯示可編輯標籤和文字資料的控件。 EntryCell 定義了以下屬性：
-
HorizontalTextAlignment型 TextAlignment 表示文字的水平對齊方式。 -
Keyboard類型Keyboard決定輸入文字時要顯示的鍵盤。 - 作為
類型的 ，用於顯示在可編輯文字左邊的文字。 -
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>
下列螢幕快照顯示產生的儲存格外觀：
TableView 的螢幕快照，其中每個項目都是 EntryCell。
檢視儲存格
ViewCell 是一個自定義儲存格，其外觀是由 View 定義的。 ViewCell 定義一個View屬性，其類型為View，用於定義代表單元格內容的檢視。 這個屬性由BindableProperty物件支援，這代表它可以作為資料繫結的目標，並且可以被設置樣式。
下面的範例顯示如何使用 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 佈局管理。 下列螢幕快照顯示產生的儲存格外觀：
調整項目大小
根據預設，TableView 中相同類型的所有儲存格的高度都是一樣的。 不過，您可以使用HasUnevenRows和RowHeight屬性來變更此行為。 預設情況下，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 屬性值。
