A community member has associated this post with a similar question:
CollectionView Outlook animtion

Only moderators can edit this content.

TurbinePin Deletion

Eduardo Gomez Romero 825 Reputation points
2024-09-29T16:53:50.2733333+00:00

I have a swipeView, to delete my object with an animation '

Xaml

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


and the vm

CollectionView? TurbineCollectionView;
private readonly IPopupService _popupService = popupService;
[ObservableProperty]
bool isDeleteButtonVisible;
public ObservableCollection<GeoapifyResult> Suggestions { get; private set; } = [];
[RelayCommand]
void PageEnter(CollectionView collectionView) {
    if (collectionView != null) {
        TurbineCollectionView = collectionView;
        Console.WriteLine(Turbines.Count);
    }
}
[RelayCommand]
async Task DeleteTurbine(object parameter) {
    if (parameter is Border border) {
        var animationTasks = new List<Task>
        {
             border.ScaleYTo(0, 500, Easing.Linear),
        };
        // Wait for all animations to complete
        await Task.WhenAll(animationTasks);
        // Perform the deletion logic here
        if (border.BindingContext is TurbinePin turbine) {
            Turbines.Remove(turbine);
        }
        // Optionally, you can add a delay to ensure the animation completes before layout updates
        await Task.Delay(5000);
        // Reset the border properties
        border.ScaleY = 1;
    }

it works, but sometimes the animation dosent work

https://reccloud.com/u/05wluyj

I am trying to mimic the outlook delete actionhttps://reccloud.com/u/kl89mz1

sometimes it shrinks (Like what I want) and sometimes, it just disappears (I don't want that that)

.Net 8

Maui 8.0.9

Platforms afected Android

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,578 questions
{count} votes