fix: replace deprecated ListView with CollectionView in TodoApp.MAUI (#566)

Replaces the obsolete Microsoft.Maui.Controls.ListView (CS0618) with
CollectionView in the TodoApp.MAUI sample's MainPage, removing the
ViewCell wrapper the new control doesn't use and switching the tap
handler from ItemTapped/ItemTappedEventArgs to
SelectionChanged/SelectionChangedEventArgs (SelectionMode=Single,
resetting SelectedItem afterward to preserve tap-then-deselect
behavior). Also removes the now-unused implicit ListView style from
Styles.xaml.

Closes #515

Co-authored-by: ahall <ahall@cloudflare.com>

Author: adrianhall

samples/todoapp/TodoApp.MAUI/MainPage.xaml

@@ -21,29 +21,30 @@
         </Grid.ColumnDefinitions>
 
         <!--  List of items  -->
-        <ListView ItemTapped="OnListItemTapped" ItemsSource="{Binding Items}">
-            <ListView.ItemTemplate>
+        <CollectionView
+            ItemsSource="{Binding Items}"
+            SelectionChanged="OnListItemTapped"
+            SelectionMode="Single">
+            <CollectionView.ItemTemplate>
                 <DataTemplate x:DataType="models:TodoItem">
-                    <ViewCell>
-                        <Grid Style="{StaticResource listItemContainer}">
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="Auto" />
-                            </Grid.RowDefinitions>
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
+                    <Grid Style="{StaticResource listItemContainer}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
 
-                            <Label Style="{StaticResource listItemTitle}" Text="{Binding Title}" />
-                            <Image
-                                Grid.Column="1"
-                                IsVisible="{Binding IsComplete}"
-                                Style="{StaticResource listItemIcon}" />
-                        </Grid>
-                    </ViewCell>
+                        <Label Style="{StaticResource listItemTitle}" Text="{Binding Title}" />
+                        <Image
+                            Grid.Column="1"
+                            IsVisible="{Binding IsComplete}"
+                            Style="{StaticResource listItemIcon}" />
+                    </Grid>
                 </DataTemplate>
-            </ListView.ItemTemplate>
-        </ListView>
+            </CollectionView.ItemTemplate>
+        </CollectionView>
 
         <Grid Grid.Row="1" ColumnDefinitions="*,Auto">
             <Border Grid.Column="0" Style="{StaticResource roundedCornerFrame}">

samples/todoapp/TodoApp.MAUI/MainPage.xaml.cs

@@ -24,14 +24,14 @@ protected override void OnAppearing()
         this._viewModel.RefreshItemsCommand.Execute(null);
     }
 
-    public void OnListItemTapped(object sender, ItemTappedEventArgs e)
+    public void OnListItemTapped(object sender, SelectionChangedEventArgs e)
     {
-        if (e.Item is TodoItem item)
+        if (e.CurrentSelection.FirstOrDefault() is TodoItem item)
         {
             this._viewModel.UpdateItemCommand.Execute(item.Id);
         }
 
-        if (sender is ListView itemList)
+        if (sender is CollectionView itemList)
         {
             itemList.SelectedItem = null;
         }

samples/todoapp/TodoApp.MAUI/Resources/Styles/Styles.xaml

@@ -278,11 +278,6 @@
         <Setter Property="HorizontalTextAlignment" Value="Center" />
     </Style>
 
-    <Style TargetType="ListView">
-        <Setter Property="SeparatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
-        <Setter Property="RefreshControlColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
-    </Style>
-
     <Style TargetType="Picker">
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
         <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />