From e89bfe70a9865d6d83f287f47b3e0a5faaf79e51 Mon Sep 17 00:00:00 2001 From: Poker Date: Sun, 17 Mar 2024 22:32:49 +0800 Subject: [PATCH 1/6] Update StaggeredLayout.cs --- .../src/StaggeredLayout/StaggeredLayout.cs | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs b/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs index 43f316be..401d3e37 100644 --- a/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs +++ b/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs @@ -142,16 +142,27 @@ protected override Size MeasureOverride(VirtualizingLayoutContext context, Size double availableHeight = availableSize.Height; // This ternary prevents the column width from being NaN, which would otherwise cause an exception when measuring item sizes - double columnWidth = double.IsNaN(DesiredColumnWidth) ? availableWidth : Math.Min(DesiredColumnWidth, availableWidth); + double columnWidth; + int numColumns; + if (double.IsNaN(DesiredColumnWidth) || DesiredColumnWidth > availableWidth) + { + columnWidth = availableWidth; + numColumns = 1; + } + else + { + var tempAvailableWidth = availableWidth + ColumnSpacing; + numColumns = (int)Math.Floor(tempAvailableWidth / DesiredColumnWidth); + columnWidth = tempAvailableWidth / numColumns - ColumnSpacing; + } + if (columnWidth != state.ColumnWidth) { // The items will need to be remeasured state.Clear(); } - // This ternary prevents the column width from being NaN, which would otherwise cause an exception when measuring item sizes - state.ColumnWidth = double.IsNaN(DesiredColumnWidth) ? availableWidth : Math.Min(DesiredColumnWidth, availableWidth); - int numColumns = Math.Max(1, (int)Math.Floor(availableWidth / state.ColumnWidth)); + state.ColumnWidth = columnWidth; // adjust for column spacing on all columns expect the first double totalWidth = state.ColumnWidth + ((numColumns - 1) * (state.ColumnWidth + ColumnSpacing)); From 70aa78e0ce6efb32f695d745bfd2a5db90a003d1 Mon Sep 17 00:00:00 2001 From: Poker Date: Thu, 21 Mar 2024 12:38:40 +0800 Subject: [PATCH 2/6] Create StaggeredLayoutItemsStretch.cs --- .../StaggeredLayoutItemsStretch.cs | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 components/Primitives/src/StaggeredLayout/StaggeredLayoutItemsStretch.cs diff --git a/components/Primitives/src/StaggeredLayout/StaggeredLayoutItemsStretch.cs b/components/Primitives/src/StaggeredLayout/StaggeredLayoutItemsStretch.cs new file mode 100644 index 00000000..e03d707d --- /dev/null +++ b/components/Primitives/src/StaggeredLayout/StaggeredLayoutItemsStretch.cs @@ -0,0 +1,21 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +namespace CommunityToolkit.WinUI.Controls; + +/// +/// Defines constants that specify how items are sized to fill the available space in a . +/// +public enum StaggeredLayoutItemsStretch +{ + /// + /// The items' width is determined by the . + /// + None, + + /// + /// The items' width is determined by the parent's width. The minimum width is determined by the . + /// + Fill +} From a9dd330c8b038da5e752c2e1446d1b4dd6e6f5c3 Mon Sep 17 00:00:00 2001 From: Poker Date: Thu, 21 Mar 2024 12:45:15 +0800 Subject: [PATCH 3/6] Update StaggeredLayout.cs --- .../src/StaggeredLayout/StaggeredLayout.cs | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs b/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs index 401d3e37..9e35fa36 100644 --- a/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs +++ b/components/Primitives/src/StaggeredLayout/StaggeredLayout.cs @@ -22,9 +22,25 @@ public StaggeredLayout() /// /// Gets or sets the desired width for each column. /// - /// - /// The width of columns can exceed the DesiredColumnWidth if the HorizontalAlignment is set to Stretch. - /// + public StaggeredLayoutItemsStretch ItemsStretch + { + get => (StaggeredLayoutItemsStretch)GetValue(ItemsStretchProperty); + set => SetValue(ItemsStretchProperty, value); + } + + /// + /// Identifies the dependency property. + /// + /// The identifier for the dependency property. + public static readonly DependencyProperty ItemsStretchProperty = DependencyProperty.Register( + nameof(ItemsStretch), + typeof(StaggeredLayoutItemsStretch), + typeof(StaggeredLayout), + new PropertyMetadata(StaggeredLayoutItemsStretch.None, OnItemsStretchChanged)); + + /// + /// Gets or sets the desired width for each column. + /// public double DesiredColumnWidth { get { return (double)GetValue(DesiredColumnWidthProperty); } @@ -144,16 +160,24 @@ protected override Size MeasureOverride(VirtualizingLayoutContext context, Size // This ternary prevents the column width from being NaN, which would otherwise cause an exception when measuring item sizes double columnWidth; int numColumns; - if (double.IsNaN(DesiredColumnWidth) || DesiredColumnWidth > availableWidth) + if (ItemsStretch is StaggeredLayoutItemsStretch.None) { - columnWidth = availableWidth; - numColumns = 1; + columnWidth = double.IsNaN(DesiredColumnWidth) ? availableWidth : Math.Min(DesiredColumnWidth, availableWidth); + numColumns = Math.Max(1, (int)Math.Floor(availableWidth / state.ColumnWidth)); } else { - var tempAvailableWidth = availableWidth + ColumnSpacing; - numColumns = (int)Math.Floor(tempAvailableWidth / DesiredColumnWidth); - columnWidth = tempAvailableWidth / numColumns - ColumnSpacing; + if (double.IsNaN(DesiredColumnWidth) || DesiredColumnWidth > availableWidth) + { + columnWidth = availableWidth; + numColumns = 1; + } + else + { + var tempAvailableWidth = availableWidth + ColumnSpacing; + numColumns = (int)Math.Floor(tempAvailableWidth / DesiredColumnWidth); + columnWidth = tempAvailableWidth / numColumns - ColumnSpacing; + } } if (columnWidth != state.ColumnWidth) @@ -304,6 +328,12 @@ protected override Size ArrangeOverride(VirtualizingLayoutContext context, Size return finalSize; } + private static void OnItemsStretchChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) + { + var panel = (StaggeredLayout)d; + panel.InvalidateMeasure(); + } + private static void OnDesiredColumnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var panel = (StaggeredLayout)d; From 6d94771039748fee5d8a1d5389aab40cb6b1d0f5 Mon Sep 17 00:00:00 2001 From: Poker Date: Thu, 21 Mar 2024 15:45:13 +0800 Subject: [PATCH 4/6] Update example --- .../Primitives/samples/StaggeredLayoutSample.xaml | 10 +++++----- .../samples/StaggeredLayoutSample.xaml.cs | 14 ++++++++++---- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml b/components/Primitives/samples/StaggeredLayoutSample.xaml index ba5a91a7..fe939707 100644 --- a/components/Primitives/samples/StaggeredLayoutSample.xaml +++ b/components/Primitives/samples/StaggeredLayoutSample.xaml @@ -9,21 +9,20 @@ xmlns:muxc="using:Microsoft.UI.Xaml.Controls" mc:Ignorable="d"> - + - - + + Text="{x:Bind Index}" /> @@ -36,6 +35,7 @@ ItemsSource="{x:Bind ColorsCollection, Mode=OneWay}"> diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs index d4eea6c7..f0152c0f 100644 --- a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs +++ b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs @@ -10,8 +10,9 @@ namespace PrimitivesExperiment.Samples; [ToolkitSampleNumericOption("DesiredColumnWidth", initial: 250, min: 50, max: 400, step: 1, Title = "DesiredColumnWidth")] [ToolkitSampleNumericOption("ColumnSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "ColumnSpacing")] [ToolkitSampleNumericOption("RowSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "RowSpacing")] +[ToolkitSampleMultiChoiceOption("ItemsStretchProperty", "None", "Fill", Title = "ItemsStretch")] -[ToolkitSample(id: nameof(StaggeredLayoutSample), "StaggeredPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredLayout)}.")] +[ToolkitSample(id: nameof(StaggeredLayoutSample), "StaggeredLayout", description: $"A sample for showing how to create and use a {nameof(StaggeredLayout)}.")] public sealed partial class StaggeredLayoutSample : Page { public ObservableCollection ColorsCollection = new(); @@ -24,18 +25,23 @@ public StaggeredLayoutSample() random = new Random(DateTime.Now.Millisecond); for (int i = 0; i < random.Next(100, 200); i++) { - var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) }; + var item = new ColorItem { Index = i, Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) }; ColorsCollection.Add(item); } } + + public static StaggeredLayoutItemsStretch ConvertStringToStaggeredLayoutItemsStretch(string itemStretch) => itemStretch switch + { + "None" => StaggeredLayoutItemsStretch.None, + "Fill" => StaggeredLayoutItemsStretch.Fill, + _ => throw new System.NotImplementedException(), + }; } public class ColorItem { public int Index { get; internal set; } - public int Width { get; internal set; } - public int Height { get; internal set; } public Color Color { get; internal set; } From 388f7f11eedb04b09481729fcda2abd5df9ccb48 Mon Sep 17 00:00:00 2001 From: Poker Date: Thu, 21 Mar 2024 16:26:57 +0800 Subject: [PATCH 5/6] Fix wrong property --- .../Primitives/samples/StaggeredLayoutSample.xaml.cs | 2 ++ .../Primitives/samples/StaggeredPanelSample.xaml | 11 +++++------ .../Primitives/samples/StaggeredPanelSample.xaml.cs | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs index f0152c0f..c9580548 100644 --- a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs +++ b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs @@ -42,6 +42,8 @@ public class ColorItem { public int Index { get; internal set; } + public int Width { get; internal set; } + public int Height { get; internal set; } public Color Color { get; internal set; } diff --git a/components/Primitives/samples/StaggeredPanelSample.xaml b/components/Primitives/samples/StaggeredPanelSample.xaml index 40eba9cd..66add5b1 100644 --- a/components/Primitives/samples/StaggeredPanelSample.xaml +++ b/components/Primitives/samples/StaggeredPanelSample.xaml @@ -10,24 +10,23 @@ x:Name="ThisSamplePage"> - + - - + + Text="{x:Bind Index}" /> - diff --git a/components/Primitives/samples/StaggeredPanelSample.xaml.cs b/components/Primitives/samples/StaggeredPanelSample.xaml.cs index fdbcdd47..dab37fb0 100644 --- a/components/Primitives/samples/StaggeredPanelSample.xaml.cs +++ b/components/Primitives/samples/StaggeredPanelSample.xaml.cs @@ -11,7 +11,7 @@ namespace PrimitivesExperiment.Samples; [ToolkitSampleNumericOption("ColumnSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "ColumnSpacing")] [ToolkitSampleNumericOption("RowSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "RowSpacing")] -[ToolkitSample(id: nameof(StaggeredPanelSample), "WrapPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredPanel)}.")] +[ToolkitSample(id: nameof(StaggeredPanelSample), "StaggeredPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredPanel)}.")] public sealed partial class StaggeredPanelSample : Page { public ObservableCollection ColorsCollection = new(); From c1b85bdba356bbeb7d5215ad05a59a7b3b09425f Mon Sep 17 00:00:00 2001 From: Poker Date: Fri, 22 Mar 2024 11:10:43 +0800 Subject: [PATCH 6/6] Format --- components/Primitives/samples/StaggeredLayoutSample.xaml | 7 ++++--- components/Primitives/samples/StaggeredPanelSample.xaml | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml b/components/Primitives/samples/StaggeredLayoutSample.xaml index fe939707..692427da 100644 --- a/components/Primitives/samples/StaggeredLayoutSample.xaml +++ b/components/Primitives/samples/StaggeredLayoutSample.xaml @@ -1,4 +1,4 @@ - + - + diff --git a/components/Primitives/samples/StaggeredPanelSample.xaml b/components/Primitives/samples/StaggeredPanelSample.xaml index 66add5b1..f72031fc 100644 --- a/components/Primitives/samples/StaggeredPanelSample.xaml +++ b/components/Primitives/samples/StaggeredPanelSample.xaml @@ -1,4 +1,4 @@ - + - +