Question

我目前正在使用listview来收集图像。我成功地做到了，但我现在希望为它添加一个动画。我首先让图像在不透明度方面完全为0，然后我希望在图像被收集后用.FadeTo(1, 1000, Easing.SinIn);增加它。

当我使用listview时，我不能使用x：name，因此我不确定如何使用listview解决它。

这是我目前的代码：

<ListView x:Name="listview" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <AbsoluteLayout>

                          <Image Source = "{Binding image}" Opacity = "{Binding animation}"/>

                        </AbsoluteLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
 </ListView>

代码页：

public class info
{
   public string image {get; set;}
   public int animation {get;set;}
}

List<info> myList = new List<info>();

    async void loadCategories()
    {

        var getInfo = await databaseCS.gettheinfo();

        listview.ItemsSource = null;
        myList = new List<info>();

        foreach (var theitems in getInfo["results"])
        {
           myList.add (new info()
           {
              image = theitems["image"].ToString(),
              animation = 0
           });
        }

      //how can I now create a FadeTo function to make the images return to 1 again once it has been gathered?
      listview.ItemsSource = myList;
     }

当我使用下面答案提供的CustomImage代码时，

更新代码！

布尔：

public class info : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged == null)
                return;

        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    private bool _result;

    public string image {get; set;}

    public bool isImageShowing
    {
        get {
                System.Diagnostics.Debug.WriteLine("GET");
                return _result;
            }

        set {
                System.Diagnostics.Debug.WriteLine("SET");
                _result = value;
                OnPropertyChanged("IsImageShowing");
        }
    }
}

当我将图像添加到列表中时：

myList.add (new info()
{
       image = theitems["image"].ToString(),
       isImageShowing = true
});

代码运行并显示图像，但我看不到动画。在日志中我得到＆＃34; SET＆＃34;我收集3张图片3次。完成此操作的最后一部分是将xaml中的public string image {get; set;} / my <Image>连接到CustomImage，如果我没有弄错的话，但我不确定如何实现这一目标。

Answer 1

由于您需要在Image上执行动画，我会说在Image类的扩展名上定义动画。

我还建议您在扩展程序上创建一个可绑定属性，以切换动画中的可见性。

如下所示

public class CustomImage : Image
{
    public static readonly BindableProperty IsImageShowingProperty = BindableProperty.Create("IsImageShowing", typeof(bool), typeof(CustomImage), false, BindingMode.Default, propertyChanged: OnImageShowingChanged);

    private static void OnImageShowingChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if(newValue == null) return;

        var img = (CustomImage)bindable;
        var b = (bool)newValue;

        if(b)
        {
            img.ShowImage();
        }
        else
        {
            img.HideImage();
        }
    }

    public bool IsImageShowing
    {
        get {  return (bool)GetValue(IsImageShowingProperty); }
        set { SetValue(IsImageShowingProperty, value); }
    }

    public void ShowImage()
    {
        this.FadeTo(1, 1000, Easing.SinIn);
    }

    public void HideImage()
    {
        this.FadeTo(0, easing: Easing.SinIn);
    }
}

现在在Info类中，创建一个bool属性来切换图像动画并将其绑定到Animation，而不是拥有IsImageShowingProperty整数属性。将数据添加到ListView.ItemsSource后，请遍历并切换每个项目的布尔属性，然后运行动画。

还要确保在INotifyPropertyChanged课程上实施Info。

<强>更新如果您需要在数据加载时运行动画，请将其添加到CustomImage类

protected override void OnBindingContextChanged()
{
    base.OnBindingContextChanged();
    if(IsImageShowing)
    {
        this.ShowImage();
    }
}

还要确保在初始化CustomImage时将图像不透明度设置为0，否则您将看不到淡入效果

如何在列表视图中控制我的图像并使用它创建动画？

1 个答案: