Outlook animtion

Question

I got a border with my item

    <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 BorderContaier}}">
            <SwipeItem.IconImageSource>
                <FontImageSource
                    FontFamily="ma"
                    Glyph="{x:Static constant:MaterialFonts.Delete}" />
            </SwipeItem.IconImageSource>
        </SwipeItem>
    </SwipeItems>
</SwipeView.RightItems>
<Border
    x:Name="BorderContaier"
    Style="{StaticResource CommonBorderStyle}">
    <controls:TurbineData
        TurbineAddres="{Binding Turbine.Address}"
        TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
        TurbineName="{Binding Turbine.Name}" />
</Border>

And I have a command to delete, becouse I want to animate, I have to animate the border

  [RelayCommand]
  async Task DeleteTurbine(object parameter) {

      if (parameter is Border border) {

          // Shrink animation
          await border.ScaleTo(1, 0, Easing.CubicOut); // 300ms for the animation duration


          var turbine = (TurbinePin)border.BindingContext;
          Turbines.Remove(turbine);

      }

  }

Epected behavior

https://reccloud.com/u/ld3pci0

In outlook, it look like a shrink animation

Current behavior

https://reccloud.com/u/jlpb802

Answer 1

Hello,

I watched the video, the animation is on the delete icon and it shakes when drag/swipe the item. Please add the animation on the SwipeItem instead of the Border.

For example: Custom SwipeView

<SwipeView >
 
     <SwipeView.RightItems SwipeChanging="SwipeView_SwipeChanging">
<SwipeItemView>
<StackLayout Margin="10"
              WidthRequest="300"  Background="AliceBlue">
<Image
                 WidthRequest="30"
                 HeightRequest="30"
                 x:Name="myImage"
                 Source="favorite.png"
            HorizontalOptions="Center" />
</StackLayout>
</SwipeItemView>
</SwipeView.RightItems>

SwipeChanging method //You could set in your ViewModel and Command

private async void SwipeView_SwipeChanging(object sender, SwipeChangingEventArgs e)

{

     await myImage.RotateTo(30, 500);

     myImage.Rotation = 0;

}

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.