Merge pull request #1713 from skendrot/StaggeredPanel

Staggered panel

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

@@ -333,6 +333,7 @@
     <Content Include="SamplePages\Saturation\SaturationBehavior.png" />
     <Content Include="SamplePages\OrbitView\OrbitView.png" />
     <Content Include="SamplePages\Scale\ScaleBehavior.png" />
+    <Content Include="SamplePages\StaggeredPanel\StaggeredPanel.png" />
     <Content Include="SamplePages\SystemInformation\SystemInformation.png" />
     <Content Include="SamplePages\TextBoxMask\TextBoxMask.png" />
     <Content Include="SamplePages\TextToolbar\TextToolbar.png" />
@@ -465,6 +466,7 @@
     <Content Include="SamplePages\HeaderedContentControl\HeaderedContentControlXaml.bind" />
     <Content Include="SamplePages\AppPinManager\AppPinManagerHelperCode.bind" />
     <Content Include="SamplePages\Mouse\MouseCursorPage.bind" />
+    <Content Include="SamplePages\StaggeredPanel\StaggeredPanel.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -546,6 +548,9 @@
       <DependentUpon>FocusTrackerPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="SamplePages\BackgroundTaskHelper\TestBackgroundTask.cs" />
+    <Compile Include="SamplePages\StaggeredPanel\StaggeredPanelPage.xaml.cs">
+      <DependentUpon>StaggeredPanelPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\TextToolbar\SampleFormatter.cs" />
     <Compile Include="SamplePages\TextToolbar\TextToolbarPage.xaml.cs">
       <DependentUpon>TextToolbarPage.xaml</DependentUpon>
@@ -837,6 +842,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\StaggeredPanel\StaggeredPanelPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\TextToolbar\TextToolbarPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StaggeredPanel/StaggeredPanel.bind

@@ -0,0 +1,34 @@
+<Page 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <GridView x:Name="GridView">
+            <GridView.ItemTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Grid.Background>
+                            <SolidColorBrush Color="{Binding Color}"/>
+                        </Grid.Background>
+                        <Image Source="{Binding Item.Thumbnail}" Stretch="Uniform"/>
+                        <Border Background="#44000000" VerticalAlignment="Top">
+                            <TextBlock Foreground="White" Margin="3,1">
+                                <Run Text="{Binding Index}"/><Run Text="."/>
+                                <Run Text="{Binding Item.Title}"/>
+                            </TextBlock>  
+                        </Border>
+                    </Grid>
+                </DataTemplate>
+            </GridView.ItemTemplate>
+            <GridView.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <controls:StaggeredPanel DesiredColumnWidth="@[DesiredColumnWidth:Slider:250:50-400]"
+                                             HorizontalAlignment="@[HorizontalAlignment:Enum:HorizontalAlignment.Left]"/>
+                </ItemsPanelTemplate>
+            </GridView.ItemsPanel>
+        </GridView>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StaggeredPanel/StaggeredPanelPage.xaml

@@ -0,0 +1,35 @@
+<Page
+    x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.StaggeredPanelPage"
+    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d">
+
+    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <GridView Name="GridView">
+            <GridView.ItemTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Grid.Background>
+                            <SolidColorBrush Color="{Binding Color}"/>
+                        </Grid.Background>
+                        <Image Source="{Binding Item.Thumbnail}" Stretch="Uniform"/>
+                        <Border Background="#44000000" VerticalAlignment="Top">
+                            <TextBlock Foreground="White" Margin="3,1">
+                                <Run Text="{Binding Index}"/><Run Text="."/>
+                                <Run Text="{Binding Item.Title}"/>
+                            </TextBlock>
+                        </Border>
+                    </Grid>
+                </DataTemplate>
+            </GridView.ItemTemplate>
+            <GridView.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <controls:StaggeredPanel/>
+                </ItemsPanelTemplate>
+            </GridView.ItemsPanel>
+        </GridView>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/StaggeredPanel/StaggeredPanelPage.xaml.cs

@@ -0,0 +1,43 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using System.Linq;
+using Microsoft.Toolkit.Uwp.UI.Extensions;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class StaggeredPanelPage : Page, IXamlRenderListener
+    {
+        public StaggeredPanelPage()
+        {
+            this.InitializeComponent();
+        }
+
+        public async void OnXamlRendered(FrameworkElement control)
+        {
+            var gridView = control.FindChildByName("GridView") as ItemsControl;
+
+            var items = await new Data.PhotosDataSource().GetItemsAsync();
+            gridView.ItemsSource = items
+                .Select((p, i) => new
+                {
+                    Item = p,
+                    Index = i + 1
+                });
+        }
+    }
+}

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

@@ -262,6 +262,15 @@
         "XamlCodeFile": "HeaderedItemsControlXaml.bind",
         "Icon": "/SamplePages/HeaderedItemsControl/HeaderedItemsControl.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/docs/controls/HeaderedItemsControl.md"
+      },
+      {
+        "Name": "StaggeredPanel",
+        "Type": "StaggeredPanelPage",
+        "About": "Allows items to be displayed with a specified header.",
+        "CodeUrl": "https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/StaggeredPanel",
+        "XamlCodeFile": "StaggeredPanel.bind",
+        "Icon": "/SamplePages/StaggeredPanel/StaggeredPanel.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/Microsoft/UWPCommunityToolkit/master/docs/controls/StaggeredPanel.md"
       }
     ]
   },

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

