Кнопка переключения с изображением в xamarin

Question

Я использую кнопку как внизу, чтобы показать кнопку добавления в корзину с изображением в представлении 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 interface

Теперь, как только вы измените свойство модели bool, оно соответствующим образом изменит изображение.

Возврат Goodluck в случае любых запросов