CollectionView Outlook animtion

Question

I have a collectionView

 <ContentPage.Behaviors>
     <toolkit:EventToCommandBehavior
         Command="{Binding PageEnterCommand}"
         CommandParameter="{Binding Source={x:Reference TurbineCollection}}"
         EventName="Appearing" />
 </ContentPage.Behaviors>

 <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 .}">
                                     <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>

                     <Border
                         IsVisible="{OnIdiom Desktop=True,
                                             Phone=False}"
                         Style="{StaticResource CommonBorderStyle}">
                         <Grid
                             x:Name="GridContainer"
                             ColumnDefinitions="*,*"
                             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}" />

                             <Button
                                 Grid.RowSpan="3"
                                 Grid.Column="1"
                                 BackgroundColor="{AppThemeBinding Dark={x:StaticResource SwipeDark},
                                                                   Light={x:StaticResource SwipeLight}}"
                                 Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                 CommandParameter="{Binding .}"
                                 CornerRadius="0"
                                 HeightRequest="{Binding Height, Source={x:Reference GridContainer}}"
                                 HorizontalOptions="End"
                                 VerticalOptions="Center">
                                 <Button.ImageSource>
                                     <FontImageSource
                                         FontFamily="ma"
                                         Glyph="{x:Static constant:MaterialFonts.Delete}" />
                                 </Button.ImageSource>
                             </Button>
                         </Grid>
                     </Border>
                 </Grid>
             </DataTemplate>
         </CollectionView.ItemTemplate>
     </CollectionView>

I am deleting the object

     [RelayCommand]
     async Task DeleteTurbine(object o) {
         if (o != null && o is TurbinePin turbinePin) {
             await view.ScaleYTo(0, 500, Easing.Linear);
             // Remove the item from the collection
             Turbines!.Remove(turbinePin);
             // Optionally, you can add a delay to ensure the animation completes before layout updates
         }

and for the most part is working

but I want the collectionview item, to stay there when deleting it

I am trying to recreate the outlook animation (On android), but wen deleting it, I don't stay it the stay place

https://reccloud.com/u/kl89mz1

and in windows the Animation is faster

https://reccloud.com/u/14nthkb

Answer 1

Hello,

Please see the SwipeView swipe transition mode on Android, and set

<SwipeView android:SwipeView.SwipeTransitionMode="Drag">

Best Regards,

Wenyan Zhang

---

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.