Use smooth scrool controls in static xaml file

Author: Rosuavio

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

@@ -24,15 +24,15 @@
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
-        <ListView x:Name="SampleListView"
-                  Grid.Column="0"
-                  Margin="12"
-                  ui:ListViewExtensions.AlternateColor="#33AAAAAA"
-                  ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
-                  ui:ListViewExtensions.Command="{StaticResource SampleCommand}"
-                  ui:ListViewExtensions.ItemContainerStretchDirection="Both"
-                  IsItemClickEnabled="True"
-                  ItemTemplate="{StaticResource NormalTemplate}" />
+        <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>
 
         <StackPanel Grid.Column="1" Margin="5,0,5,0" Width="200">
             <TextBox x:Name="IndexInput"

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

@@ -15,12 +15,6 @@ namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
     public sealed partial class ListViewExtensionsPage : Page, IXamlRenderListener
     {
         private ListView sampleListView;
-        private TextBox indexInput;
-        private ComboBox itemPlacementInput;
-        private CheckBox disableAnimationInput;
-        private CheckBox scrollIfVisibileInput;
-        private TextBox additionalHorizontalOffsetInput;
-        private TextBox additionalVerticalOffsetInput;
 
         public ListViewExtensionsPage()
         {
@@ -31,12 +25,6 @@ public ListViewExtensionsPage()
         public void OnXamlRendered(FrameworkElement control)
         {
             sampleListView = control.FindChild("SampleListView") as ListView;
-            indexInput = control.FindChild("IndexInput") as TextBox;
-            itemPlacementInput = control.FindChild("ItemPlacementInput") as ComboBox;
-            disableAnimationInput = control.FindChild("DisableAnimationInput") as CheckBox;
-            scrollIfVisibileInput = control.FindChild("ScrollIfVisibileInput") as CheckBox;
-            additionalHorizontalOffsetInput = control.FindChild("AdditionalHorizontalOffsetInput") as TextBox;
-            additionalVerticalOffsetInput = control.FindChild("AdditionalVerticalOffsetInput") as TextBox;
 
             if (sampleListView != null)
             {
@@ -51,8 +39,8 @@ 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
+                var index = int.TryParse(IndexInput.Text, out var i) ? i : 0;
+                var itemPlacement = ItemPlacementInput.SelectedItem switch
                 {
                     "Default" => ItemPlacement.Default,
                     "Left" => ItemPlacement.Left,
@@ -63,10 +51,10 @@ private void Load()
                     _ => ItemPlacement.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;
+                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);
             });
 

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

@@ -18,54 +18,13 @@
       <TextBlock Text="{Binding}" Foreground="Red" VerticalAlignment="Center" FontWeight="Bold"></TextBlock>
     </DataTemplate>
   </Page.Resources>
-
-  <Grid>
-    <Grid.ColumnDefinitions>
-      <ColumnDefinition Width="*" />
-      <ColumnDefinition Width="Auto" />
-    </Grid.ColumnDefinitions>
-
-    <ListView
-        x:Name="SampleListView"
-        Grid.Column="0"
-        Margin="12"
-        ItemTemplate="{StaticResource NormalTemplate}"
-        IsItemClickEnabled="True"
-        ui:ListViewExtensions.Command="{StaticResource SampleCommand}"
-        ui:ListViewExtensions.AlternateColor="#33AAAAAA"
-        ui:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
-        ui:ListViewExtensions.ItemContainerStretchDirection="Both">
-    </ListView>
-
-    <StackPanel Grid.Column="1" Margin="5,0,5,0" Width="200">
-      <TextBox x:Name="IndexInput"
-                Header="Index"
-                InputScope="Number"
-                Text="0" />
-      <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>
+  <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>