SmoothScrollIntoView ListView Extension

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -1,4 +1,4 @@
-<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
     <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@@ -439,7 +439,7 @@
     <Content Include="SamplePages\Menu\Menu.bind" />
     <Content Include="SamplePages\InAppNotification\InAppNotificationCode.bind" />
     <Content Include="SamplePages\InAppNotification\InAppNotificationXaml.bind" />
-    <Content Include="SamplePages\ListViewExtensions\ListViewExtensionsCode.bind" />
+    <Content Include="SamplePages\ListViewExtensions\ListViewExtensionsXaml.bind" />
     <Content Include="SamplePages\Implicit Animations\ImplicitAnimationsCode.bind" />
     <Content Include="SamplePages\DispatcherQueueHelper\DispatcherQueueHelperCode.bind" />
     <Content Include="SamplePages\TextToolbar\TextToolbar.bind" />
@@ -626,6 +626,7 @@
     <Content Include="SamplePages\Graph\LoginButtonXaml.bind" />
     <Content Include="SamplePages\Graph\PeoplePickerXaml.bind" />
     <Content Include="SamplePages\Graph\PersonViewXaml.bind" />
+    <Content Include="SamplePages\ListViewExtensions\ListViewExtensionsCode.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">

Microsoft.Toolkit.Uwp.SampleApp/Models/Sample.cs

@@ -23,6 +23,7 @@
 using Microsoft.Toolkit.Uwp.Helpers;
 using Microsoft.Toolkit.Uwp.Input.GazeInteraction;
 using Microsoft.Toolkit.Uwp.SampleApp.Models;
+using Microsoft.Toolkit.Uwp.UI;
 using Microsoft.Toolkit.Uwp.UI.Animations;
 using Microsoft.Toolkit.Uwp.UI.Controls;
 using Microsoft.Toolkit.Uwp.UI.Media;
@@ -674,8 +675,9 @@ private static Type LookForTypeByName(string typeName)
 
               // TODO Reintroduce graph controls
               // typeof(UserToPersonConverter)) // Search in Microsoft.Toolkit.Graph.Controls
+                ScrollItemPlacement.Default.GetType(), // Search in Microsoft.Toolkit.Uwp.UI
                 EasingType.Default.GetType(), // Microsoft.Toolkit.Uwp.UI.Animations
-                ImageBlendMode.Multiply.GetType(), // Search in Microsoft.Toolkit.Uwp.UI
+                ImageBlendMode.Multiply.GetType(), // Search in Microsoft.Toolkit.Uwp.UI.Media
                 Interaction.Enabled.GetType(), // Microsoft.Toolkit.Uwp.Input.GazeInteraction
                 DataGridGridLinesVisibility.None.GetType(), // Microsoft.Toolkit.Uwp.UI.Controls.DataGrid
                 GridSplitter.GridResizeDirection.Auto.GetType(), // Microsoft.Toolkit.Uwp.UI.Controls.Layout

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsCode.bind

@@ -1,32 +1,9 @@
-<Page
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
-    mc:Ignorable="d">
+<GridView x:Name="MyGridView"/>
 
-  <Page.Resources>
-    <DataTemplate x:Name="NormalTemplate">
-      <TextBlock Text="{Binding Title}" Foreground="Green"/>
-    </DataTemplate>
+using Microsoft.Toolkit.Uwp.UI;
 
-    <DataTemplate x:Name="AlternateTemplate">
-      <TextBlock Text="{Binding Title}" Foreground="Red"/>
-    </DataTemplate>
-  </Page.Resources>
+// Scrolling with index
+await MyGridView.SmoothScrollIntoViewWithIndexAsync(index: int, itemPlacement: ScrollItemPlacement, disableAnimation: bool, scrollIfVisibile: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);
 
