How change the color of image on click in Xamarin forms?

judsonabrahamjudsonabraham USMember ✭✭✭
edited November 2018 in Xamarin.Forms

I have a white heart I have to change it to an orange heart on click. This is the screenshot of the UI I need

As you can see in the screenshot. I know I have to add one white heart icon initially then once I click on it the orange heart icon should be displayed. This is my code.

<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>

But I'm not getting any example regarding this.

Best Answer

  • Ahsanzz1Ahsanzz1 ✭✭
    edited November 2018 Accepted Answer

    Simple solution is:

    Add two Images "whiteheart" and "orangeheart".

    Set a name for your image which will be used to pass the source image:

    x:name="myImage"

    Then add a tap gesture to your image:

    <Image Grid.Row="0" Grid.Column="5" x:name="myImage" Margin="0,10,0,0" Source="whiteheart"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="Image_tapped"/> </Image.GestureRecognizers> </Image>

    And finally handle the tap event in your cs file:

    private void Image_tapped(object sender, EventArgs e) { myImage.Source = "orangeheart"; }

Answers

  • Ahsanzz1Ahsanzz1 Member ✭✭
    edited November 2018 Accepted Answer

    Simple solution is:

    Add two Images "whiteheart" and "orangeheart".

    Set a name for your image which will be used to pass the source image:

    x:name="myImage"

    Then add a tap gesture to your image:

    <Image Grid.Row="0" Grid.Column="5" x:name="myImage" Margin="0,10,0,0" Source="whiteheart"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="Image_tapped"/> </Image.GestureRecognizers> </Image>

    And finally handle the tap event in your cs file:

    private void Image_tapped(object sender, EventArgs e) { myImage.Source = "orangeheart"; }

  • JohnHardmanJohnHardman GBUniversity mod

    @judsonabraham

    The easiest option is to have two images as per the reply from @Ahsanzz1

    However, if you wanted to generalise it to be able to have a whole load of color possibilities, you would use a png file for the image, make the heart transparent in the png file, and then, once loaded into an Image, overlay the Image on another view (e.g. a BoxView). You could then have the heart appear to change color by simply changing the color of the view that is underneath the Image. That way you could dynamically set the Color, rather than be restricted to two options. That's probably overkill for what you want here though.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Or use the TintedImage nuget and bind the TintColor property.

  • GaetanFGaetanF USMember ✭✭✭

    Also, if you follow the MVVM principle, I would bind the tap action of the image to a TapIconCommand inside the view model instead of managing this in the code behind. The view model would also contains a notifying IconSelection property that would be bound to whatever icon you want to display, depending on its value (you can achieve that with Triggers for example).
    Change the IconSelection inside the TapIconCommand and that's you done. You can also restore the right icon if you persist the IconSelection property with this method.

Sign In or Register to comment.