dotnet / dotnet/maui

[Android][Regression] SwipeItem Text and IconImageSource are vertically misaligned when SwipeView wraps CollectionView

Open
#36,736 2 comments 0 reactions 0 assignees View on GitHub
area-controls-swipeview i/regression partner/syncfusion platform/android regressed-in-10.0.70 s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 10h
Merged PRs (30d)
297

Description

### Description

When a CollectionView is wrapped directly by a SwipeView on Android, the SwipeItem Text and IconImageSource are not positioned relative to the same layout bounds.
The issue can be reproduced by swiping a CollectionView and displaying a SwipeItem that contains both Text and IconImageSource.
In Microsoft.Maui.Controls 10.0.70 and later, the Text and IconImageSource are visibly misaligned because they appear to be vertically centered against different reference heights.
In Microsoft.Maui.Controls 10.0.60, the Text and IconImageSource are positioned together, but they are still centered relative to the visible item content rather than the entire CollectionView area.
From a layout and UX perspective, the SwipeView is attached to the entire CollectionView. Therefore, the SwipeItem content should be centered relative to the entire swipeable area and both Text and IconImageSource should always use the same alignment bounds.

The attached screenshots compare Microsoft.Maui.Controls 10.0.60 and 10.0.70 using CollectionViews containing 1, 5, and 20 items.
Observed results:

- 10.0.60:
- Text and IconImageSource are aligned together.
- Alignment is based on the visible item content area.
Image

- 10.0.70 and later:
- Text and IconImageSource are no longer aligned together.
- Different alignment bounds appear to be used for Text and IconImageSource.
Image

Expected result:

- The SwipeItem Text and IconImageSource should always remain aligned together.
- Both should be vertically centered within the entire SwipeView / CollectionView area.
- The alignment should not change depending on the number of items contained in the CollectionView.

### Steps to Reproduce

1. Create a new .NET MAUI application from the Visual Studio template.

2. Update Microsoft.Maui.Controls to 10.0.70.

3. Replace MainPage.xaml with the sample code provided below.
```



















```
4. Replace MainPage.xaml.cs with the sample code provided below.
```
using System.Collections.ObjectModel;

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
InserrItem(5);
}

private void Btn1_Clicked(object sender, EventArgs e)
{
InserrItem(1);
}

private void Btn5_Clicked(object sender, EventArgs e)
{
InserrItem(5);
}

private void Btn20_Clicked(object sender, EventArgs e)
{
InserrItem(20);
}

private void InserrItem(int count)
{
DmyCollectionView.ItemsSource = null;
DmyCollectionView.SelectedItem = null;

List dmyList = [];
for (int i = 0; i < count; i++) dmyList.Add(new TestData($"{i + 1} recode"));
DmyCollectionView.ItemsSource = new ObservableCollection(dmyList);
}
}

public class TestData(string name)
{
public string Name { get; set; } = name;
}
```

5. Add an SVG image to:
Resources/Images/ic_fluent_arrow_circle_left_24_filled.svg

6. Run the application on Android.

7. After startup, swipe the CollectionView to reveal the SwipeItem.

8. Observe the vertical positions of the SwipeItem Text ("Back") and IconImageSource.

9. Press the buttons to switch between 1 item, 5 items, and 20 items and compare the alignment.

10. Downgrade Microsoft.Maui.Controls to 10.0.60 and repeat the same test.

11. Compare the results between 10.0.60 and 10.0.70.

※The sample images were obtained from the Visual Studio Image Library.

### Link to public reproduction project repository

_No response_

### Version with bug

10.0.70

### Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

### Last version that worked well

10.0.60

### Affected platforms

Android

### Affected platform versions

Android Emulator 14/15/16,Pixel9 Android 17

### Did you find any workaround?

No.
The only known way to avoid the issue is to downgrade Microsoft.Maui.Controls to 10.0.60.

### Relevant log output

```shell
No relevant log output.
```

Contributor guide

Open the contributing guide

Research direction

Start with the MainPage.xaml and MainPage.xaml.cs reproduction, running it on Android with Microsoft.Maui.Controls 10.0.70 and then 10.0.60. Compare SwipeItem Text and IconImageSource while switching between 1, 5, and 20 CollectionView items; done means both remain vertically aligned and centered within the entire SwipeView area.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, csharp
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.