-  <Grid>
-
-    <ListView
-        x:Name="SampleListView"
-        Margin="12"
-        ItemTemplate="{StaticResource NormalTemplate}"
-        IsItemClickEnabled="True"
-        ui:ListViewExtensions.Command="{Binding SampleCommand}"
-        ui:ListViewExtensions.AlternateColor="#33AAAAAA"
-        ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
-        ui:ListViewExtensions.ItemContainerStretchDirection="Both">
-    </ListView>
-  </Grid>
-</Page>
+// Scrolling with item
+await MyGridView.SmoothScrollIntoViewWithItemAsync(item: object, itemPlacement: ScrollItemPlacement, disableAnimation: bool, scrollIfVisibile: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsPage.xaml

@@ -1,32 +1,69 @@
-<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ListViewExtensionsPage"
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ListViewExtensionsPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
       xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
     <Page.Resources>
+        <local:SampleCommand x:Key="SampleCommand" />
+
         <DataTemplate x:Name="NormalTemplate">
-            <TextBlock Foreground="Green"
-                       Text="{Binding Title}" />
+            <TextBlock Text="{Binding}" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold"></TextBlock>
         </DataTemplate>
 
         <DataTemplate x:Name="AlternateTemplate">
-            <TextBlock Foreground="Red"
-                       Text="{Binding Title}" />
+            <TextBlock Text="{Binding}" Foreground="Red" VerticalAlignment="Center" FontWeight="Bold"></TextBlock>
         </DataTemplate>
     </Page.Resources>
 
     <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+        <Grid x:Name="XamlRoot" Grid.Column="0" Margin="12">
+            <ListView x:Name="SampleListView"
+                      ui:ListViewExtensions.AlternateColor="#33AAAAAA"
+                      ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
+                      ui:ListViewExtensions.Command="{StaticResource SampleCommand}"
+                      ui:ListViewExtensions.ItemContainerStretchDirection="Both" 
+                      IsItemClickEnabled="True"
+                      ItemTemplate="{StaticResource NormalTemplate}" />
+        </Grid>
 
-        <ListView x:Name="SampleListView"
-                  Margin="12"
-                  ui:ListViewExtensions.AlternateColor="#33AAAAAA"
-                  ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
-                  ui:ListViewExtensions.Command="{Binding SampleCommand}"
-                  ui:ListViewExtensions.ItemContainerStretchDirection="Both"
-                  IsItemClickEnabled="True"
-                  ItemTemplate="{StaticResource NormalTemplate}" />
+        <StackPanel Grid.Column="1" Margin="5,10,10,0" Width="200">
+            <TextBlock Text="Smooth Scroll Settings" FontSize="{StaticResource TextStyleLargeFontSize}" Margin="0,0,0,10"/>
+            <TextBox x:Name="IndexInput"
+                     Header="Index"
+                     InputScope="Number"
+                     Text="100" />
+            <ComboBox x:Name="ItemPlacementInput"
+                      Header="Item Placement"
+                      SelectedIndex="0">
+                <x:String>Default</x:String>
+                <x:String>Left</x:String>
+                <x:String>Top</x:String>
+                <x:String>Center</x:String>
+                <x:String>Right</x:String>
+                <x:String>Bottom</x:String>
+            </ComboBox>
+            <CheckBox x:Name="DisableAnimationInput"
+                      Content="Disable Animation"
+                      IsChecked="False" />
+            <CheckBox x:Name="ScrollIfVisibileInput"
+                      Content="Scroll If Visible"
+                      IsChecked="True" />
+            <TextBox x:Name="AdditionalHorizontalOffsetInput"
+                     Header="Horizontal Offset"
+                     InputScope="Number"
+                     Text="0" />
+            <TextBox x:Name="AdditionalVerticalOffsetInput"
+                     Header="Vertical Offset"
+                     InputScope="Number"
+                     Text="0" />
+        </StackPanel>
     </Grid>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsPage.xaml.cs

@@ -3,9 +3,8 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.ObjectModel;
 using System.Windows.Input;
-using Microsoft.Toolkit.Uwp.SampleApp.Common;
-using Microsoft.Toolkit.Uwp.SampleApp.Data;
 using Microsoft.Toolkit.Uwp.UI;
 using Windows.UI.Popups;
 using Windows.UI.Xaml;
@@ -15,29 +14,93 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
     public sealed partial class ListViewExtensionsPage : Page, IXamlRenderListener
     {
+        private ListView sampleListView;
+
         public ListViewExtensionsPage()
         {
             this.InitializeComponent();
+            Load();
         }
 
-        public ICommand SampleCommand => new DelegateCommand<PhotoDataItem>(OnExecuteSampleCommand);
-
-        public async void OnXamlRendered(FrameworkElement control)
+        public void OnXamlRendered(FrameworkElement control)
         {
-            var sampleListView = control.FindChild("SampleListView") as ListView;
+            sampleListView = control.FindChild("SampleListView") as ListView;
 
             if (sampleListView != null)
             {
-                sampleListView.ItemsSource = await new Data.PhotosDataSource().GetItemsAsync();
+                sampleListView.ItemsSource = GetOddEvenSource(201);
             }
 
             // Transfer Data Context so we can access SampleCommand
             control.DataContext = this;
         }
 
-        private async void OnExecuteSampleCommand(PhotoDataItem item)
+        private void Load()
+        {
+            SampleController.Current.RegisterNewCommand("Start Smooth Scroll", (sender, args) =>
+            {
+                var index = int.TryParse(IndexInput.Text, out var i) ? i : 0;
+                var itemPlacement = ItemPlacementInput.SelectedItem switch
+                {
+                    "Default" => ScrollItemPlacement.Default,
+                    "Left" => ScrollItemPlacement.Left,
+                    "Top" => ScrollItemPlacement.Top,
+                    "Center" => ScrollItemPlacement.Center,
+                    "Right" => ScrollItemPlacement.Right,
+                    "Bottom" => ScrollItemPlacement.Bottom,
+                    _ => ScrollItemPlacement.Default
+                };
+
+                var disableAnimation = DisableAnimationInput.IsChecked ?? false;
+                var scrollIfVisibile = ScrollIfVisibileInput.IsChecked ?? true;
+                var additionalHorizontalOffset = int.TryParse(AdditionalHorizontalOffsetInput.Text, out var ho) ? ho : 0;
+                var additionalVerticalOffset = int.TryParse(AdditionalVerticalOffsetInput.Text, out var vo) ? vo : 0;
+                sampleListView.SmoothScrollIntoViewWithIndexAsync(index, itemPlacement, disableAnimation, scrollIfVisibile, additionalHorizontalOffset, additionalVerticalOffset);
+            });
+
+            if (sampleListView != null)
+            {
+                sampleListView.ItemsSource = GetOddEvenSource(500);
+            }
+        }
+
+        private ObservableCollection<string> GetOddEvenSource(int count)
+        {
+            var oddEvenSource = new ObservableCollection<string>();
+
+            for (int number = 0; number < count; number++)
+            {
+                var item = (number % 2) == 0 ? $"{number} - Even" : $"{number} - Odd";
+                oddEvenSource.Add(item);
+            }
+
+            return oddEvenSource;
+        }
+    }
+
+#pragma warning disable SA1402 // File may only contain a single class
+    internal class SampleCommand : ICommand
+#pragma warning restore SA1402 // File may only contain a single class
+    {
+        event EventHandler ICommand.CanExecuteChanged
+        {
+            add { }
+            remove { }
+        }
+
+        public bool CanExecute(object parameter) => true;
+
+        public void Execute(object parameter)
+        {
+            if (parameter is string s)
+            {
+                OnExecuteSampleCommand(s);
+            }
+        }
+
+        private static async void OnExecuteSampleCommand(string item)
         {
-            await new MessageDialog($"You clicked {item.Title} via the 'ListViewExtensions.Command' binding", "Item Clicked").ShowAsync();
+            await new MessageDialog($"You clicked {item} via the 'ListViewExtensions.Command' binding", "Item Clicked").ShowAsync();
         }
     }
 }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ListViewExtensions/ListViewExtensionsXaml.bind

