Merge pull request #3213 from deanchalk/AdaptiveGridImprovements

Improvements to AdaptiveGrid Sample page

Author: michael-hawker

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AdaptiveGridView/AdaptiveGridViewCode.bind

@@ -23,6 +23,7 @@
 
     <Grid>
         <controls:AdaptiveGridView Name="AdaptiveGridViewControl"
+                                   StretchContentForSingleRow="@[StretchContentForSingleRow:Bool:false]"
                                    OneRowModeEnabled="@[OneRowModeEnabled:Bool:false]"
                                    ItemHeight="@[ItemHeight:Slider:200:50-500]"
                                    DesiredWidth="@[DesiredWidth:Slider:300:50-500]"

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AdaptiveGridView/AdaptiveGridViewPage.xaml

@@ -26,16 +26,36 @@
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
 
         <TextBlock x:Name="SelectedItemCountTextBlock"
+                   Grid.ColumnSpan="2"
                    Margin="0,12"
                    HorizontalAlignment="Center"
                    FontFamily="Segoe UI Light"
                    FontSize="21"
                    Text="You haven't selected any items"
                    Visibility="{Binding IsItemClickEnabled.Value, Converter={StaticResource BoolToVisibilityConverter}}" />
 
-        <Grid x:Name="XamlRoot" Grid.Row="1" />
+        <Grid x:Name="XamlRoot"
+              Grid.Row="1"
+              Grid.ColumnSpan="2" />
+
+        <TextBlock Grid.Row="2"
+                   Margin="4"
+                   FontFamily="Segoe UI Light"
+                   FontSize="21"
+                   Text="Number of Photos" />
+
+        <Slider x:Name="NumberSlider"
+                Grid.Row="2"
+                Grid.Column="1"
+                Margin="32,4"
+                StepFrequency="1" />
     </Grid>
 </Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/AdaptiveGridView/AdaptiveGridViewPage.xaml.cs

@@ -3,18 +3,22 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.ObjectModel;
 using System.Linq;
 using Microsoft.Toolkit.Uwp.SampleApp.Data;
 using Microsoft.Toolkit.Uwp.UI.Controls;
 using Microsoft.Toolkit.Uwp.UI.Extensions;
 using Windows.UI.Popups;
 using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls.Primitives;
 
 namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
 {
     public sealed partial class AdaptiveGridViewPage : IXamlRenderListener
     {
-        private AdaptiveGridView adaptiveGridViewControl;
+        private AdaptiveGridView _adaptiveGridViewControl;
+        private PhotoDataItem[] _originalPhotos;
+        private ObservableCollection<PhotoDataItem> _boundPhotos;
 
         public AdaptiveGridViewPage()
         {
@@ -23,19 +27,46 @@ public AdaptiveGridViewPage()
 
         public async void OnXamlRendered(FrameworkElement control)
         {
-            adaptiveGridViewControl = control.FindDescendantByName("AdaptiveGridViewcontrol") as AdaptiveGridView;
-            if (adaptiveGridViewControl != null)
+            _adaptiveGridViewControl = control.FindDescendantByName("AdaptiveGridViewcontrol") as AdaptiveGridView;
+            if (_adaptiveGridViewControl != null)
             {
-                adaptiveGridViewControl.ItemsSource = await new Data.PhotosDataSource().GetItemsAsync();
-                adaptiveGridViewControl.ItemClick += AdaptiveGridViewControl_ItemClick;
-                adaptiveGridViewControl.SelectionChanged += AdaptiveGridViewControl_SelectionChanged;
+                var allPhotos = await new Data.PhotosDataSource().GetItemsAsync();
+                _originalPhotos = allPhotos.ToArray();
+                _boundPhotos = new ObservableCollection<PhotoDataItem>(_originalPhotos);
+                _adaptiveGridViewControl.ItemsSource = _boundPhotos;
+                _adaptiveGridViewControl.ItemClick += AdaptiveGridViewControl_ItemClick;
+                _adaptiveGridViewControl.SelectionChanged += AdaptiveGridViewControl_SelectionChanged;
+                NumberSlider.Minimum = 1;
+                NumberSlider.Maximum = _originalPhotos.Length;
+                NumberSlider.Value = _originalPhotos.Length;
+                NumberSlider.ValueChanged += OnNumberSliderValueChanged;
+            }
+        }
+
+        private void OnNumberSliderValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+        {
+            var newCount = (int)e.NewValue;
+            var currentCount = _boundPhotos.Count;
+            if (currentCount < newCount)
+            {
+                for (var i = currentCount; i < newCount; i++)
+                {
+                    _boundPhotos.Add(_originalPhotos[i]);
+                }
+            }
+            else if (currentCount > newCount)
+            {
+                for (var i = currentCount; i > newCount; i--)
+                {
+                    _boundPhotos.Remove(_originalPhotos[i-1]);
+                }
             }
         }
 
         private void AdaptiveGridViewControl_SelectionChanged(object sender, Windows.UI.Xaml.Controls.SelectionChangedEventArgs e)
         {
-            SelectedItemCountTextBlock.Text = adaptiveGridViewControl.SelectedItems.Any()
-                ? $"You have selected {adaptiveGridViewControl.SelectedItems.Count} items."
+            SelectedItemCountTextBlock.Text = _adaptiveGridViewControl.SelectedItems.Any()
+                ? $"You have selected {_adaptiveGridViewControl.SelectedItems.Count} items."
                 : "You haven't selected any items";
         }