How to bind an event to the property IsVisible of a ContentView?

Question

I've created a control in Xamarin.Forms, allowing me to display a reusable error view, with ContentView and Lottie animations.

My view contains: the Lottie animation, 2 Labels (a title and a description) and a "Retry" Button.

The Lotie animation is set like this, cause I want that the animation is only displayed once:

<lottie:AnimationView
    x:Name="networkErrorAnimationView"
    Animation="resource://lottie_error_no_network.json?assembly=ShellAppSample"
    AnimationSource="EmbeddedResource"
    BackgroundColor="Transparent"
    AutoPlay="True"
    HeightRequest="200" WidthRequest="200"
    VerticalOptions="Center" HorizontalOptions="Center"
    Clicked="NetworkErrorAnimationView_Clicked"/>

The problem is that the animation is already played when I display the error control from the parent view:

<ctrl:ErrorView IsVisible="{Binding ShowErrorView, Converter={StaticResource BoolToVisibilityConverter}}"
                Title="{Binding ErrorTitle}"
                Description="{Binding ErrorDescription}"
                ErrorKind="{Binding ErrorKind}"
                RetryButtonCommand="{Binding RetryCommand}" />

I would like to know if there is a way to bind an event to the IsVisible property of the Control, to relaunch the corresponding animation at this moment?

Answer 1

You can add an property for your ctrl:ErrorView, then set the AutoPlay to false at the begining.

Here is ctrl:ErrorView's layout.

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms" 
              x:Name="MyErrorView"
             x:Class="App13.ErrorView">
    <ContentView.Content>
      <StackLayout>
          

            <forms:AnimationView
                x:Name="animationView"
                Animation="1.json"
                AnimationSource="AssetOrBundle"
                RepeatCount="1"
                AutoPlay="False"
                WidthRequest="100"
                HeightRequest="100"/>
            <Label x:Name="title" Text="test" />
            <Label Text="Hello Xamarin.Forms!" />
        </StackLayout>
  </ContentView.Content>
</ContentView>

Here is ctrl:ErrorView's background code. Then I add IsStartAnimationView property. if the IsStartAnimationView's binding value to true. Then play the Animation.

   public partial class ErrorView : ContentView
    {

     

        public string TitleText
        {
            get { return (string)GetValue(TitleTextProperty); }
            set { SetValue(TitleTextProperty, value); }
        }
        public static readonly BindableProperty TitleTextProperty = BindableProperty.Create(
                                                          propertyName: "TitleText",
                                                          returnType: typeof(string),
                                                          declaringType: typeof(ErrorView),
                                                          defaultValue: "",
                                                          defaultBindingMode: BindingMode.TwoWay,
                                                          propertyChanged: TitleTextPropertyChanged);

        private static void TitleTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
           // var control = (ErrorView)bindable;
          //  control.title.Text = newValue.ToString();
        }


        public bool IsStartAnimationView
        {
            get { return (bool)GetValue(IsStartAnimationViewProperty); }
            set { SetValue(IsStartAnimationViewProperty, value); }
        }
        public static readonly BindableProperty IsStartAnimationViewProperty = BindableProperty.Create(
                                                          propertyName: "IsStartAnimationView",
                                                          returnType: typeof(bool),
                                                          declaringType: typeof(ErrorView),
                                                          defaultValue: false,
                                                          defaultBindingMode: BindingMode.TwoWay,
                                                          propertyChanged: IsStartAnimationViewChanged);

        private static void IsStartAnimationViewChanged(BindableObject bindable, object oldValue, object newValue)
        {
            // throw new NotImplementedException();
            var MyValue =(bool) newValue;
            if (MyValue == true) {
                 var control = (ErrorView)bindable;
                  control.animationView.PlayAnimation();
            }

        }

        public ErrorView()
        {
            InitializeComponent();

            this.Content.BindingContext = this;
        }
    }
}

Use this control in the Contentpage.

 <ctrl:ErrorView IsVisible="{Binding Isfavourite}" TitleText="{Binding Name}" IsStartAnimationView="{Binding IsStart}" ></ctrl:ErrorView>

I use button click event to make a test.

 private async void Button_Clicked(object sender, System.EventArgs e)
        {
           
                 myViewModel.IsStart = !myViewModel.IsStart;
        }

Here is running gif.

Answer 2

The solution was given to me on another forum. I just have to add this code in the control's code behind:

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    base.OnPropertyChanged(propertyName);
    if (propertyName == nameof(IsVisible))
    {
        if (this.IsVisible)
        {
            networkErrorAnimationView.PlayAnimation();
        }
        else
        {
                networkErrorAnimationView.StopAnimation();
        }
    }
}