2015-08-03 3 views
0

У меня есть ListView, в котором у меня есть изображение и текст внутри viewcell, Что Мое требование, чтобы изменить изображение на выбранной строке, я дружнее его,Как изменить источник изображения при нажатии на ListView в xamarin.forms?

var listView = new MyQuestionView(listData); 

     listView.ItemSelected += (sender, e) => { 
      listView.ItemsSource = null; 

      //Update the IconSource here in listData 
      var s = e.SelectedItem as MenuItem; 
      s.IconSource = "foo.png"; 

      listView.ItemsSource = listData; //Updated List 
     }; 

Но, экран мерцает для второй при обновлении. Есть ли способ обновить элемент строки.

Это код для моего Listview:

public class MyQuestionView : ListView 
{ 
    public MyQuestionView (ObservableCollection<MySelectedQuestions> Qdata) 
    { 
     ObservableCollection<MySelectedQuestions> data = Qdata; 

     ItemsSource = data; 
     HasUnevenRows = true; 
     VerticalOptions = LayoutOptions.FillAndExpand; 
     BackgroundColor = Color.Transparent; 
     SeparatorVisibility = SeparatorVisibility.Default; 
     SeparatorColor = Color.FromHex("#4Dffffff"); 
     VerticalOptions = LayoutOptions.FillAndExpand; 
     HorizontalOptions = LayoutOptions.FillAndExpand; 

     ItemTemplate = new DataTemplate (() => { 

      // Create views with bindings for displaying each property. 
      Label titleLabel = new Label(); 
      titleLabel.FontSize = Device.GetNamedSize(NamedSize.Medium,typeof(Label)); 
      titleLabel.SetBinding (Label.TextProperty, "Text"); 
      Image image = new Image(); 
      image.SetBinding(Image.SourceProperty, "IconSource"); 

      return new ViewCell { 
       View = new StackLayout { 
        Padding = new Thickness (5), 
        Orientation = StackOrientation.Horizontal, 
        Children = { 
         image, 
         new StackLayout { 
          VerticalOptions = LayoutOptions.Center, 
          Spacing = 0, 
          Children = { 
           titleLabel 
          } 
         } 
        } 
       } 
      }; 
     }); 

    } 
} 

Заранее спасибо.

+0

ли она по-прежнему будет работать, если вы не установите ImageSource нулевое значение, прежде чем изменить его? –

+0

@WilliamCorncobDecker Да, я могу, обновил код смены источника изображения .. –

ответ

3

Вы могли бы сделать некоторые анимации с помощью триггеров, чтобы избежать мерцания:

Image image = new Image(); 
image.Triggers.Add(new Trigger(typeof(Image)) { 
    Property = Image.SourceProperty, 
    EnterActions = { 
     new FadeTriggerAction() { 
      StartsFrom = 1 
     } 
    }, 
    ExitActions = { 
     new FadeTriggerAction() { 
      StartsFrom = 0 
     } 
    } 
}); 

FadeTriggerAction.cs:

public class FadeTriggerAction : TriggerAction<VisualElement> 
{ 
    public FadeTriggerAction() {} 

    public int StartsFrom { set; get; } 

    protected override void Invoke (VisualElement visual) 
    { 
     visual.Animate("", new Animation((d)=>{ 
      var val = StartsFrom == 0 ? d : 1-d; 
      visual.Opacity = val; 

     }), 
      length:1000, // milliseconds 
      easing: Easing.Linear); 
    } 
} 
+0

Спасибо! Но моя проблема была не с изображением, это список, который мерцает. Мой вопрос: «Я обновляю ListView правильно?» есть ли другой способ обновления ListView? –

+0

Вы не должны переназначать listData. Вы должны изменить существующий ObservableCollection, и изменения будут автоматически обновляться без мерцания. Не выполнять listView.ItemsSource = listData; много раз. Делайте это только один раз, чтобы изменить исходный список соответствующим образом. Также убедитесь, что ваш MenuItem реализует интерфейс IOnNotifyPropertyChanged (например, для свойства IconSource) - без него список не обновляется. –

+0

Если возможно, вы можете предоставить мне пример или источник в Интернете о том, как реализовать интерфейс ListView withIOnNotifyPropertyChanged. –

0

В моей ListBox я имел изображение, которое будет переключать, когда они нажимали на он (отмечен и неквалифицирован). Для этого у меня был источник изображения, связанный с строкой, в которой указано имя ресурса. У меня также были проблемы с миганием списка.

Для решения проблемы я изменил xaml, чтобы наложить два изображения (отмеченные/немаркированные), наложив привязку на непрозрачность и чередуя непрозрачность (0/1).

Ниже приведен фрагмент кода xaml и кода.

XAML:

<Image Source="TickboxTicked.png" Opacity="{Binding TickedOpacity}" WidthRequest="40" Grid.Row="0" Grid.Column="1"> 
    <Image.GestureRecognizers> 
     <TapGestureRecognizer Command="{Binding CompleteCommand}" CommandParameter=""/> 
    </Image.GestureRecognizers> 
</Image> 
<Image Source="TickboxEmpty.png" Opacity="{Binding UntickedOpacity}" WidthRequest="40" Grid.Row="0" Grid.Column="1"> 
    <Image.GestureRecognizers> 
     <TapGestureRecognizer Command="{Binding CompleteCommand}" CommandParameter=""/> 
    </Image.GestureRecognizers> 
</Image> 

ViewModel

public bool Complete { get; set; } 
public string TickboxImageSource 
{ 
    get 
    { 
     return Complete ? "TickboxTicked.png" : "TickboxEmpty.png"; 
    } 
} 

public int TickedOpacity 
{ 
    get 
    { 
     return Complete ? 1 : 0; 
    } 
} 

public int UntickedOpacity 
{ 
    get 
    { 
     return Complete ? 0 : 1; 
    } 
} 

... 
public async void OnCompletePressed(object source) 
{ 
    Complete = !Complete; 
    OnPropertyChanged("Complete"); 
    OnPropertyChanged("TickedOpacity"); 
    OnPropertyChanged("UntickedOpacity"); 
}