如何更改 Xamarin 表单中单击时图像的颜色？答案

【问题标题】：How change the color of image on click in Xamarin forms?如何更改 Xamarin 表单中单击时图像的颜色？
【发布时间】：2019-02-16 22:03:37
【问题描述】：

我有一颗白色的心，我必须在点击时将其更改为橙色的心。这是我需要的UI截图

正如您在屏幕截图中看到的那样。我知道我必须先添加一个白色的心形图标，然后单击它会显示橙色的心形图标。这是我的代码。

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

但我没有得到任何关于此的示例。

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

请参阅我的旧答案Add overlay color to an image using Xamarin.Forms关于如何在每张图片上添加叠加颜色。

然后很容易添加TapGestureRecognizer命令并像这样更改颜色

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

在您的视图模型上创建一个 Color myColor 属性并通过您的命令进行更改

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

void ChangeColor()
{
    MyColor = Color.Red;

}

【讨论】：

【解决方案2】：

使用

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

在资源文件夹中添加 2 个心形图标，一个正常，一个橙色。然后你所要做的就是引发一个点击事件或命令，并将 ImageButton 的来源更改为橙色图标。

【讨论】：

【解决方案3】：

要实现这一点：

您的资源文件夹中需要两张图片。 whitehearticon3.png & pinkhearticon3.png

当我们点击心形图标时，应该有一个布尔属性会发生变化。

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

现在您可以使用 Image 上的DataTrigger 来根据此属性的值更改图像源。

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

在您的 ViewModel 中，您将拥有 HeartTapCommand，如下所示：

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

你应该在图片TapGuesture上绑定这个命令，所以当你点击图片时，这个命令将被执行，你可以在两个心形图标之间切换。

【讨论】：