update samples

Author: Poker-sang

components/Behaviors/samples/ItemsView Behaviors.md

@@ -11,54 +11,21 @@ discussion-id: 532
 issue-id: 0
 icon: assets/icon.png
 ---
+The new control `ItemsView` which can replace `ListView`&`GridView`, does not support `ISupportIncrementalLoading`.
 
-<!-- To know about all the available Markdown syntax, Check out https://docs.microsoft.com/contribute/markdown-reference -->
-<!-- Ensure you remove all comments before submission, to ensure that there are no formatting issues when displaying this page.  -->
-<!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
-<!-- **Note:** All links to other docs.microsoft.com pages should be relative without locale, i.e. for the one above would be /contribute/markdown-reference -->
-<!-- Included images should be optimized for size and not include any Intellectual Property references. -->
+Here are some Behaviors to help you make `ItemsView` support `ISupportIncrementalLoading`.
 
-<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
+## NeedMoreItemTriggerBehaviorSample
 
-# ItemsView Behaviors
-
-TODO: Fill in information about this experiment and how to get started here...
-
-## Custom Control
-
-You can inherit from an existing component as well, like `Panel`, this example shows a control without a
-XAML Style that will be more light-weight to consume by an app developer:
-
-> 
-
-## Templated Controls
-
-The Toolkit is built with templated controls. This provides developers a flexible way to restyle components
-easily while still inheriting the general functionality a control provides. The examples below show
-how a component can use a default style and then get overridden by the end developer.
-
-TODO: Two types of templated control building methods are shown. Delete these if you're building a custom component.
-Otherwise, pick one method for your component and delete the files related to the unchosen `_ClassicBinding` or `_xBind`
-classes (and the custom non-suffixed one as well). Then, rename your component to just be your component name.
-
-The `_ClassicBinding` class shows the traditional method used to develop components with best practices.
-
-### Implict style
+This trigger behavior can excute actions when the `ItemsView` scrolling to bottom.
+You can customize the loading behavior through actions, but note that you may need to debounce manually.
 
 > [!SAMPLE NeedMoreItemTriggerBehaviorSample]
 
-> [!SAMPLE LoadMoreItemBehaviorSample]
-
-### Custom style
-
-
-## Templated Controls with x:Bind
-
-This is an _experimental_ new way to define components which allows for the use of x:Bind within the style.
-
-### Implict style
-
-
-### Custom style
+## LoadMoreItemBehaviorSample
 
+If you don't have complex loading requirements, you can use this behavior.
+It automatically calls `ISupportIncrementalLoading.LoadMoreItemsAsync` when the `ItemsSource` changes, in addition to when `ItemsView` scrolls to the bottom.
+Besides, this behavior has a built-in debounce function.
 
+> [!SAMPLE LoadMoreItemBehaviorSample]

components/Behaviors/samples/LoadMoreItemBehaviorSample.xaml

@@ -26,7 +26,10 @@
                     MinRowSpacing="5" />
             </ItemsView.Layout>
             <interactivity:Interaction.Behaviors>
-                <controls:LoadMoreItemBehavior LoadingOffset="{x:Bind LoadingOffset, Mode=OneWay}" />
+                <controls:LoadMoreItemBehavior
+                    IsActive="{x:Bind IsActive, Mode=OneWay}"
+                    LoadCount="{x:Bind (x:Int32)LoadCount, Mode=OneWay}"
+                    LoadingOffset="{x:Bind LoadingOffset, Mode=OneWay}" />
             </interactivity:Interaction.Behaviors>
             <ItemsView.ItemTemplate>
                 <DataTemplate x:DataType="x:Int32">

components/Behaviors/samples/LoadMoreItemBehaviorSample.xaml.cs

@@ -9,7 +9,9 @@
 
 namespace BehaviorsExperiment.Samples;
 
-[ToolkitSampleNumericOption("LoadingOffset", 100d, 50d, 500d, 50d, Title = "LoadingOffset")]
+[ToolkitSampleBoolOption(nameof(LoadMoreItemBehavior.IsActive), true, Title = nameof(LoadMoreItemBehavior.IsActive))]
+[ToolkitSampleNumericOption(nameof(LoadMoreItemBehavior.LoadingOffset), 100d, 50d, 500d, 50d, Title = nameof(LoadMoreItemBehavior.LoadingOffset))]
+[ToolkitSampleNumericOption(nameof(LoadMoreItemBehavior.LoadCount), 20, 1, 50, 1, Title = nameof(LoadMoreItemBehavior.LoadCount))]
 
 [ToolkitSample(id: nameof(LoadMoreItemBehaviorSample), "LoadMoreItemBehavior", description: $"A sample for showing how to create and use a LoadMoreItemBehavior.")]
 public sealed partial class LoadMoreItemBehaviorSample : Page

