Toggle button with an image in xamarin - visual-studio

Question

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" />
and use in the MVVM inside the constructor as below
CartCommand = new Command<Resturent>(OnCartCommand);
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");
}
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.

Answer 1

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();
}
}
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.
The image source would be something like this:
Source="{Binding IsAddedToCart, Converter={StaticResource AddRemoveImage}}
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));
}
}
Note: Your model class must inherit from INotifyPropertyChanged interface
Now, as soon as you change your model bool property it will change the image accordingly.
Goodluck revert in case of any queries