Merge pull request #130 from Microsoft/dotMorten/ResizeAdaptiveGrid

Resize adaptive grid items correctly

Author: deltakosh

Microsoft.Toolkit.Uwp.UI.Controls/AdaptiveGridView/AdaptiveGridView.Properties.cs

@@ -62,10 +62,10 @@ public sealed partial class AdaptiveGridView
             DependencyProperty.Register(nameof(OneRowModeEnabled), typeof(bool), typeof(AdaptiveGridView), new PropertyMetadata(false, (o, e) => { OnOneRowModeEnabledChanged(o, e.NewValue); }));
 
         /// <summary>
-        /// Identifies the <see cref="VerticalScroll"/> dependency property.
+        /// Identifies the <see cref="VerticalScrollMode"/> dependency property.
         /// </summary>
-        private static readonly DependencyProperty VerticalScrollProperty =
-            DependencyProperty.Register(nameof(VerticalScroll), typeof(ScrollMode), typeof(AdaptiveGridView), new PropertyMetadata(ScrollMode.Auto));
+        private static readonly DependencyProperty VerticalScrollModeProperty =
+            DependencyProperty.Register(nameof(VerticalScrollMode), typeof(ScrollMode), typeof(AdaptiveGridView), new PropertyMetadata(ScrollMode.Auto));
 
         /// <summary>
         /// Identifies the <see cref="ItemWidth"/> dependency property.
@@ -94,7 +94,7 @@ private static void OnOneRowModeEnabledChanged(DependencyObject d, object newVal
                     };
 
                     self._listView.SetBinding(GridView.MaxHeightProperty, b);
-                    self.VerticalScroll = ScrollMode.Disabled;
+                    self.VerticalScrollMode = ScrollMode.Disabled;
                 }
             }
         }
@@ -173,10 +173,10 @@ public bool OneRowModeEnabled
         /// </summary>
         public event ItemClickEventHandler ItemClick;
 
-        private ScrollMode VerticalScroll
+        private ScrollMode VerticalScrollMode
         {
-            get { return (ScrollMode)GetValue(VerticalScrollProperty); }
-            set { SetValue(VerticalScrollProperty, value); }
+            get { return (ScrollMode)GetValue(VerticalScrollModeProperty); }
+            set { SetValue(VerticalScrollModeProperty, value); }
         }
 
         private double ItemWidth

Microsoft.Toolkit.Uwp.UI.Controls/AdaptiveGridView/AdaptiveGridView.cs

@@ -9,6 +9,7 @@
 // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
 // THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
 // ******************************************************************
+using System.Collections.Generic;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 
@@ -47,17 +48,13 @@ private void RecalculateLayout(double containerWidth)
                 return;
             }
 
-            if (_columns == 0)
-            {
-                _columns = CalculateColumns(containerWidth, DesiredWidth);
-            }
-            else
+            _columns = CalculateColumns(containerWidth, DesiredWidth);
+
+            // If there's less items than there's columns, reduce the column count;
+            if (_listView != null && _listView.Items != null
+                && _listView.Items.Count > 0 && _listView.Items.Count < _columns)
             {
-                var desiredColumns = CalculateColumns(containerWidth, DesiredWidth);
-                if (desiredColumns != _columns)
-                {
-                    _columns = desiredColumns;
-                }
+                _columns = _listView.Items.Count;
             }
 
             ItemWidth = (containerWidth / _columns) - 5;
@@ -75,6 +72,7 @@ protected override void OnApplyTemplate()
             {
                 _listView.SizeChanged -= ListView_SizeChanged;
                 _listView.ItemClick -= ListView_ItemClick;
+                _listView.Items.VectorChanged -= ListViewItems_VectorChanged;
                 _listView = null;
             }
 
@@ -83,12 +81,23 @@ protected override void OnApplyTemplate()
             {
                 _listView.SizeChanged += ListView_SizeChanged;
                 _listView.ItemClick += ListView_ItemClick;
+                _listView.Items.VectorChanged += ListViewItems_VectorChanged;
             }
 
             _isInitialized = true;
             OnOneRowModeEnabledChanged(this, OneRowModeEnabled);
         }
 
+        private void ListViewItems_VectorChanged(Windows.Foundation.Collections.IObservableVector<object> sender, Windows.Foundation.Collections.IVectorChangedEventArgs @event)
+        {
+            if (_listView != null && !double.IsNaN(_listView.ActualWidth))
+            {
+                // If the item count changes, check if more or less columns needs to be rendered,
+                // in case we were having fewer items than columns.
+                RecalculateLayout(_listView.ActualWidth);
+            }
+        }
+
         private void ListView_ItemClick(object sender, ItemClickEventArgs e)
         {
             var cmd = ItemClickCommand;

Microsoft.Toolkit.Uwp.UI.Controls/AdaptiveGridView/AdaptiveGridView.xaml

@@ -8,8 +8,8 @@
 				<ControlTemplate TargetType="controls:AdaptiveGridView">
                     <Grid>
 						<ContentPresenter x:Name="templateProxy" Width="{TemplateBinding ItemWidth}" Height="{TemplateBinding ItemHeight}" ContentTemplate="{TemplateBinding ItemTemplate}" Visibility="Collapsed" />
-						<GridView x:Name="ListView" IsItemClickEnabled="True" SelectionMode="None" IsSwipeEnabled="False" IsTabStop="False"
-                          ScrollViewer.VerticalScrollMode="{TemplateBinding VerticalScroll}" ScrollViewer.VerticalScrollBarVisibility="Hidden"
+						<GridView HorizontalAlignment="Stretch" x:Name="ListView" IsItemClickEnabled="True" SelectionMode="None" IsSwipeEnabled="False" IsTabStop="False"
+                          ScrollViewer.VerticalScrollMode="{TemplateBinding VerticalScrollMode}" ScrollViewer.VerticalScrollBarVisibility="Hidden"
                           ItemsSource="{TemplateBinding ItemsSource}">
                             <GridView.ItemTemplate>
                                 <DataTemplate>