47928

How to change Image Source while clicking on the ListView in xamarin.forms?

Question:

I have a ListView in which I have a image and a Text inside a viewcell, What My requirement is to change the image on selected row, I acheived it by,

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

But, The screen flickers for a second while updating like this. Is there a proper way for updating a row's element.

<strong>This is the code for my Listview:</strong>

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

Thanks in Advance.

Answer1:

You could make some animations using Triggers to avoid flicker:

<pre class="lang-net prettyprint-override">Image image = new Image (); image.Triggers.Add(new Trigger(typeof(Image)) { Property = Image.SourceProperty, EnterActions = { new FadeTriggerAction() { StartsFrom = 1 } }, ExitActions = { new FadeTriggerAction() { StartsFrom = 0 } } });

<strong>FadeTriggerAction.cs:</strong>

<pre class="lang-net prettyprint-override">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); } }

Answer2:

In my listbox I had an image which would toggle when they clicked on it (ticked and unticked). To do this I had the Source of the image bound to a string which specified the resource name. I was also having issues with the listview flashing.

To resolve the issue, I changed the xaml to have the two images (ticked/unticked) overlaying each other, put a binding on the opacity, and alternated the opacity (0/1).

A snippet of the xaml and code is below.

<strong>XAML:</strong>

<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>

<strong>ViewModel</strong>

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

Recommend

  • Display of screen is pushed down xamarin.forms android
  • xamarin.forms scrollview keyboard appears and button also scroll
  • How to convert hex string to a float in Rust?
  • Xamarin Forms: Progressbar Height Issue in IOS
  • Using a byte array as key for AES algorithm in Python
  • Get XML Attributes in WPF with a TreeView
  • WPF Binding View as Content
  • View Injection inside ItemsControl
  • UWP ResourceDictionary is not being loaded when I add a second object to it
  • Nested INotifyPropertyChanged class won't work
  • How to create a WPF-like data trigger in Silverlight?
  • How to create a fast loading wrapping ListBox?
  • How to change display text in item template based on eval in gridview?
  • Complex Silverlight TreeView, is nested hierarchy possible?
  • Multibinding Multiselection ListView
  • What is the equivalent of Android permissions in iOS development? [duplicate]
  • Neo4j: Filter nodes based on aggregate function
  • What's wrong with my datatrigger binding?
  • CloseOptionsMenu doesn't work?
  • How to set current CultureUI via XAML binding
  • How to map Request parameter in Spring?
  • How to define an array of floats in Shader properties?
  • How to enable mapping the private property of the entity
  • react split panel resize
  • Change Checkbox value without raising event
  • Monotouch crashes with NullReferenceException on non nullable object
  • using html data-attributes as css-variable (i.e. text-shadow)
  • How to retrieve information from antrun back to maven?
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Hide HTML elements without javascript, only CSS
  • Array with custom indexes in Ionic2
  • Not able to aggregate on nested fields in elasticsearch
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • how to save the state in userdefaults of accessory checkmark-iphone
  • Textfile Structure (tables)
  • Database structure design with variable amounts of fields
  • How do I fake an specific browser client when using Java's Net library?
  • How to get a value (ex: baseURL) in every Karate feature?
  • Checking variable from a different class in C#