How do I avoid the Content covering revealed SwipeItems in CollectionView?

Question

How do I avoid the Content covering revealed SwipeItems in CollectionView?

dg2k 1,416

I am trying to implement SwipeView based UI (MAUI Android) for CollectionView list items Edit and Delete actions. The issue I am having is that when I swipe to reveal the UI for invoking actions through tap, the list item Content (in my case Text) is still covering part of a SwipeItem which is less than ideal.

I understand that I can push the Content away from the revealed SwipeItems by setting the Threshold property value, but again the problem is that the SwipeItems expand to fill in the available space which defeats the whole purpose of setting the Threshold. If SwipeItems do not expand with increased Threshold, then, everything would be perfect.

Not sure if this is a bug with CollectionView as I have had a reported issue with CollectionView under WinUI. The current issue is with Android platform. Any workaround to avoid the list item content covering SwipeItems is appreciated.

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="model:Reminder">
        <SwipeView
            Margin="0"
            Padding="0"
            Threshold="300">

            <SwipeView.LeftItems>
                <SwipeItems Mode="Reveal" SwipeBehaviorOnInvoked="Auto">
                    <SwipeItem
                        BackgroundColor="ForestGreen"
                        Command="{Binding SwipeToEditReminderCommand, Source={RelativeSource AncestorType={x:Type vm:ReminderPageViewModel}}}"
                        CommandParameter="{Binding . }"
                        IconImageSource="{StaticResource MenuEditIconWhite}"
                        Text="edit" />
                    <SwipeItem
                        BackgroundColor="Tomato"
                        Command="{Binding SwipeToDeleteReminderCommand, Source={RelativeSource AncestorType={x:Type vm:ReminderPageViewModel}}}"
                        CommandParameter="{Binding . }"
                        IconImageSource="{StaticResource MenuDeleteIconWhite}"
                        Text="delete" />
                </SwipeItems>
            </SwipeView.LeftItems>

            <!-- The Content -->

            <StackLayout
                Margin="12"
                Padding="18,12"
                Orientation="Horizontal"
                VerticalOptions="CenterAndExpand">
                <StackLayout Spacing="3">
                    <Label Text="{Binding ReminderName}" />
                    <Label>
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding ReminderOnTimeLabel}" />
                                <Span Text=" - " TextColor="DimGray" />
                                <Span Text="{Binding ReminderOffTimeLabel}" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </StackLayout>
            </StackLayout>
        </SwipeView>
    </DataTemplate>
</CollectionView.ItemTemplate>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T07:05:28.13+00:00

Could you describe more about how the list item Content is still covering part of a SwipeItem ? Or take some screen shoot? In addition, what's the MAUI version and OS version?

Since I'm not sure about MenuEditIconWhite, your ViewModel and Command="{Binding SwipeToEditReminderCommand, Source={RelativeSource AncestorType={x:Type vm:ReminderPageViewModel}}}", I test with the sample's Delete.png and a custom command. But I cannot reproduce the issue.

When I removed the Margin="12" of content, the text can be displayed in full. You could check if it is related to the margin.
dg2k 1,416 Reputation points

2023-06-23T07:55:56.85+00:00

No problem with UI such as MenuEditIconWhite which is just a FontAwesome based Icon I defined as resources. I have checked with normal PNG images and the IconSourceImage is not a problem at all. Here are images with captions explaining them.

List item before SwipeView action:

Expected display when swiped:

Actual display when swiped:
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T09:01:49.83+00:00

Which device are you testing on? Are there any differences when you remove Margin and Padding?
dg2k 1,416 Reputation points

2023-06-23T09:12:35.47+00:00
Tested on both physical device (Samsung such as A30 M32) and emulators up to API 33. Same result.
No differences when removing margins and padding.
Also tried adding the following in the View Page as suggested by someone at https://github.com/dotnet/maui/discussions.

protected override void OnNavigatedTo(NavigatedToEventArgs args) { InvalidateMeasure(); base.OnNavigatedTo(args); }
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T09:45:43.41+00:00

With .NET7, right? I still cannot reproduce the issue. For this, you could try to open a support ticket. Please contact our paid phone support at MS Support. You will get 1:1 support on that.
Jigen Ry 0 Reputation points

2023-06-27T01:24:58.42+00:00

To avoid content covering revealed SwipeItems in a CollectionView, you can follow these recommendations:

