padding in swipeview

Eduardo Gomez Romero 465

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

User's image

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

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-09-30T06:04:56.6133333+00:00

Where did you add the Swipeview? Please share Swipeview code.

What steps are needed to repro? Adding swipeview to the outermost border does not reproduce this problem.

Eduardo Gomez Romero 465

wrong code sorry, this is the swipe vew

   <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>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-10-01T03:13:06.8666667+00:00

I moved updated code to question, if you have some addition information that needs to be added. You can update your question directly.

Accepted answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-10-01T03:10:04.74+00:00
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.
Please sign in to rate this answer.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-10-02T05:09:54.94+00:00

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

Eduardo Gomez Romero 465 Reputation points

2024-10-02T06:35:40.13+00:00

where do I register this

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-10-02T06:59:11.4633333+00:00

Put above code to the MauiProgram.cs or your layout background code.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor

2024-10-02T08:44:42.25+00:00

Eduardo Gomez Romero](https://learn.microsoft.com/en-us/users/na/?userid=b36bc2ed-93d1-4dd3-aacf-a49ae60e0ebe), Is that working? You can decrease OfFloat value(such as 0.95f) like following code.

Android.Animation.ObjectAnimator scaleDownX = Android.Animation.ObjectAnimator.OfFloat(res, "scaleX", 0.98f); Android.Animation.ObjectAnimator scaleDownY = Android.Animation.ObjectAnimator.OfFloat(res, "scaleY", 0.98f);

Eduardo Gomez Romero 465 Reputation points

2024-10-02T10:45:34.3933333+00:00

I have not tested it yet, this will come in the version 1.0.1 of my app, but because is it am sure it will work
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

padding in swipeview

0 additional answers

Your answer