Skip to content

Commit 7faa3ac

Browse files
[NET10] Add migration section to TableView (#2994)
* docs(.NET10): Add migration section to TableView with before/after CollectionView examples; update ms.date * Apply suggestion from @jfversluis --------- Co-authored-by: Gerald Versluis <[email protected]>
1 parent e68ab28 commit 7faa3ac

File tree

1 file changed

+78
-1
lines changed

1 file changed

+78
-1
lines changed

docs/user-interface/controls/tableview.md

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "TableView"
33
description: "The .NET MAUI TableView displays a table of scrollable items that can be grouped into sections."
4-
ms.date: 03/13/2025
4+
ms.date: 08/19/2025
55
ms.custom: sfi-image-nochange
66
---
77

@@ -18,6 +18,83 @@ The .NET Multi-platform App UI (.NET MAUI) <xref:Microsoft.Maui.Controls.TableVi
1818
1919
::: moniker-end
2020

21+
## Migrate from TableView to CollectionView
22+
23+
::: moniker range=">=net-maui-10.0"
24+
25+
<xref:Microsoft.Maui.Controls.TableView> is deprecated in .NET 10. For most scenarios, you should migrate to <xref:Microsoft.Maui.Controls.CollectionView>, which uses an <xref:Microsoft.Maui.Controls.ItemsView.ItemTemplate> to define item appearance rather than cells.
26+
27+
- TextCell/ImageCell/ViewCell → Define a DataTemplate for your item type
28+
- SwitchCell/EntryCell → Compose those controls inside the item template
29+
- Grouping → Use `IsGrouped="true"` with `GroupHeaderTemplate` / `GroupFooterTemplate`
30+
31+
Before (TableView with TextCell):
32+
33+
```xaml
34+
<TableView Intent="Menu">
35+
<TableRoot>
36+
<TableSection Title="Chapters">
37+
<TextCell Text="1. Introduction" Detail="Overview" />
38+
<TextCell Text="2. Layouts" Detail="Grids, stacks" />
39+
</TableSection>
40+
</TableRoot>
41+
</TableView>
42+
```
43+
44+
After (CollectionView with DataTemplate):
45+
46+
```xaml
47+
<CollectionView ItemsSource="{Binding Chapters}">
48+
<CollectionView.ItemTemplate>
49+
<DataTemplate>
50+
<Grid ColumnDefinitions="*,Auto" Padding="12,8">
51+
<VerticalStackLayout>
52+
<Label Text="{Binding Title}" FontAttributes="Bold" />
53+
<Label Text="{Binding Detail}" FontSize="12" TextColor="Gray" />
54+
</VerticalStackLayout>
55+
<Image Grid.Column="1" Source="chevron.png" VerticalOptions="Center" />
56+
</Grid>
57+
</DataTemplate>
58+
</CollectionView.ItemTemplate>
59+
</CollectionView>
60+
```
61+
62+
Before (TableView with SwitchCell):
63+
64+
```xaml
65+
<TableView Intent="Settings">
66+
<TableRoot>
67+
<TableSection>
68+
<SwitchCell Text="Airplane Mode" On="False" />
69+
</TableSection>
70+
</TableRoot>
71+
</TableView>
72+
```
73+
74+
After (CollectionView with composed controls):
75+
76+
```xaml
77+
<CollectionView ItemsSource="{Binding Settings}">
78+
<CollectionView.ItemTemplate>
79+
<DataTemplate x:DataType="local:SettingItem">
80+
<Grid ColumnDefinitions="*,Auto" Padding="12,8">
81+
<Label Text="{Binding Name}" VerticalOptions="Center" />
82+
<Switch Grid.Column="1"
83+
IsToggled="{Binding IsOn, Mode=TwoWay}" />
84+
</Grid>
85+
</DataTemplate>
86+
</CollectionView.ItemTemplate>
87+
</CollectionView>
88+
```
89+
90+
For guidance on building lists, see:
91+
92+
- [Populate a CollectionView with data](~/user-interface/controls/collectionview/populate-data.md)
93+
- [Define item appearance](~/user-interface/controls/collectionview/populate-data.md#define-item-appearance)
94+
- [Display grouped data in a CollectionView](~/user-interface/controls/collectionview/grouping.md)
95+
96+
::: moniker-end
97+
2198
While <xref:Microsoft.Maui.Controls.TableView> manages the appearance of the table, the appearance of each item in the table is defined by a <xref:Microsoft.Maui.Controls.Cell>. .NET MAUI includes five cell types that are used to display different combinations of data, and you can also define custom cells that display any content you want.
2299

23100
<xref:Microsoft.Maui.Controls.TableView> defines the following properties:

0 commit comments

Comments
 (0)