Как я могу управлять своими изображениями и создавать анимацию с ним в моем списке?

Question

В настоящее время я работаю со списком, где собираю изображения. Я делаю это успешно, но теперь я хочу добавить к нему анимацию. Я начинаю с того, что изображения полностью 0 с точки зрения непрозрачности, а затем я хочу увеличить его с помощью .FadeTo(1, 1000, Easing.SinIn); после того, как изображения будут собраны.

Поскольку я работаю с списком, я не могу использовать 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 
}); 

запускает код и появляются образы, но я не вижу никакой анимации. В журнале я получаю «SET» 3 раза, когда я собираю 3 изображения. Последняя часть, чтобы заполнить это, - это подключить public string image {get; set;}/my <Image> в xaml к CustomImage, если я не ошибаюсь, но я не совсем уверен, как этого добиться.

Answer 1

Поскольку вам необходимо выполнить анимацию на вашем Image, я бы сказал, определите свою анимацию на расширении класса Image.

Я также предлагаю вам создать свойство bindable на расширении для переключения видимости через вашу анимацию.

что-то вроде ниже

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 классе, вместо того, чтобы в Animation целочисленном свойстве, создать свойство Его для переключения анимации изображения и привязать его к IsImageShowingProperty. После того, как вы добавили данные в ваш ListView.ItemsSource, пройдите и переключите логическое свойство на каждый элемент, и он должен запустить анимацию.

Также не забудьте установить INotifyPropertyChanged на ваш класс Info.

UPDATE: , если вам нужно запустить анимацию при загрузке данных добавьте в ваш CustomImage класс

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

Кроме того, убедитесь, чтобы установить непрозрачность изображения в 0, когда ваша инициализации CustomImage, в противном случае вы не увидели бы эффект затухания