在 xamarin 中带有图像的切换按钮

Question

我正在使用 Button as beow 在 xaml 视图中显示带有图像的添加到购物车按钮

<Button x:Name="cartbutton" Grid.Row="0" Command="{Binding Source={x:Reference ListItemPage}, Path=BindingContext.CartCommand}" CommandParameter="{Binding .}" HorizontalOptions="End" VerticalOptions="Start" Image="lowim.png" BackgroundColor="Transparent" Margin="0,5,5,0" />

并在构造函数内的MVVM中使用如下

CartCommand = new Command<Resturent>(OnCartCommand);

然后我使用带有依赖注入的 MVVM，我只在视图模型中获得按钮单击的 Icommand，如下所示

public ICommand CartCommand { get; set; }

public async void OnCartCommand(Resturent restoraunt)
{
  await DialogService.DisplayAlert("CART DETAILS", "ITEM"+ restoraunt.Name+ "SUCESSFULLY ADDED", "OK");
}

我希望创建一个切换按钮，当我单击按钮时（用户通过按下带有图像 lowim.png 的按钮将商品添加到购物车，如上所示），然后按钮的图像会改变（与另一个图像图标让我们说 add.jpg）。我们将非常感谢您在这方面的支持，并感谢您的支持。

Answer 1

好吧，你所要做的就是创建一个类似这样的转换器：

 public class ConverterAddRemoveImage : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isAddedToCart = (bool)value;
        if (isAddedToCart)
        {
            return "PositiveImage"; //This will be a string
        }
        else
        {
            return "NegativeImage";  //This will be a string
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后您需要在 XAML 页面的 XAML 资源字典中定义它，如下所示：

<ContentPage.Resources>
<ResourceDictionary>
        <common:ConverterAddRemoveImage x:Key="AddRemoveImage" />
</ResourceDictionary>
</ContentPage.Resources>

常见的是您的转换器所在的命名空间。

图像源是这样的：

Source="{Binding IsAddedToCart, Converter={StaticResource AddRemoveImage}}

添加到购物车的地方是模型中的 bool 属性，如下所示：

  private bool isInCart;
  public event PropertyChangedEventHandler PropertyChanged;
  public bool IsAddedToCart
    {
        get
        {
            return isInCart;
        }
        set
        {
            isInCart= value;
            NotifyPropertyChanged(nameof(IsAddedToCart));
        }
    }
 private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

注意：你的模型类必须继承自INotifyPropertyChanged接口

现在，只要您更改模型 bool 属性，它就会相应地更改图像。

如果有任何疑问，Goodluck 会回复