Clean-up and remove code-behind for IncrementalLoadingCollection sample to use x:Bind instead

Author: michael-hawker

components/Collections/samples/IncrementalLoadingCollectionSample.xaml

@@ -19,18 +19,18 @@
             <TextBlock Text="Items are loaded incrementally when the view needs to show them (i.e., when the user scrolls the ListView)"
                        TextWrapping="Wrap" />
             <Button Margin="0,12,0,12"
-                    Click="RefreshCollection"
+                    Click="{x:Bind PeopleSource.RefreshAsync}"
                     Content="Refresh collection"
                     Style="{StaticResource AccentButtonStyle}" />
             <TextBlock>
                 <Run Text="Is loading:" />
                 <Run FontWeight="SemiBold"
-                     Text="{Binding IsLoading, Mode=OneWay}" />
+                     Text="{x:Bind PeopleSource.IsLoading, Mode=OneWay}" />
             </TextBlock>
             <TextBlock>
                 <Run Text="Has more items:" />
                 <Run FontWeight="SemiBold"
-                     Text="{Binding HasMoreItems, Mode=OneWay}" />
+                     Text="{x:Bind PeopleSource.HasMoreItems, Mode=OneWay}" />
             </TextBlock>
 
         </StackPanel>
@@ -43,7 +43,8 @@
               BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
               BorderThickness="1"
               CornerRadius="4">
-            <ListView x:Name="PeopleListView">
+            <ListView x:Name="PeopleListView"
+                      ItemsSource="{x:Bind PeopleSource, Mode=OneWay}">
                 <ListView.ItemTemplate>
                     <DataTemplate x:DataType="local:Person">
                         <Grid>

components/Collections/samples/IncrementalLoadingCollectionSample.xaml.cs

@@ -9,33 +9,20 @@ namespace CollectionsExperiment.Samples;
 [ToolkitSample(id: nameof(IncrementalLoadingCollectionSample), "Incremental Loading Collection", description: $"A sample for showing how to create and use a IncrementalLoadingCollection.")]
 public sealed partial class IncrementalLoadingCollectionSample : Page
 {
+    // IncrementalLoadingCollection can be bound to a GridView or a ListView. In this case it is a ListView called PeopleListView.
+    public IncrementalLoadingCollection<PeopleSource, Person> PeopleSource { get; set; } = new(new PeopleSource());
+
     public IncrementalLoadingCollectionSample()
     {
         this.InitializeComponent();
-        Load();
-    }
-    private void Load()
-    {
-        // IncrementalLoadingCollection can be bound to a GridView or a ListView. In this case it is a ListView called PeopleListView.
-        var collection = new IncrementalLoadingCollection<PeopleSource, Person>(new PeopleSource());
-        PeopleListView.ItemsSource = collection;
-
-        // Binds the collection to the page DataContext in order to use its IsLoading and HasMoreItems properties.
-        DataContext = collection;
-    }
-
-    private async void RefreshCollection(object sender, RoutedEventArgs e)
-    {
-        var collection = (IncrementalLoadingCollection<PeopleSource, Person>)PeopleListView.ItemsSource;
-        await collection.RefreshAsync();
     }
 }
 
 /// <summary>
 /// A sample implementation of the <see cref="IIncrementalSource{TSource}"/> interface.
 /// </summary>
 /// <seealso cref="IIncrementalSource{TSource}"/>
-public class PeopleSource : IIncrementalSource<Person>
+public partial class PeopleSource : IIncrementalSource<Person>
 {
     private readonly List<Person> _people;
 
@@ -94,7 +81,7 @@ public PeopleSource()
 /// <summary>
 /// A sample class used to show how to use the <see cref="IIncrementalSource{TSource}"/> interface.
 /// </summary>
-public class Person
+public partial class Person
 {
     /// <summary>
     /// Gets or sets the name of the person.