[英]How to bind an event to the property IsVisible of a ContentView?
I've created a control in Xamarin.Forms , allowing me to display a reusable error view , with ContentView
and Lottie
animations.我在Xamarin.Forms 中创建了一个控件,允许我使用ContentView
和Lottie
动画显示可重用的错误视图。
My view contains: the Lottie
animation, 2 Labels
(a title and a description) and a "Retry" Button
.我的视图包含: Lottie
动画、2 个Labels
(一个标题和一个描述)和一个“重试” Button
。
The Lotie animation is set like this, cause I want that the animation is only displayed once: 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"/>
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?我想知道有没有办法将事件绑定到控件的IsVisible属性上,此时重新启动相应的动画?
You can add an property for your ctrl:ErrorView
, then set the AutoPlay
to false at the begining.您可以为ctrl:ErrorView
添加一个属性,然后在开始时将AutoPlay
设置为 false。
Here is ctrl:ErrorView
's layout.这是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>
Here is ctrl:ErrorView
's background code.这是ctrl:ErrorView
的后台代码。 Then I add IsStartAnimationView
property.然后我添加IsStartAnimationView
属性。 if the IsStartAnimationView
's binding value to true.如果IsStartAnimationView
的绑定值为 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.在 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.这是运行gif。
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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.