components/Behaviors/samples/NeedMoreItemTriggerBehaviorSample.xaml

@@ -27,7 +27,7 @@
                     MinRowSpacing="5" />
             </ItemsView.Layout>
             <interactivity:Interaction.Behaviors>
-                <controls:NeedMoreItemTriggerBehavior LoadingOffset="{x:Bind LoadingOffset, Mode=OneWay}">
+                <controls:NeedMoreItemTriggerBehavior IsActive="{x:Bind IsActive, Mode=OneWay}"  LoadingOffset="{x:Bind LoadingOffset, Mode=OneWay}">
                     <core:CallMethodAction MethodName="IncrementCount" TargetObject="{x:Bind}" />
                 </controls:NeedMoreItemTriggerBehavior>
 

components/Behaviors/samples/NeedMoreItemTriggerBehaviorSample.xaml.cs

@@ -9,7 +9,8 @@
 
 namespace BehaviorsExperiment.Samples;
 
-[ToolkitSampleNumericOption("LoadingOffset", 100d, 50d, 500d, 50d, Title = "LoadingOffset")]
+[ToolkitSampleBoolOption(nameof(NeedMoreItemTriggerBehavior.IsActive), true, Title = nameof(NeedMoreItemTriggerBehavior.IsActive))]
+[ToolkitSampleNumericOption(nameof(NeedMoreItemTriggerBehavior.LoadingOffset), 100d, 50d, 500d, 50d, Title = nameof(NeedMoreItemTriggerBehavior.LoadingOffset))]
 
 [ToolkitSample(id: nameof(NeedMoreItemTriggerBehaviorSample), "NeedMoreItemTriggerBehavior", description: $"A sample for showing how to create and use a NeedMoreItemTriggerBehavior.")]
 public sealed partial class NeedMoreItemTriggerBehaviorSample : Page

components/Behaviors/src/LoadMoreItemBehavior.cs

@@ -96,9 +96,9 @@ public int LoadCount
     /// </summary>
     public event Func<ItemsView, EventArgs, Task<bool>>? LoadMoreRequested;
 
-    private MUXC.ItemsRepeater? ItemsRepeater => (MUXC.ItemsRepeater?)this.ScrollView?.Content;
+    private ItemsRepeater? ItemsRepeater => (ItemsRepeater?)this.ScrollView?.Content;
 
-    private ScrollView? ScrollView => this.AssociatedObject.ScrollView;
+    private ScrollView? ScrollView => this.AssociatedObject?.ScrollView;
 
     private long _scrollViewOnPropertyChangedToken;
     private long _itemsSourceOnPropertyChangedToken;
@@ -166,7 +166,7 @@ private async void ItemsSourceOnPropertyChanged(DependencyObject sender, Depende
     /// </summary>
     /// <remarks>
     /// <see cref="ItemsRepeater.SizeChanged"/> is the key to continuous loading.
-    /// When new data is loaded, it makes the <see cref="Microsoft.UI.Xaml.Controls.ItemsRepeater"/> of the <see cref="FrameworkElement.ActualHeight"/> larger,
+    /// When new data is loaded, it makes the <see cref="ItemsRepeater"/> of the <see cref="FrameworkElement.ActualHeight"/> larger,
     /// Or when the <see cref="ItemsView.ItemsSource"/> is changed to a different source or set for the first time, <see cref="FrameworkElement.ActualHeight"/> becomes 0.
     /// This method can reload the data.
     /// </remarks>
@@ -193,7 +193,7 @@ public async Task TryRaiseLoadMoreRequestedAsync()
         // Load until a new item is loaded in
         while (loadMore)
         {
-            if (!this.IsActive || this.IsLoadingMore)
+            if (this.AssociatedObject is null || !this.IsActive || this.IsLoadingMore)
                 return;
 
             // LoadMoreRequested is only triggered when the view is not filled.
@@ -231,7 +231,7 @@ public async Task TryRaiseLoadMoreRequestedAsync()
 
     private int GetItemsCount()
     {
-        return this.AssociatedObject.ItemsSource switch
+        return this.AssociatedObject?.ItemsSource switch
         {
             ICollection list => list.Count,
             IEnumerable enumerable => enumerable.Cast<object>().Count(),