XAML Button - Background Color binding not refreshing when XAML page has changed

[Riffy100]

Hi

I am developing an App project in VB 2022 with Net MAUI and XAML/C#.

I am not able to get the several XAML Buttons to correctly change the background color - the binding of the Button Background color does not appear to work when the XAML page is updated.

As I don't know the exact reason for this, I have created a github repo so maybe someone can look at the project and see where the issue is.

The repo is:


Thanks

 

[Skydiver]

Why not just post that relevant parts of the code here as text in code tags instead of trying to link to a repo (and then forgetting to put in the link)?

 

[Riffy100]

Oops sorry.

The project is an app where the user is presented with selections in 16 Buttons (which are all set to Dark Cyan color. The user has to match the two matching ones. If the selections are correct, the Button Background color changes to Green, otherwise they revert to Dark Cyan color. This all works fine.

But when the user presses the Next button, the Buttons background color should all revert to Dark Cyan. The Green ones don't change. After spending several hours debugging and googling , I cannot resolve the issue.

Below are screenshots of the App demonstrating the issue.

The first screen show the selections made.

When the Next Button is pressed, the Buttons background color does not reset to DarkGray, but the Text of each Button changes:

Below is the relevant code:

Here is the XAML Page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GamesOfPairs.Views.MatchPairsPage"
             xmlns:local="clr-namespace:GamesOfPairs.ViewModels"
             xmlns:custom="clr-namespace:GamesOfPairs;assembly=GamesOfPairs"
             Title="MatchPairsPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <custom:StringToColorConverter x:Key="ColorConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.BindingContext>
        <local:MatchPairsViewModel x:Name="MatchVM"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <RefreshView>
        <StackLayout>
            <StackLayout Margin="10,18,20,10" HorizontalOptions="CenterAndExpand" >
                <Grid Padding="4,0" RowSpacing="10" ColumnSpacing="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="125"/>
                        <RowDefinition Height="125"/>
                        <RowDefinition Height="125"/>
                        <RowDefinition Height="125"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                        <Button x:Name="Butt1" Grid.Row="0"  Grid.Column="0" Text="{Binding MText1}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor1, Mode=TwoWay, Converter={StaticResource ColorConverter,ColorConverter}}" ClassId="{Binding MId1}" Command="{Binding ChangeColorMCommand}" CommandParameter="{x:Reference Butt1}" />
                    <Button x:Name="Butt2" Grid.Row="0"  Grid.Column="1" Text="{Binding MText2}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor2, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId2}" Command="{Binding ChangeColorMCommand}" CommandParameter="{x:Reference Butt2}"/>
                    <Button x:Name="Butt3" Grid.Row="0"  Grid.Column="2" Text="{Binding MText3}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor3, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId3}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt3}"/>
                    <Button x:Name="Butt4" Grid.Row="0"  Grid.Column="3" Text="{Binding MText4}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor4, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId4}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt4}"/>
                    <Button x:Name="Butt5" Grid.Row="1"  Grid.Column="0" Text="{Binding MText5}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor5, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId5}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt5}"/>
                    <Button x:Name="Butt6" Grid.Row="1"  Grid.Column="1" Text="{Binding MText6}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor6, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId6}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt6}"/>
                    <Button x:Name="Butt7" Grid.Row="1"  Grid.Column="2" Text="{Binding MText7}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor7, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId7}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt7}"/>
                    <Button x:Name="Butt8" Grid.Row="1"  Grid.Column="3" Text="{Binding MText8}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor8, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId8}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt8}"/>
                    <Button x:Name="Butt9" Grid.Row="2"  Grid.Column="0" Text="{Binding MText9}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor9, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId9}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt9}"/>
                    <Button x:Name="Butt10" Grid.Row="2"  Grid.Column="1" Text="{Binding MText10}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor10, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId10}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt10}"/>
                    <Button x:Name="Butt11" Grid.Row="2"  Grid.Column="2" Text="{Binding MText11}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor11, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId11}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt11}"/>
                    <Button x:Name="Butt12" Grid.Row="2"  Grid.Column="3" Text="{Binding MText12}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor12, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId12}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt12}"/>
                    <Button x:Name="Butt13" Grid.Row="3" Grid.Column="0" Text="{Binding MText13}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor13, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId13}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt13}"/>
                    <Button x:Name="Butt14" Grid.Row="3" Grid.Column="1" Text="{Binding MText14}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor14, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId14}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt14}"/>
                    <Button x:Name="Butt15" Grid.Row="3" Grid.Column="2" Text="{Binding MText15}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor15, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId15}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt15}"/>
                    <Button x:Name="Butt16" Grid.Row="3" Grid.Column="3" Text="{Binding MText16}" Style="{StaticResource MButton}" BackgroundColor="{Binding MButtBckColor16, Converter={StaticResource ColorConverter}}" ClassId="{Binding MId16}" Command="{Binding ChangeColorMCommand}"  CommandParameter="{x:Reference Butt16}"/>

                </Grid>
            </StackLayout>
            <StackLayout>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <!--<Label x:Name="CorrectCntName" Text="0" Grid.Row="0" Grid.Column="0" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  BackgroundColor="Green"  FontSize="Large" IsVisible="{Binding IsCorrectCntVisible, Mode=TwoWay}"></Label>
                    <Label x:Name="WrongCntName" Text="0" Grid.Row="0" Grid.Column="2" BackgroundColor="Red" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" IsVisible="{Binding IsWrongCntVisible, Mode=TwoWay}"></Label>-->

                    <Button Text="Next" Grid.Row="1" Grid.Column="1"  BackgroundColor="Green" TextColor="Black" TextTransform="None"  Command="{Binding ResetCommand}"></Button>
                </Grid>

            </StackLayout>
        </StackLayout>
        </RefreshView>
    </ContentPage.Content>
</ContentPage>

The c# oode of StringToColorConverter referenced in the XAML page:

using System.Globalization;

namespace GamesOfPairs;

    public class  StringToColorConverter : IValueConverter
    {
            // Converting only one colour
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                string valueAsString = value.ToString();
                switch (valueAsString)
                {
                    case ("DarkCyan"):
                        {
                            return Colors.DarkCyan;
                        }
                    default:
                        {
                            return Colors.DarkCyan;

                        }
                }
            }
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                return Colors.DarkCyan; 
            }
     }

