Xamarin Forms - Binding Image Scale

Question

I'm using Xamarin Forms with an MVVM pattern. I want to scale an image down when the tap gesture command is triggered, wait a few milliseconds and scale it back to full size to give a button press effect.

Here is my XAML code:

<Image 
                x:Name="RefreshImage" 
                WidthRequest="24" 
                Scale="{Binding ImageScale, Mode=TwoWay}"
                Source="{local:ImageResource MyProject.Resources.refresh.png}" 
                VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding RefreshTapCommand, Mode=TwoWay}" CommandParameter="RefreshImage" />
                </Image.GestureRecognizers>
</Image>

Here is my View Model:

public class AlertListViewModel : BaseViewModel
{
    public ICommand RefreshTapCommand { get; private set; }
    public double ImageScale { get; set; }       
    public AlertListViewModel()
    {
        RefreshList();

        items.CollectionChanged += this.OnCollectionChanged;

        RefreshTapCommand = new Command(OnTapRefresh);
        ImageScale = 1;
    }

    async void OnTapRefresh(Object obj)
    {
        ImageScale = 0.8;
        await ExecuteRefreshCommand();
        await Task.Delay(100);
        ImageScale = 1;
    }

The tap gesture works to refresh the list and I don't get any errors, but the image doesn't scale

dawid dawid · Accepted Answer · 2018-01-15T21:32:22

You should use RaisePropertyChanged (or somethink similar - generally PropertyChanged from INotifyPropertyChanged) of BaseViewModel in setter of ImageScale.

Xamarin Forms - Binding Image Scale

1 Answers