Xamarin Forms:如何为网格内的单击按钮添加背景色(Word搜索游戏) [英] Xamarin Forms: How to add background color for clicked button inside grid(Word Search Game)

问题描述

我正在使用网格内的按钮来显示字母以实施单词搜索游戏.单击按钮时，整个按钮的背景颜色都会改变.我只需要更改所单击按钮的背景颜色即可.

Xaml.cs

  void SetGridLayout(char [，] matrixToPrint){int numRows = matrixToPrint.GetLength(0);int numCols = matrixToPrint.GetLength(1);gridLayout.Horizo​​ntalOptions = LayoutOptions.FillAndExpand;gridLayout.SetBinding(Button.HeightRequestProperty，new Binding("Width"，来源:gridLayout))；对于(int row = 0; row< numRows; row ++){gridLayout.RowDefinitions.Add(new RowDefinition {高度= new GridLength(1，GridUnitType.Auto)});}对于(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 ++){//按钮var Rowbutton =新按钮{文字= Char.ToString(matrixToPrint [rowIndex，columnIndex])，VerticalOptions = LayoutOptions.FillAndExpand，Horizo​​ntalOptions = LayoutOptions.FillAndExpand，填充= 0，保证金= 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"，来源:Rowbutton));//将框架添加到新创建的网格中的当前行/列gridLayout.Children.Add(Rowbutton，columnIndex，rowIndex);}}} 

ViewModel中的按钮单击的代码

  private Color _buttonbackgroundColor = Color.White;公共颜色ButtonBackgroundColor{得到{return _buttonbackgroundColor;}放{如果(值== _buttonbackgroundColor)返回;_buttonbackgroundColor =值;OnPropertyChanged("ButtonBackgroundColor")；}}public Command ClickCommand =>new Command((param)=> OnSelectionChanged(param));私有无效OnSelectionChanged(对象参数){字符串CurrentCordinate =参数为字符串；Debug.WriteLine("CurrentCordinate:>" + CurrentCordinate);if(！string.IsNullOrEmpty(CurrentCordinate)){if(CurrentSelection.Count == 0){CurrentSelection.Add(CurrentCordinate);ButtonBackgroundColor = Color.Orange;LastCordinate = CurrentCordinate;}别的{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;如果(CheckIfWordSelected(CurrentSelection)){TotalAttempts ++;ButtonBackgroundColor = Color.Green;CurrentSelection = new List< string>();LastCordinate = string.Empty;LastClickPattern = string.Empty;}}别的{TotalAttempts ++;ButtonBackgroundColor = Color.White;CurrentSelection = new List< string>();LastCordinate = string.Empty;LastClickPattern = string.Empty;}LastCordinate = CurrentCordinate;}别的{TotalAttempts ++;ButtonBackgroundColor = Color.White;CurrentSelection = new List< string>();LastCordinate = string.Empty;LastClickPattern = string.Empty;}}}} 

我已经在

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?

解决方案

You don't 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 (it seems that you also want to pass a string , so you could define a class)

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, new PassObject(Rowbutton, rowIndex.ToString() + "," + columnIndex.ToString()));

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);

in ViewModel

private void OnSelectionChanged(object param)
{

  var obj = param as PassObject;

  var button = obj.currentButton;

  if(button.BackgroundColor==Color.Orange)
  {
        button.BackgroundColor = Color.Gray;
  }
  else
  {
     button.BackgroundColor = Color.Orange;
  }

  string CurrentCordinate = obj.Info;
  //...

这篇关于Xamarin Forms:如何为网格内的单击按钮添加背景色(Word搜索游戏)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！