Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,12 @@ public static void MapEmptyViewTemplate(ItemsViewHandler2<TItemsView> handler, I
public static void MapFlowDirection(ItemsViewHandler2<TItemsView> handler, ItemsView itemsView)
{
handler.Controller?.UpdateFlowDirection();

// UIKit does not automatically mirror or reflow UICollectionView layouts when the flow direction
// (semanticContentAttribute) changes at runtime. To ensure correct RTL/LTR behavior, we explicitly
// notify the controller to rebuild or reassign its layout. Without this, UICollectionViewCompositionalLayout
// and other layouts will keep their previous geometry and ignore the new direction.
handler.UpdateLayout();
}

public static void MapIsVisible(ItemsViewHandler2<TItemsView> handler, ItemsView itemsView)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,8 @@ public virtual void UpdateFlowDirection()
}
}
}

CollectionView.UpdateFlowDirection(ItemsView);
}

if (_emptyViewDisplayed)
Expand Down
50 changes: 50 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue32359.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.Issues.Issue32359"
Title="Issue 32359">

<Grid RowDefinitions="Auto,Auto,*" Padding="10">
<Label Grid.Row="0"
Text="CollectionView RTL - VerticalGrid 4 Columns"
FontSize="16"
FontAttributes="Bold"
Margin="0,0,0,10"/>

<HorizontalStackLayout Grid.Row="1" Spacing="10" Margin="0,0,0,10">
<Button x:Name="SetRtlButton"
Text="Set RTL"
AutomationId="SetRtlButton"/>
<Button x:Name="SetLtrButton"
Text="Set LTR"
AutomationId="SetLtrButton"/>
<Label x:Name="StatusLabel"
Text="Current: LTR"
AutomationId="StatusLabel"
VerticalOptions="Center"/>
</HorizontalStackLayout>

<CollectionView x:Name="TestCollectionView"
Grid.Row="2"
AutomationId="TestCollectionView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="4"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid BackgroundColor="LightBlue"
Margin="2"
HeightRequest="60"
WidthRequest="80">
<Label Text="{Binding .}"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="14"
TextColor="Black"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>

</ContentPage>
44 changes: 44 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue32359.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
using System.Collections.ObjectModel;

namespace Maui.Controls.Sample.Issues
{
[Issue(IssueTracker.Github, 32359,
"FlowDirection RightToLeft not applied to CollectionView with VerticalGrid multi-column layout",
PlatformAffected.iOS)]
public partial class Issue32359 : ContentPage
{
private ObservableCollection<string> _items;

public Issue32359()
{
InitializeComponent();

// Create test data - using numbers to make column order clearly visible
_items = new ObservableCollection<string>();
for (int i = 1; i <= 20; i++)
{
_items.Add($"{i}");
}

TestCollectionView.ItemsSource = _items;

// Wire up buttons
SetRtlButton.Clicked += OnSetRtlClicked;
SetLtrButton.Clicked += OnSetLtrClicked;
}

private void OnSetRtlClicked(object sender, EventArgs e)
{

TestCollectionView.FlowDirection = FlowDirection.RightToLeft;
StatusLabel.Text = "Current: RTL";
}

private void OnSetLtrClicked(object sender, EventArgs e)
{

TestCollectionView.FlowDirection = FlowDirection.LeftToRight;
StatusLabel.Text = "Current: LTR";
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue32359 : _IssuesUITest
{
public override string Issue => "FlowDirection RightToLeft not applied to CollectionView with VerticalGrid multi-column layout";

public Issue32359(TestDevice device) : base(device)
{
}

[Test]
[Category(UITestCategories.CollectionView)]
public void VerticalGridCollectionViewRTLColumnMirroringShouldWork()
{
// Wait for CollectionView to load
App.WaitForElement("TestCollectionView");
App.WaitForElement("SetRtlButton");

// Set to RTL - this should mirror the column order
// In a 4-column grid, items should appear: 4, 3, 2, 1 (right to left)
// instead of: 1, 2, 3, 4 (left to right)
App.Tap("SetRtlButton");

// Wait for layout to update
App.WaitForElement("StatusLabel");

// Verify screenshot shows RTL column mirroring
// The first row should show: "4 3 2 1" (from right to left)
// instead of: "1 2 3 4" (from left to right)
VerifyScreenshot();
}

[Test]
[Category(UITestCategories.CollectionView)]
public void VerticalGridCollectionViewLTRToRTLToggleShouldWork()
{
// Start in LTR (default)
App.WaitForElement("TestCollectionView");
App.WaitForElement("SetLtrButton");

// Verify LTR layout first (optional baseline)
App.Tap("SetLtrButton");
App.WaitForElement("StatusLabel");

// Toggle to RTL
App.Tap("SetRtlButton");
App.WaitForElement("StatusLabel");

// Toggle back to LTR
App.Tap("SetLtrButton");
App.WaitForElement("StatusLabel");

// Toggle to RTL again - ensure it still works
App.Tap("SetRtlButton");
App.WaitForElement("StatusLabel");

// Final verification in RTL mode
VerifyScreenshot();
}
}
}
Loading