在 xamarin 中切换带有图像的按钮 [英] Toggle button with an image in xamarin

问题描述

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

i am using Button as beow to show the add to cart button with image in the xaml view

<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 中使用，如下所示

and use in the MVVM inside the constructor as below

CartCommand = new Command<Resturent>(OnCartCommand);

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

then i am using MVVM with dependency injection where i only get the Icommand of the button click in the view model as below

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).在这方面的支持将受到高度赞赏，并感谢您的支持.

i am expecting to create a toggle button where when i click on the button ( where the user add the items to the cart by pressing button with image lowim.png as shown above) then the image of the button suppose to change ( with another image icon lets say add.jpg). support in this regard will be highly appreciated and thank you advance for your support.

推荐答案

好吧，你所要做的就是创建一个像这样的转换器:

Well, all you have to do is create a converter something like this:

 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 资源字典中定义它，如下所示:

Then you need to define it in the XAML resource dictionary of your XAML page something like this:

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

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

Where common is the namespace where your converter is present.

图像源应该是这样的:

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

添加到购物车的位置是模型中的 bool 属性，如下所示:

Where is added to cart is a bool property in your model something like this :

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

Note: Your model class must inherit from INotifyPropertyChanged interface

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

Now, as soon as you change your model bool property it will change the image accordingly.

如有任何疑问，祝您好运

Goodluck revert in case of any queries

这篇关于在 xamarin 中切换带有图像的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！