c# - 我如何控制我的图像并在我的 ListView 中使用它创建动画？

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 代码时更新了代码!

bool 值:

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

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

Answer 1

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

我还建议您在扩展上创建一个可绑定(bind)属性，以通过动画切换可见性。

类似下面的内容

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 属性来切换图像动画并将其绑定(bind)到 IsImageShowingProperty<，而不是使用 Animation 整数属性。将数据添加到 ListView.ItemsSource 后，遍历并切换每个项目的 bool 属性，它应该会运行动画。

还要确保在您的 Info 类上实现 INotifyPropertyChanged。

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

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

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