[Android][Regression] SwipeItem Text and IconImageSource are vertically misaligned when SwipeView wraps CollectionView
- 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.
- 10.0.70 and later:
- Text and IconImageSource are no longer aligned together.
- Different alignment bounds appear to be used for Text and IconImageSource.
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
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