Adjust the layout: Ensure that the layout of your CollectionView provides enough space for the SwipeItems to be fully revealed without getting covered by other content. You can adjust the size and positioning of your CollectionView cells or adjust the overall layout constraints to accommodate the swipe action.

Use appropriate SwipeItem sizes: Consider the size and content of your SwipeItems. If the SwipeItems are too wide or have excessive content, they are more likely to get covered. Opt for compact and concise SwipeItems that fit within the available space without obstructing other elements.

Prioritize swipe actions: Evaluate the importance of the swipe actions compared to other content in your CollectionView. If the swipe actions are crucial and need to be clearly visible, consider giving them higher priority by positioning them prominently or using distinct visual cues.

Test on different devices and orientations: Make sure to test your CollectionView and swipe actions on various devices and orientations to ensure they work well and do not get covered in any scenario. This will help you identify any potential issues and make necessary adjustments.

Provide visual indicators: Consider adding visual indicators or cues to signify the presence of swipe actions. This can include icons, animations, or color changes that make it clear to users that they can swipe on the items. By providing clear indications, you can reduce the chances of users accidentally covering the swipe actions.

User testing and feedback: Conduct user testing to gather feedback on the usability of your CollectionView and swipe actions. Observing how users interact with the content and incorporating their feedback can help you identify any issues and refine the design to improve the user experience.

By implementing these strategies, you can ensure that the revealed SwipeItems in your CollectionView remain visible and accessible without being covered by other content, providing a seamless and intuitive user experience.
dg2k 1,416 Reputation points

2023-06-27T13:14:01.35+00:00

We really need to go that detailed to get XAML work?
I understand the basic rules of using XAML but CollectionView + SwipeView seem to have some real issues. Most layouts work as expected but there seem to be, not only layout issues, but also performance issues when it comes to CollectionView + SwipeView. My question arises from existing experiences with Xamarin and MAUI designs.

1 answer

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T07:05:28.13+00:00

Could you describe more about how the list item Content is still covering part of a SwipeItem ? Or take some screen shoot? In addition, what's the MAUI version and OS version?

Since I'm not sure about MenuEditIconWhite, your ViewModel and Command="{Binding SwipeToEditReminderCommand, Source={RelativeSource AncestorType={x:Type vm:ReminderPageViewModel}}}", I test with the sample's Delete.png and a custom command. But I cannot reproduce the issue.

When I removed the Margin="12" of content, the text can be displayed in full. You could check if it is related to the margin.
dg2k 1,416 Reputation points

2023-06-23T07:55:56.85+00:00

No problem with UI such as MenuEditIconWhite which is just a FontAwesome based Icon I defined as resources. I have checked with normal PNG images and the IconSourceImage is not a problem at all. Here are images with captions explaining them.

List item before SwipeView action:

Expected display when swiped:

Actual display when swiped:
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T09:01:49.83+00:00

Which device are you testing on? Are there any differences when you remove Margin and Padding?
dg2k 1,416 Reputation points

2023-06-23T09:12:35.47+00:00

Tested on both physical device (Samsung such as A30 M32) and emulators up to API 33. Same result.
No differences when removing margins and padding.
Also tried adding the following in the View Page as suggested by someone at https://github.com/dotnet/maui/discussions.

protected override void OnNavigatedTo(NavigatedToEventArgs args) { InvalidateMeasure(); base.OnNavigatedTo(args); }
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-06-23T09:45:43.41+00:00

With .NET7, right? I still cannot reproduce the issue. For this, you could try to open a support ticket. Please contact our paid phone support at MS Support. You will get 1:1 support on that.
dg2k 1,416 Reputation points

2023-06-27T13:14:01.35+00:00

We really need to go that detailed to get XAML work?
I understand the basic rules of using XAML but CollectionView + SwipeView seem to have some real issues. Most layouts work as expected but there seem to be, not only layout issues, but also performance issues when it comes to CollectionView + SwipeView. My question arises from existing experiences with Xamarin and MAUI designs.

Answer 1

Now, having wasted considerable time, I can answer this question with 4 words:

Do NOT Use Threshold.

I used the Threshold property before and makes you think that it's useful (as it should, because it determines how much the content swipes from its rest position). But no, when used with CollectionView control under net7.0 or net8.0 it seems to be a trouble maker. Remove the Threshold property and everything will be as expected.

Which leads me to comment that the Threshold property screwing up things this way must still be a bug.

Share via

How do I avoid the Content covering revealed SwipeItems in CollectionView?

1 answer

Your answer