MAUI - unwanted button background color

I have a dotnet 8 MAUI IOS app that has a view that records the user. I receently updated the app from dotnet 7 to 8 and now I am having some styling issues on this page. The pause and reset buttons have a grey background at times. The background aren't always there. It is dependent on which buttons are selected and the state of the view. Initially only reset and pause have the weird background. When you click play it is only reset and when you click stop it is only pause.

This is the area in question:

<Grid IsVisible="{Binding Path=BindingContext.IsControlsVisible, Source={x:Reference mainPage}}">
                    <Image Source="recording.png" ZIndex="1"/>
                    <FlexLayout WidthRequest="210" JustifyContent="SpaceBetween" AlignItems="Center" ZIndex="2">
                        <Button ImageSource="restart.png" BackgroundColor="Transparent" WidthRequest="80"
                                Clicked="ResetButtonClicked"
                                IsEnabled="{Binding Path=BindingContext.IsRestartButtonEnabled, Source={x:Reference mainPage}}"/>
                        <Button ImageSource="stop.png" BackgroundColor="Transparent" WidthRequest="80"
                                IsVisible="{Binding Path=BindingContext.IsStopButtonVisible, Source={x:Reference mainPage}}"
                                Command="{Binding Path=BindingContext.StopCommand, Source={x:Reference mainPage}}"/>
                        <Button ImageSource="start.png" BackgroundColor="Transparent" WidthRequest="80"
                                IsVisible="{Binding Path=BindingContext.IsRecordButtonVisible, Source={x:Reference mainPage}}"
                                Command="{Binding Path=BindingContext.RecordCommand, Source={x:Reference mainPage}}"/>
                        <Button ImageSource="pause.png" BackgroundColor="Transparent" WidthRequest="80"
                                Command="{Binding Path=BindingContext.PauseCommand, Source={x:Reference mainPage}}"
                                IsEnabled="{Binding Path=BindingContext.IsPauseButtonEnabled, Source={x:Reference mainPage}}"/>
                    </FlexLayout>
                    <Label ZIndex="2" Text="{Binding Path=BindingContext.TimerLabel, Source={x:Reference mainPage}}"
                           IsVisible="{Binding Path=BindingContext.IsCountupVisible, Source={x:Reference mainPage}}"
                           TextColor="{StaticResource AppGray}" FontSize="Large"
                           VerticalOptions="Center" HorizontalOptions="Center" Margin="6, 110, 0, 0"/>
                    <Label ZIndex="2" Text="{Binding Path=BindingContext.TimerRemainingLabel, Source={x:Reference mainPage}}"
                           IsVisible="{Binding Path=BindingContext.IsCountdownVisible, Source={x:Reference mainPage}}"
                           TextColor="Red" FontSize="Large"
                           VerticalOptions="Center" HorizontalOptions="Center" Margin="6, 110, 0, 0"/>
                </Grid>

This code is in the view model and handles when the buttons are clicked:

   public ICommand ResetCommand { get; set; }
   public ICommand PauseCommand { get; set; }

...

ResetCommand = new Command(ResetRecording);
PauseCommand = new Command(PauseRecording);

...

 private void PauseRecording()
        {
            if (recordAudioService != null)
            {
                isRecord = false;
                IsPauseButtonEnabled = false;
                IsStopButtonVisible = false;
                IsResumeButtonVisible = true;
                IsRecordButtonVisible = true;
                IsRestartButtonEnabled = true;
                recordAudioService.PauseRecord();
            }
        }

   private void ResetRecording()
        {
            if (IsRecordingAudio && !isRecord)
            {
                recordAudioService.ResetRecord();
                timerValue = new TimeSpan();
                timerRemainingValue = new TimeSpan();
                TimerLabel = string.Format("{0:mm\\:ss}", timerValue);
                IsRecordingAudio = false;
                IsPauseButtonEnabled = false;
                IsResumeButtonVisible = false;
                IsStopButtonVisible = false;
                IsRestartButtonEnabled = false;
                CreateTimer();
                questionNumber = 1;
                RecordingStatus = "";
                IsAnswerRecorded = false;
            }
        }

I also recently updated these packages :

        <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
        <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
        <PackageReference Include="Plugin.Maui.Audio" Version="3.0.0" />
        <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.82" />
        <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.82" />

So maybe one of these has something to do with it?

Here is a picture of the issue in question:

I do not want that grey background around the pause button. That is the same background that shows up around the reset button as well.

Solution

I figured out what it was and now I feel kind of dumb. The grey background was due to the IsEnabled property on the button:

IsEnabled="{Binding Path=BindingContext.IsPauseButtonEnabled, Source={x:Reference mainPage}}"

The grey background was visible when the button was disabled. There is probably a more elegant way to avoid this but in my case it was easier to simply remove IsEnabled property.

I hope this is helpful to someone in the future.