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

Question

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.

George Papadakis · Accepted Answer · 2019-02-16T13:08:08.483

Refer to my old answer here Add overlay color to an image using Xamarin.Forms on how to add an overlay color on every image.

Then it is easy to add a TapGestureRecognizer command and change the color like this

<customControls:IconView
    Source="monkey"
    Foreground="{Binding myColor}"
    WidthRequest="100"
    HeightRequest="100"
    HorizontalOptions="Center"
    VerticalOptions="Center" >
    <customControls:IconView.GestureRecognizers>
         <TapGestureRecognizer Command="{Binding ChangeColorCommand}"/>
    </customControls:IconView.GestureRecognizers>
</customControls:IconView>

Create a a Color myColor property on your viewmodel and change it through your command

public ICommand ChangeColorCommand { get; private set; }
public Color MyColor
{
    get => _myColor;
    set
    {
        _myColor = value; 
        RaisePropertyChanged();
    }
}

void ChangeColor()
{
    MyColor = Color.Red;

}

score -1 · Answer 2 · answered Feb 16 '19 at 11:42

Use

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

Add 2 heart icons to your resource folders, one normal and one orange. Then all you have to do is to raise a clicked event or command and change the source of the ImageButton to the orange icon.

score -1 · Answer 3 · answered Feb 16 '19 at 12:01

To achieve this:

You need two images in your resource folder. whitehearticon3.png & pinkhearticon3.png

There should be one Boolean property which changes when we tap on Heart icon.

private bool _isLiked;
public bool IsLiked
{
    get { return _isLiked; }
    set
    {
        _isLiked = value;
        OnPropertyChanged("IsLiked");
    }
}

Now you can use the DataTrigger on Image to change the image source based on the value of this property.

<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding HeartTapCommand}" NumberOfTapsRequired="1" />
    </Image.GestureRecognizers>
    <Image.Triggers>
        <DataTrigger TargetType="Image" Binding="{Binding IsLiked}" Value="True">
            <Setter Property="Source" Value="pinkhearticon3.png"/>
        </DataTrigger>
        <DataTrigger TargetType="Image" Binding="{Binding IsLiked}" Value="False">
            <Setter Property="Source" Value="whitehearticon3.png"/>
        </DataTrigger>
     </Image.Triggers>
</Image>

In your ViewModel you would be having the HeartTapCommand as follows:

ICommand HeartTapCommand { get; set; } = new Command (() => { IsLiked = !IsLiked; });

You should bind this command on Image TapGuesture, so when you tap on image, this command will get executed and you can switch between your two Heart icons.

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

3 Answers3