如何将事件绑定到ContentView的属性ContentView？

Question

我在Xamarin.Forms，中创建了一个控件，允许我显示带有ContentView和Lottie动画的可重用错误视图。

我的视图包含：Lottie动画，2 Labels (标题和描述)和“重试”Button。

Lotie动画设置如下，因为我希望动画只显示一次：

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

问题是，当我从父视图显示错误控制时，动画已经播放：

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

我想知道是否有一种方法将一个事件绑定到控件的IsVisible属性，此时重新启动相应的动画？

Answer 1

您可以为ctrl:ErrorView添加一个属性，然后在开始时将AutoPlay设置为false。

这是ctrl:ErrorView的布局。

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

这是ctrl:ErrorView的背景代码。然后我添加IsStartAnimationView属性。如果IsStartAnimationView的绑定值为true。然后播放动画。

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

在Contentpage中使用此控件。

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

我使用按钮单击事件来进行测试。

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

这是跑龙套。

​

​

Answer 2

这个解决方案是在另一个论坛上给我的。我只需将此代码添加到控件后面的代码中：

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