delete animation

Question

I have my template

    <DataTemplate
        x:Key="PhoneTemplate"
        x:DataType="{x:Null}">

        <SwipeView Threshold="300">
            <SwipeView.RightItems>
                <SwipeItems Mode="Execute">
                    <SwipeItem
                        BackgroundColor="#A50B05"
                        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>

            <controls:TurbineData
                TurbineAddres="{Binding Turbine.Address}"
                TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                TurbineName="{Binding Turbine.Name}" />

        </SwipeView>
    </DataTemplate>

    <DataTemplate
        x:Key="DeskTopTemplate"
        x:DataType="{x:Null}">

        <Grid
            x:Name="GridContainer"
            ColumnDefinitions="*">

            <controls:TurbineData
                Grid.ColumnSpan="2"
                TurbineAddres="{Binding Turbine.Address}"
                TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                TurbineName="{Binding Turbine.Name}" />

            <Label
                Grid.RowSpan="3"
                Grid.Column="1"
                Margin="{OnIdiom Phone='0',
                                 Desktop='0,0,10,0'}"
                BackgroundColor="#A50B05"
                FontFamily="ma"
                FontSize="Medium"
                HorizontalOptions="End"
                HorizontalTextAlignment="End"
                IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                Text="{x:Static constant:MaterialFonts.Delete}"
                VerticalTextAlignment="Center">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer
                        Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                        CommandParameter="{Binding .}" />
                </Label.GestureRecognizers>
            </Label>

            <Grid.GestureRecognizers>
                <PointerGestureRecognizer PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                <PointerGestureRecognizer PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
            </Grid.GestureRecognizers>
        </Grid>


    </DataTemplate>
    <local:DeviceDataTemplateSelector
        x:Key="SelectDataTemplateSelector"
        DeskTopTemplate="{StaticResource DeskTopTemplate}"
        PhoneTemplate="{StaticResource PhoneTemplate}" />

</ResourceDictionary>

and I am using it here

        <CollectionView
            x:Name="TurbineCollection"
            Grid.Row="1"
            Margin="10"
            ItemTemplate="{x:StaticResource SelectDataTemplateSelector}"
            ItemsSource="{x:Binding Turbines}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="10"
                    Orientation="Vertical" />
            </CollectionView.ItemsLayout>
        </CollectionView>

with my vm

        [RelayCommand]
        Task DeleteTurbine(TurbinePin turbinePin) {
            Turbines.Remove(turbinePin);
            return Task.CompletedTask;
        }

and it animates by default, but not everytime

https://reccloud.com/u/9pecksf

Answer 1

Hello,

It's the default behavior. Sometime the animation didn't show because you delete the item quickly.

If the deletion interval is longer, the animation will not disappear.

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.