CollectionView Outlook animtion

Eduardo Gomez Romero 465 Reputation points
2024-09-28T18:00:02.7966667+00:00

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

Outlook
Outlook
A family of Microsoft email and calendar products.
3,802 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,471 questions
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Reputation points Microsoft Vendor
    2024-09-30T06:39:50.1766667+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.