padding in swipeview

Question

I have I padding in the swipe view, that I don't know where is coming from, I already tried, to set margin, padding to 0 and nothing

When I swipe, I don't want to see the padding

I am trying to mimic the behavior of the outlook app, when you delete something

  <Grid>
       <CollectionView
           x:Name="TurbineCollection"
           Margin="20"
           HorizontalOptions="Center"
           ItemsSource="{Binding Turbines}">
           <CollectionView.ItemTemplate>
               <DataTemplate x:DataType="model:TurbinePin">
                   <Grid>
                       <SwipeView
                           IsVisible="{OnIdiom Phone=True,
                                               Desktop=False}"
                           Threshold="300">
                           <SwipeView.RightItems>
                               <SwipeItems Mode="Execute">
                                   <SwipeItem
                                       BackgroundColor="{AppThemeBinding Dark={x:StaticResource SwipeDark},
                                                                         Light={x:StaticResource SwipeLight}}"
                                       Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                       CommandParameter="{Binding Source={x:Reference borderContainer}}">
                                       <SwipeItem.IconImageSource>
                                           <FontImageSource
                                               FontFamily="ma"
                                               Glyph="{x:Static constant:MaterialFonts.Delete}" />
                                       </SwipeItem.IconImageSource>
                                   </SwipeItem>
                               </SwipeItems>
                           </SwipeView.RightItems>
                           <Border Style="{StaticResource CommonBorderStyle}">
                               <Grid RowDefinitions="*,*,*">
                                   <Label
                                       Style="{StaticResource CommonLabelStyle}"
                                       Text="{Binding Turbine.Name}" />
                                   <Label
                                       Grid.Row="1"
                                       Style="{StaticResource CommonLabelStyle}"
                                       Text="{Binding Turbine.Address}" />
                                   <Label
                                       Grid.Row="2"
                                       Style="{StaticResource CommonLabelStyle}"
                                       Text="{Binding Turbine.LocalizedInstalationDateTime}" />
                               </Grid>
                           </Border>
                       </SwipeView>

system affected: Android

.Net 8

Epected behavior: eliminate the madding

Answer 1

Hello,

have I padding in the swipe view, that I don't know where is coming from

When you swipe the view, the SwipeItem will have zoomed animation to make the size of SwipeItem bigger. Then you can see the red background.

If you want to remove this result, you can add zoom out animation in the SwipeItemMenuItemHandler for android platform like following code.

   Microsoft.Maui.Handlers.SwipeItemMenuItemHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if ANDROID
            AndroidX.AppCompat.Widget.AppCompatButton res=handler.PlatformView as AndroidX.AppCompat.Widget.AppCompatButton;
            Android.Animation.ObjectAnimator scaleDownX = Android.Animation.ObjectAnimator.OfFloat(res,
                           "scaleX", 0.98f);
            Android.Animation.ObjectAnimator scaleDownY = Android.Animation.ObjectAnimator.OfFloat(res,
                    "scaleY", 0.98f);
            scaleDownX.SetDuration(100);
            scaleDownY.SetDuration(100);
 
            Android.Animation.AnimatorSet scaleDown = new Android.Animation.AnimatorSet();
            scaleDown.Play(scaleDownX).With(scaleDownY);
 
            scaleDown.Start();
#endif
        });

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.