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.HorizontalOptions = 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,HorizontalOptions = 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屋!