@@ -0,0 +1,186 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+using System;
+using System.Linq;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// Arranges child elements into a staggered grid pattern where items are added to the column that has used least amount of space.
+    /// </summary>
+    public class StaggeredPanel : Panel
+    {
+        private double _columnWidth;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="StaggeredPanel"/> class.
+        /// </summary>
+        public StaggeredPanel()
+        {
+            RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
+        }
+
+        /// <summary>
+        /// Gets or sets the desired width for each column.
+        /// </summary>
+        /// <remarks>
+        /// The width of columns can exceed the DesiredColumnWidth if the HorizontalAlignment is set to Stretch.
+        /// </remarks>
+        public double DesiredColumnWidth
+        {
+            get { return (double)GetValue(DesiredColumnWidthProperty); }
+            set { SetValue(DesiredColumnWidthProperty, value); }
+        }
+
+        /// <summary>
+        /// Identifies the <see cref="DesiredColumnWidth"/> dependency property.
+        /// </summary>
+        /// <returns>The identifier for the <see cref="DesiredColumnWidth"/> dependency property.</returns>
+        public static readonly DependencyProperty DesiredColumnWidthProperty = DependencyProperty.Register(
+            nameof(DesiredColumnWidth),
+            typeof(double),
+            typeof(StaggeredPanel),
+            new PropertyMetadata(250d, OnDesiredColumnWidthChanged));
+
+        /// <summary>
+        /// Gets or sets the distance between the border and its child object.
+        /// </summary>
+        /// <returns>
+        /// The dimensions of the space between the border and its child as a Thickness value.
+        /// Thickness is a structure that stores dimension values using pixel measures.
+        /// </returns>
+        public Thickness Padding
+        {
+            get { return (Thickness)GetValue(PaddingProperty); }
+            set { SetValue(PaddingProperty, value); }
+        }
+
+        /// <summary>
+        /// Identifies the Padding dependency property.
+        /// </summary>
+        /// <returns>The identifier for the <see cref="Padding"/> dependency property.</returns>
+        public static readonly DependencyProperty PaddingProperty = DependencyProperty.Register(
+            nameof(Padding),
+            typeof(Thickness),
+            typeof(StaggeredPanel),
+            new PropertyMetadata(default(Thickness), OnPaddingChanged));
+
+        /// <inheritdoc/>
+        protected override Size MeasureOverride(Size availableSize)
+        {
+            availableSize.Width = availableSize.Width - Padding.Left - Padding.Right;
+            availableSize.Height = availableSize.Height - Padding.Top - Padding.Bottom;
+
+            _columnWidth = Math.Min(DesiredColumnWidth, availableSize.Width);
+            int numColumns = (int)Math.Floor(availableSize.Width / _columnWidth);
+            if (HorizontalAlignment == HorizontalAlignment.Stretch)
+            {
+                _columnWidth = availableSize.Width / numColumns;
+            }
+
+            var columnHeights = new double[numColumns];
+
+            for (int i = 0; i < Children.Count; i++)
+            {
+                var columnIndex = GetColumnIndex(columnHeights);
+
+                var child = Children[i];
+                child.Measure(new Size(_columnWidth, availableSize.Height));
+                var elementSize = child.DesiredSize;
+                columnHeights[columnIndex] += elementSize.Height;
+            }
+
+            double desiredHeight = columnHeights.Max();
+
+            return new Size(availableSize.Width, desiredHeight);
+        }
+
+        /// <inheritdoc/>
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            double horizontalOffset = Padding.Left;
+            double verticalOffset = Padding.Top;
+            int numColumns = (int)Math.Floor(finalSize.Width / _columnWidth);
+            if (HorizontalAlignment == HorizontalAlignment.Right)
+            {
+                horizontalOffset += finalSize.Width - (numColumns * _columnWidth);
+            }
+            else if (HorizontalAlignment == HorizontalAlignment.Center)
+            {
+                horizontalOffset += (finalSize.Width - (numColumns * _columnWidth)) / 2;
+            }
+
+            var columnHeights = new double[numColumns];
+
+            for (int i = 0; i < Children.Count; i++)
+            {
+                var columnIndex = GetColumnIndex(columnHeights);
+
+                var child = Children[i];
+                var elementSize = child.DesiredSize;
+
+                double elementWidth = elementSize.Width;
+                double elementHeight = elementSize.Height;
+                if (elementWidth > _columnWidth)
+                {
+                    double differencePercentage = _columnWidth / elementWidth;
+                    elementHeight = elementHeight * differencePercentage;
+                    elementWidth = _columnWidth;
+                }
+
+                Rect bounds = new Rect(horizontalOffset + (_columnWidth * columnIndex), columnHeights[columnIndex] + verticalOffset, elementWidth, elementHeight);
+                child.Arrange(bounds);
+
+                columnHeights[columnIndex] += elementSize.Height;
+            }
+
+            return base.ArrangeOverride(finalSize);
+        }
+
+        private static void OnDesiredColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var panel = (StaggeredPanel)d;
+            panel.InvalidateMeasure();
+        }
+
+        private static void OnPaddingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var panel = (StaggeredPanel)d;
+            panel.InvalidateMeasure();
+        }
+
+        private void OnHorizontalAlignmentChanged(DependencyObject sender, DependencyProperty dp)
+        {
+            InvalidateMeasure();
+        }
+
+        private int GetColumnIndex(double[] columnHeights)
+        {
+            int columnIndex = 0;
+            double height = columnHeights[0];
+            for (int j = 1; j < columnHeights.Length; j++)
+            {
+                if (columnHeights[j] < height)
+                {
+                    columnIndex = j;
+                    height = columnHeights[j];
+                }
+            }
+
+            return columnIndex;
+        }
+    }
+}