@@ -0,0 +1,30 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
+    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    mc:Ignorable="d">
+
+  <Page.Resources>
+    <local:SampleCommand x:Key="SampleCommand" />
+
+    <DataTemplate x:Name="NormalTemplate">
+      <TextBlock Text="{Binding}" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold"></TextBlock>
+    </DataTemplate>
+
+    <DataTemplate x:Name="AlternateTemplate">
+      <TextBlock Text="{Binding}" Foreground="Red" VerticalAlignment="Center" FontWeight="Bold"></TextBlock>
+    </DataTemplate>
+  </Page.Resources>
+  <ListView
+      x:Name="SampleListView"
+      ItemTemplate="{StaticResource NormalTemplate}"
+      IsItemClickEnabled="True"
+      ui:ListViewExtensions.Command="{StaticResource SampleCommand}"
+      ui:ListViewExtensions.AlternateColor="#33AAAAAA"
+      ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
+      ui:ListViewExtensions.ItemContainerStretchDirection="Both">
+  </ListView>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -1105,7 +1105,8 @@
         "Type": "ListViewExtensionsPage",
         "About": "Extensions for all controls that inherit from ListViewBase like ListView.",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI/Extensions/ListViewBase",
-        "XamlCodeFile": "ListViewExtensionsCode.bind",
+        "CodeFile": "ListViewExtensionsCode.bind",
+        "XamlCodeFile": "ListViewExtensionsXaml.bind",
         "Icon": "/Assets/Helpers.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/ListViewExtensions.md"
       },

