How To Change Image Source While Clicking On The Listview In Xamarin.forms?

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 MyQuestionV

Solution 1:

You could make some animations using Triggers to avoid flicker:

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

Solution 2:

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.

XAML:

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

ViewModel

publicbool Complete { get; set; }
publicstring TickboxImageSource
{
    get
    {
        return Complete ? "TickboxTicked.png" : "TickboxEmpty.png";
    }
}

publicint TickedOpacity
{
    get
    {
        return Complete ? 1 : 0;
    }
}

publicint UntickedOpacity
{
    get
    {
        return Complete ? 0 : 1;
    }
}

...
publicasyncvoidOnCompletePressed(object source)
{
    Complete = !Complete;
    OnPropertyChanged("Complete");
    OnPropertyChanged("TickedOpacity");
    OnPropertyChanged("UntickedOpacity");
}