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?