Question

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

如屏幕截图所示。我知道我必须先添加一个白色的心形图标，然后单击它，然后应显示橙色的心形图标。这是我的代码。

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

但是我对此没有任何例子。

Answer 1

使用

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

在您的资源文件夹中添加2个心脏图标，一个为普通图标，另一个为橙色。然后，您要做的就是引发一个单击的事件或命令，并将ImageButton的源更改为橙色图标。

Answer 2

要实现这一目标：

您的资源文件夹中需要两个图像。 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上，因此，当您点击图像时，该命令将被执行，您可以在两个Heart图标之间切换。

Answer 3

在这里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;

}

如何在Xamarin表单中单击更改图像的颜色？

3 个答案: