locked
Xamarin Forms: How to add background color for clicked button inside grid(Word Search Game) RRS feed

  • Question

  • User351573 posted

    I am using a button inside grid for showing letters to implement a word search game. When clicking a button the entire buttons' background color is changing. I need to change only the background color of the clicked button.

    Xaml.cs

    void SetGridLayout(char[,] matrixToPrint)
    {
        int numRows = matrixToPrint.GetLength(0);
        int numCols = matrixToPrint.GetLength(1);
    
        gridLayout.HorizontalOptions = LayoutOptions.FillAndExpand;
        gridLayout.SetBinding(Button.HeightRequestProperty, new Binding("Width", source: gridLayout));
    
        for (int row = 0; row < numRows; row++)
        {
            gridLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
        }
        for (int col = 0; col < numCols; col++)
        {
            gridLayout.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        }
    
        for (int rowIndex = 0; rowIndex < numRows; rowIndex++)
        {
            for (int columnIndex = 0; columnIndex < numCols; columnIndex++)
            {
                //button
                var Rowbutton = new Button
                {
                    Text = Char.ToString(matrixToPrint[rowIndex, columnIndex]),
                    VerticalOptions = LayoutOptions.FillAndExpand,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    Padding = 0,
                    Margin = 0,
                    CommandParameter = rowIndex.ToString() + "," + columnIndex.ToString()
                };
                Rowbutton.SetBinding(View.BackgroundColorProperty, "ButtonBackgroundColor", BindingMode.TwoWay);
                Rowbutton.SetBinding(Button.CommandProperty, "ClickCommand");
                Rowbutton.SetBinding(Button.HeightRequestProperty, new Binding("Width", source: Rowbutton));
    
                // add the frame to the cuurent row / column in the newly created grid
                gridLayout.Children.Add(Rowbutton, columnIndex, rowIndex);
            }
        }
    }
    

    Button Clicked Code in ViewModel

    private Color _buttonbackgroundColor = Color.White;
    public Color ButtonBackgroundColor
    {
        get { return _buttonbackgroundColor; }
        set
        {
            if (value == _buttonbackgroundColor)
                return;
    
            _buttonbackgroundColor = value;
            OnPropertyChanged("ButtonBackgroundColor");
        }
    }
    
    public Command ClickCommand => new Command((param) => OnSelectionChanged(param));
    private void OnSelectionChanged(object param)
    {
        string CurrentCordinate = param as string;
        Debug.WriteLine("CurrentCordinate:>>" + CurrentCordinate);
    
        if(!string.IsNullOrEmpty(CurrentCordinate))
        {
            if(CurrentSelection.Count == 0)
            {
                CurrentSelection.Add(CurrentCordinate);
                ButtonBackgroundColor = Color.Orange;
                LastCordinate = CurrentCordinate;
            }
            else
            {
                if(LastCordinate != CurrentCordinate)
                {
                    string[] Lastbits = LastCordinate.Split(',');
                    string[] Currentbits = CurrentCordinate.Split(',');
    
                    int LastCordinateRow = ParseToInt(Lastbits[0]);
                    int LastCordinateCol = ParseToInt(Lastbits[1]);
    
                    int CurrentCordinateRow = ParseToInt(Currentbits[0]);
                    int CurrentCordinateCol = ParseToInt(Currentbits[1]);
    
                    if(IsSamePattern(LastCordinateRow, LastCordinateCol, CurrentCordinateRow, CurrentCordinateCol))
                    {
                        CurrentSelection.Add(CurrentCordinate);
                        ButtonBackgroundColor = Color.Orange;
                        if(CheckIfWordSelected(CurrentSelection))
                        {
                            TotalAttempts++;
                            ButtonBackgroundColor = Color.Green;
                            CurrentSelection = new List<string>();
                            LastCordinate = string.Empty;
                            LastClickPattern = string.Empty;
                        }
                    }
                    else
                    {
                        TotalAttempts++;
                        ButtonBackgroundColor = Color.White;
                        CurrentSelection = new List<string>();
                        LastCordinate = string.Empty;
                        LastClickPattern = string.Empty;
                    }
                    LastCordinate = CurrentCordinate;
                }
                else
                {
                    TotalAttempts++;
                    ButtonBackgroundColor = Color.White;
                    CurrentSelection = new List<string>();
                    LastCordinate = string.Empty;
                    LastClickPattern = string.Empty;
                }
            }
        }
    }
    

    I have uploaded a sample project here for the reference. How can I change the background color of clicked button only?

    Wednesday, September 30, 2020 6:28 AM

Answers

  • User379860 posted

    Do not need to set the binding of BackgroundColor as it will work on all buttons in your case . As a workaround , you could pass the button that you click as parameter to the command and set the BackgroundColor as you want

    ``` public class PassObject { public Button currentButton { get; set; } // pass button

    public string Info { get; set; }  //pass the string 
    
    
    public PassObject(Button button,string str)
    {
        currentButton = button;
        Info = str;
    }
    

    } //button var Rowbutton = new Button { //...
    BackgroundColor = Color.Gray,

     // set CommandParameter out the statement
    // CommandParameter = rowIndex.ToString() + "," + columnIndex.ToString() 
    

    };

    //don't need to set bgcolor any more // Rowbutton.SetBinding(View.BackgroundColorProperty, "ButtonBackgroundColor", BindingMode.TwoWay);

    Rowbutton.SetBinding(Button.CommandProperty, "ClickCommand");

    Rowbutton.SetValue(Button.CommandParameterProperty, Rowbutton);

    Rowbutton.SetBinding(Button.HeightRequestProperty, new Binding("Width", source: Rowbutton));

    // add the frame to the cuurent row / column in the newly created grid gridLayout.Children.Add(Rowbutton, columnIndex, rowIndex); ```

    For more information, you can refer to lucas's reply.

    https://stackoverflow.com/questions/64132011/xamarin-forms-how-to-add-background-color-for-clicked-button-inside-gridword-s

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, September 30, 2020 7:34 AM