The following code extract from the ViewModel populates the Buttons Text and Background color:

        public void PopulateCell(int randomNumber, string Text1, int CellMatchNo)
        {
            switch (randomNumber)
            {
                case 1:

                    MText1 = Text1;
                    MButtBckColor1 = Colors.DarkCyan;
                    MId1 = CellMatchNo.ToString();
                    break;
                case 2:
                    MText2 = Text1;
                    MButtBckColor2 = Colors.DarkCyan;
                    MId2 = CellMatchNo.ToString();
                    break;
                case 3:
                    MText3 = Text1;
                    MButtBckColor3 = Colors.DarkCyan;
                    MId3 = CellMatchNo.ToString();
                    break;
                case 4:
                    MText4 = Text1;
                    MButtBckColor4 = Colors.DarkCyan;
                    MId4 = CellMatchNo.ToString();
                    break;
                case 5:
                    MText5 = Text1;
                    MButtBckColor5 = Colors.DarkCyan;
                    MId5 = CellMatchNo.ToString();
                    break;
                case 6:
                    MText6 = Text1;
                    MButtBckColor6 = Colors.DarkCyan;
                    MId6 = CellMatchNo.ToString();
                    break;
                case 7:
                    MText7 = Text1;
                    MButtBckColor7 = Colors.DarkCyan;
                    MId7 = CellMatchNo.ToString();
                    break;
                case 8:
                    MText8 = Text1;
                    MButtBckColor8 = Colors.DarkCyan;
                    MId8 = CellMatchNo.ToString();
                    break;
                case 9:
                    MText9 = Text1;
                    MButtBckColor9 = Colors.DarkCyan;
                    MId9 = CellMatchNo.ToString();
                    break;
                case 10:
                    MText10 = Text1;
                    MButtBckColor10 = Colors.DarkCyan;
                    MId10 = CellMatchNo.ToString();
                    break;
                case 11:
                    MText11 = Text1;
                    MButtBckColor11 = Colors.DarkCyan;
                    MId11 = CellMatchNo.ToString();
                    break;
                case 12:
                    MText12 = Text1;
                    MButtBckColor12 = Colors.DarkCyan;
                    MId12 = CellMatchNo.ToString();
                    break;
                case 13:
                    MText13 = Text1;
                    MButtBckColor13 = Colors.DarkCyan;
                    MId13 = CellMatchNo.ToString();
                    break;
                case 14:
                    MText14 = Text1;
                    MButtBckColor14 = Colors.DarkCyan;
                    MId14 = CellMatchNo.ToString();
                    break;
                case 15:
                    MText15 = Text1;
                    MButtBckColor15 = Colors.DarkCyan;
                    MId15 = CellMatchNo.ToString();
                    break;
                case 16:
                    MText16 = Text1;
                    MButtBckColor16 = Colors.DarkCyan;
                    MId16 = CellMatchNo.ToString();
                    break;
                default:
                    break;
            }
        }

The following code processes the Button Click:

        string PrevId;
        int CellCount = 0;
        private Button PreviousButton = null;
        private Button FirstButton = null;

        private void MButton_Clicked(object sender)
        {
            CellCount++;
            string ButtId = (sender as Button).ClassId;
            if (CellCount == 1)
            {
                (sender as Button).BackgroundColor = Colors.Gray;
                //(sender as Button).IsEnabled = false;
                FirstButton = (Button)sender;
            }
            else
            {
                if (ButtId == PrevId)
                {
                    PreviousButton.BackgroundColor = Colors.Green;

                (sender as Button).BackgroundColor = Colors.Green;
                    PreviousButton.IsEnabled = false;
                    (sender as Button).IsEnabled = false;
                    ++MatchVars.CorrectCount;
                    //CorrectCntName.Text = MatchVars.CorrectCount.ToString();

                }
                else
                {
                    FirstButton.BackgroundColor = Colors.DarkCyan;
                    //FirstButton.IsEnabled = true;
                    ++MatchVars.WrongCount;
                    //WrongCntName.Text = MatchVars.WrongCount.ToString();
                    Application.Current.MainPage.DisplayAlert("Sorry - Wrong Match", "Please try again", "Ok");
                }
            }
            PrevId = ButtId;


            PreviousButton = (Button)sender;
            if (CellCount == 2)
            {
                if (MatchVars.CorrectCount > 0)
                {

                    //CorrectCntName.IsVisible = true;
                }
                if (MatchVars.WrongCount > 0)
                {

                    //WrongCntName.IsVisible = true;
                }
                CellCount = 0;
            }
        }

The following code Resets the Buttons:

    public void ResetCellsData()
        {
            SelectMData();

            MButtBckColor1 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor2 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor3 = Colors.BlueViolet;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor4 = Colors.Blue;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor5 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor6 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor7 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor8 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor9 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor10 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor11 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor12 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor13 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor14 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor15 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
            MButtBckColor16 = Colors.DarkCyan;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));
        }

The click event:

        private void ChangeClickEvne(object sender)
        {
            var ButtClicked = sender as Button;
            ChangeColorMCommand = new Command((o) => ChangeClickEvne(o));

            MButton_Clicked(ButtClicked);
        }