Borbin the 🐱

For my project I'm working on I needed a button with an image that needs to be changed according to a state variable using XAML and MVVM. In this case, the changing image for a start / stop button:

Add the ImageButton to the MainPage.xaml:

<ContentPage.BindingContext>
    <local:MainPageViewModel />
</ContentPage.BindingContext>

<StackLayout>
    <ImageButton Source="{Binding StartStopImage}"
                 Command="{Binding StartStopCommand}"
                 WidthRequest="50"
                 HeightRequest="50"
                 HorizontalOptions="Center"
                 VerticalOptions="Center" >
    </ImageButton>

Add the implementation for MVVM:

    public MainPageViewModel()
    {
        StartStopCommand = new Command(async () => await StartStop());
    }


    public async Task StartStop()
    {
        recordEnabled = !recordEnabled;

        StartStopImage = recordEnabled ? "stop.png" : "start.png";
    }

    public Command StartStopCommand { get; }

    private string startStopImage = "stop.png";
    public string StartStopImage
    {
        get => startStopImage;
        set
        {
            startStopImage = value;
            OnPropertyChanged(nameof(StartStopImage));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }