diff --git a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceAround.png b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceAround.png new file mode 100644 index 000000000000..b3606dfaf2f5 Binary files /dev/null and b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceAround.png differ diff --git a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceBetween.png b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceBetween.png new file mode 100644 index 000000000000..039bfb2001cf Binary files /dev/null and b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceBetween.png differ diff --git a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceEvenly.png b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceEvenly.png new file mode 100644 index 000000000000..abbd5335b329 Binary files /dev/null and b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayoutReverseWithSpaceEvenly.png differ diff --git a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayout_SetWrapReverseAlignContentStretch.png b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayout_SetWrapReverseAlignContentStretch.png index 8b346ffe0ff5..4a0af4537f53 100644 Binary files a/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayout_SetWrapReverseAlignContentStretch.png and b/src/Controls/tests/TestCases.Android.Tests/snapshots/android/FlexLayout_SetWrapReverseAlignContentStretch.png differ diff --git a/src/Controls/tests/TestCases.HostApp/Issues/Issue31565.cs b/src/Controls/tests/TestCases.HostApp/Issues/Issue31565.cs new file mode 100644 index 000000000000..8b8d0d6380cc --- /dev/null +++ b/src/Controls/tests/TestCases.HostApp/Issues/Issue31565.cs @@ -0,0 +1,121 @@ +using Microsoft.Maui.Controls.Shapes; +using Microsoft.Maui.Layouts; + +namespace Maui.Controls.Sample.Issues; + +[Issue(IssueTracker.Github, 31565, "FlexLayout alignment issue when Wrap is set to Reverse and AlignContent is set to SpaceAround, SpaceBetween or SpaceEvenly", PlatformAffected.All)] +public class Issue31565 : ContentPage +{ + private FlexLayout flexLayout; + public Issue31565() + { + // Root Grid + var rootGrid = new Grid + { + RowDefinitions = new RowDefinitionCollection + { + new RowDefinition { Height = GridLength.Star }, + new RowDefinition { Height = GridLength.Auto } + }, + BackgroundColor = Colors.LightGreen + }; + + // FlexLayout (Row 0) + flexLayout = new FlexLayout + { + AutomationId = "FlexLayoutControl", + Wrap = FlexWrap.Reverse, + BackgroundColor = Colors.LightGray + }; + + // Add Borders (Children) + flexLayout.Children.Add(CreateChild("Child1", Color.FromArgb("#4e79a7"))); + flexLayout.Children.Add(CreateChild("Child2", Color.FromArgb("#59a14f"))); + flexLayout.Children.Add(CreateChild("Child3", Color.FromArgb("#e15759"))); + flexLayout.Children.Add(CreateChild("Child4", Color.FromArgb("#FFDA8D00"))); + flexLayout.Children.Add(CreateChild("Child5", Color.FromArgb("#FF009DC0"))); + flexLayout.Children.Add(CreateChild("Child6", Color.FromArgb("#FF009DC0"))); + flexLayout.Children.Add(CreateChild("Child7", Color.FromArgb("#FF009DC0"))); + + rootGrid.Add(flexLayout, 0, 0); + + // Bottom Grid (Row 1) + var bottomGrid = new Grid + { + ColumnDefinitions = new ColumnDefinitionCollection + { + new ColumnDefinition { Width = GridLength.Auto }, + new ColumnDefinition { Width = GridLength.Star } + } + }; + + var label = new Label + { + Text = "AlignContent:", + FontSize = 16, + VerticalOptions = LayoutOptions.Center + }; + bottomGrid.Add(label, 0, 0); + + var buttonLayout = new VerticalStackLayout(); + buttonLayout.Children.Add(CreateButton("SpaceAround")); + buttonLayout.Children.Add(CreateButton("SpaceBetween")); + buttonLayout.Children.Add(CreateButton("SpaceEvenly")); + + bottomGrid.Add(buttonLayout, 1, 0); + rootGrid.Add(bottomGrid, 0, 1); + + Content = rootGrid; + } + + private View CreateChild(string text, Color color) + { + return new Border + { + BackgroundColor = color, + WidthRequest = 70, + HeightRequest = 70, + StrokeThickness = 0, + StrokeShape = new RoundRectangle { CornerRadius = 8 }, + Content = new Label + { + Text = text, + TextColor = Colors.White, + FontSize = 12, + HorizontalOptions = LayoutOptions.Center, + VerticalOptions = LayoutOptions.Center + } + }; + } + + private Button CreateButton(string text) + { + var button = new Button + { + Text = text, + AutomationId = text + "Button" + }; + button.Clicked += OnAlignContentClicked; + return button; + } + + private void OnAlignContentClicked(object sender, EventArgs e) + { + if (sender is Button button) + { + switch (button.Text) + { + case "SpaceAround": + flexLayout.AlignContent = FlexAlignContent.SpaceAround; + break; + case "SpaceBetween": + flexLayout.AlignContent = FlexAlignContent.SpaceBetween; + break; + case "SpaceEvenly": + flexLayout.AlignContent = FlexAlignContent.SpaceEvenly; + break; + } + } + } + +} diff --git a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceAround.png b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceAround.png new file mode 100644 index 000000000000..c481f938e083 Binary files /dev/null and b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceAround.png differ diff --git a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceBetween.png b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceBetween.png new file mode 100644 index 000000000000..74365c2ba549 Binary files /dev/null and b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceBetween.png differ diff --git a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceEvenly.png b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceEvenly.png new file mode 100644 index 000000000000..3653ace9de95 Binary files /dev/null and b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayoutReverseWithSpaceEvenly.png differ diff --git a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayout_SetWrapReverseAlignContentStretch.png b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayout_SetWrapReverseAlignContentStretch.png index bca41a5551fa..98f6028b2559 100644 Binary files a/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayout_SetWrapReverseAlignContentStretch.png and b/src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/FlexLayout_SetWrapReverseAlignContentStretch.png differ diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue31565.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue31565.cs new file mode 100644 index 000000000000..fe9136eeaf53 --- /dev/null +++ b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue31565.cs @@ -0,0 +1,42 @@ +using NUnit.Framework; +using UITest.Appium; +using UITest.Core; + +namespace Microsoft.Maui.TestCases.Tests.Issues +{ + public class Issue31565 : _IssuesUITest + { + public Issue31565(TestDevice testDevice) : base(testDevice) + { + } + + public override string Issue => "FlexLayout alignment issue when Wrap is set to Reverse and AlignContent is set to SpaceAround, SpaceBetween or SpaceEvenly"; + + [Test, Order(1)] + [Category(UITestCategories.Layout)] + public void FlexLayoutReverseWithSpaceAround() + { + App.WaitForElement("SpaceAroundButton"); + App.Tap("SpaceAroundButton"); + VerifyScreenshot(); + } + + [Test, Order(2)] + [Category(UITestCategories.Layout)] + public void FlexLayoutReverseWithSpaceBetween() + { + App.WaitForElement("SpaceBetweenButton"); + App.Tap("SpaceBetweenButton"); + VerifyScreenshot(); + } + + [Test, Order(3)] + [Category(UITestCategories.Layout)] + public void FlexLayoutReverseWithSpaceEvenly() + { + App.WaitForElement("SpaceEvenlyButton"); + App.Tap("SpaceEvenlyButton"); + VerifyScreenshot(); + } + } +} diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceAround.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceAround.png new file mode 100644 index 000000000000..f9f1c3522d94 Binary files /dev/null and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceAround.png differ diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceBetween.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceBetween.png new file mode 100644 index 000000000000..6116fd712bb6 Binary files /dev/null and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceBetween.png differ diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceEvenly.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceEvenly.png new file mode 100644 index 000000000000..914545b7fbf6 Binary files /dev/null and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayoutReverseWithSpaceEvenly.png differ diff --git a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayout_SetWrapReverseAlignContentStretch.png b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayout_SetWrapReverseAlignContentStretch.png index 7bc1aa4e1901..cb2975ff648f 100644 Binary files a/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayout_SetWrapReverseAlignContentStretch.png and b/src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/FlexLayout_SetWrapReverseAlignContentStretch.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceAround.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceAround.png new file mode 100644 index 000000000000..bf7ee0a47d11 Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceAround.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceBetween.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceBetween.png new file mode 100644 index 000000000000..c943dc09f069 Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceBetween.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceEvenly.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceEvenly.png new file mode 100644 index 000000000000..520384ff3818 Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayoutReverseWithSpaceEvenly.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayout_SetWrapReverseAlignContentStretch.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayout_SetWrapReverseAlignContentStretch.png index bc8a0ec38a6a..3d3804f79cde 100644 Binary files a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayout_SetWrapReverseAlignContentStretch.png and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios-26/FlexLayout_SetWrapReverseAlignContentStretch.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceAround.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceAround.png new file mode 100644 index 000000000000..af09c2a73aac Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceAround.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceBetween.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceBetween.png new file mode 100644 index 000000000000..9e6245df7b03 Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceBetween.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceEvenly.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceEvenly.png new file mode 100644 index 000000000000..ee00472b1f83 Binary files /dev/null and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayoutReverseWithSpaceEvenly.png differ diff --git a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayout_SetWrapReverseAlignContentStretch.png b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayout_SetWrapReverseAlignContentStretch.png index 67311798f5ce..1a59aa39a9b4 100644 Binary files a/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayout_SetWrapReverseAlignContentStretch.png and b/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/FlexLayout_SetWrapReverseAlignContentStretch.png differ diff --git a/src/Core/src/Layouts/Flex.cs b/src/Core/src/Layouts/Flex.cs index 2ecadeccf1af..28ace6651cad 100644 --- a/src/Core/src/Layouts/Flex.cs +++ b/src/Core/src/Layouts/Flex.cs @@ -603,13 +603,6 @@ static void layout_item(Item item, float width, float height, bool inMeasureMode flex_layout.flex_layout_line line = layout.lines![i]; - if (layout.reverse2) - { - pos -= line.size; - pos -= spacing; - old_pos -= line.size; - } - // Re-position the children of this line, honoring any child // alignment previously set within the line. for (int j = line.child_begin; j < line.child_end; j++) @@ -631,7 +624,13 @@ static void layout_item(Item item, float width, float height, bool inMeasureMode child.Frame[layout.frame_pos2_i] = pos + (child.Frame[layout.frame_pos2_i] - old_pos); } - if (!layout.reverse2) + if (layout.reverse2) + { + pos -= line.size; + pos -= spacing; + old_pos -= line.size; + } + else { pos += line.size; pos += spacing;