如何改变图片的颜色点击在Xamarin形式？
我有一颗白色的心，我必须在点击时把它换成橙色的心。这是我需要的UI的截图。
就像你在截图中看到的。我知道我必须添加一个白色的心图标，然后一旦我点击它，橙色的心图标应该显示。这是我的密码。
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>但我没有得到任何这方面的例子。
回答 3
Stack Overflow用户
发布于 2019-02-16 13:02:02
参考我以前的答案，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;
}Stack Overflow用户
发布于 2019-02-16 11:42:45
使用
<ImageButton Source="whitehearticon3.png" Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" />
在资源文件夹中添加2个心脏图标，一个普通图标和一个橙色图标。然后，您所要做的就是引发一个单击事件或命令，并将ImageButton的源更改为橙色图标。
Stack Overflow用户
发布于 2019-02-16 12:01:52
为实现这一目标：
您需要资源文件夹中的两个图像。白心缩3.png和粉红心缩3.png
应该有一个布尔属性，当我们点击心脏图标时，这个属性会改变。
private bool _isLiked;
public bool IsLiked
{
get { return _isLiked; }
set
{
_isLiked = value;
OnPropertyChanged("IsLiked");
}
}现在，您可以使用图像上的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上绑定这个命令，所以当你点击图像时，这个命令将被执行，你可以在你的两个心脏图标之间切换。
https://stackoverflow.com/questions/54722525
复制相似问题
腾讯云开发者