Microsoft.Toolkit.Uwp.UI/Extensions/ListViewBase/ListViewExtensions.cs → Microsoft.Toolkit.Uwp.UI/Extensions/ListViewBase/ListViewExtensions.AlternateRows.cs

@@ -28,11 +28,6 @@ public static partial class ListViewExtensions
         /// </summary>
         public static readonly DependencyProperty AlternateItemTemplateProperty = DependencyProperty.RegisterAttached("AlternateItemTemplate", typeof(DataTemplate), typeof(ListViewExtensions), new PropertyMetadata(null, OnAlternateItemTemplatePropertyChanged));
 
-        /// <summary>
-        /// Attached <see cref="DependencyProperty"/> for setting the container content stretch direction on the <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
-        /// </summary>
-        public static readonly DependencyProperty ItemContainerStretchDirectionProperty = DependencyProperty.RegisterAttached("ItemContainerStretchDirection", typeof(ItemContainerStretchDirection), typeof(ListViewExtensions), new PropertyMetadata(null, OnItemContainerStretchDirectionPropertyChanged));
-
         /// <summary>
         /// Gets the alternate <see cref="Brush"/> associated with the specified <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
         /// </summary>
@@ -73,26 +68,6 @@ public static void SetAlternateItemTemplate(Windows.UI.Xaml.Controls.ListViewBas
             obj.SetValue(AlternateItemTemplateProperty, value);
         }
 
-        /// <summary>
-        /// Gets the stretch <see cref="ItemContainerStretchDirection"/> associated with the specified <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
-        /// </summary>
-        /// <param name="obj">The <see cref="Windows.UI.Xaml.Controls.ListViewBase"/> to get the associated <see cref="ItemContainerStretchDirection"/> from</param>
-        /// <returns>The <see cref="ItemContainerStretchDirection"/> associated with the <see cref="Windows.UI.Xaml.Controls.ListViewBase"/></returns>
-        public static ItemContainerStretchDirection GetItemContainerStretchDirection(Windows.UI.Xaml.Controls.ListViewBase obj)
-        {
-            return (ItemContainerStretchDirection)obj.GetValue(ItemContainerStretchDirectionProperty);
-        }
-
-        /// <summary>
-        /// Sets the stretch <see cref="ItemContainerStretchDirection"/> associated with the specified <see cref="Windows.UI.Xaml.Controls.ListViewBase"/>
-        /// </summary>
-        /// <param name="obj">The <see cref="Windows.UI.Xaml.Controls.ListViewBase"/> to associate the <see cref="ItemContainerStretchDirection"/> with</param>
-        /// <param name="value">The <see cref="ItemContainerStretchDirection"/> for binding to the <see cref="Windows.UI.Xaml.Controls.ListViewBase"/></param>
-        public static void SetItemContainerStretchDirection(Windows.UI.Xaml.Controls.ListViewBase obj, ItemContainerStretchDirection value)
-        {
-            obj.SetValue(ItemContainerStretchDirectionProperty, value);
-        }
-
         private static void OnAlternateColorPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
         {
             Windows.UI.Xaml.Controls.ListViewBase listViewBase = sender as Windows.UI.Xaml.Controls.ListViewBase;