I am using a button inside the grid for showing letters to implement a Word search game. Initially, the UI is looking good, but when clicks the play again button the UI breaks.
Screenshot:
Code for the setting button inside grid:
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++)
{
var Rowbutton = new Button
{
Text = Char.ToString(matrixToPrint[rowIndex, columnIndex]),
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Padding = 0,
Margin = 0,
BackgroundColor = Color.White
};
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));
gridLayout.Children.Add(Rowbutton, columnIndex, rowIndex);
}
}
}
I tried a lot to find the cause behind this issue, but no luck. I have uploaded a sample project here for the reference. Thanks in advance.
you are adding new rows and cols to an existing Grid without clearing it first
Related
How do i get row id of grid row selection? I want to add row unique id and i want it on tapped or on clicked. please suggest me if anyone have any idea.
I want to do some thing like this, if i click on the row and i get id. with this id i will fetch another records and send user on another page. for this i need unique id of the row.
i have grid like bellow:
Below is the code i use:
public BusList(Common busdata)
{
InitializeComponent();
this.BindingContext = this;
List<BusDetail> Bus = new List<BusDetail>
{
...
new BusDetail("Nita Travel","Mumbai", "Navsari",new DateTime(2017, 3, 9), "10:15 AM", "09:15 AM")
};
Label header = new Label
{
Text = "GridView Demo",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
};
var controlGrid = new Grid
{
RowSpacing = 2,
ColumnSpacing = 2,
Margin = new Thickness(5, Device.OnPlatform(5, 0, 0), 5, 5)
};
controlGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
for (int i = 0; i < Bus.Count(); i++)
{
controlGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
}
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
controlGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
Bus = Bus.Where(x => x.FromDest.ToLower().Contains(busdata.FromDest.ToLower()) && x.FromDate == busdata.FromDate).ToList();
controlGrid.Children.Add(new Label { Text = "ID", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 0, 0);
controlGrid.Children.Add(new Label { Text = "Travel Name", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 1, 0);
controlGrid.Children.Add(new Label { Text = "Arr Time", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 2, 0);
controlGrid.Children.Add(new Label { Text = "Dep Time", Font = Font.SystemFontOfSize(NamedSize.Large).WithAttributes(FontAttributes.Bold), BackgroundColor = Color.Gray }, 3, 0);
for (int i = 0; i < Bus.Count(); i++)
{
var clickableRow = new ContentView();
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "RowTappedCommand");
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, i.ToString());
clickableRow.GestureRecognizers.Add(tapGestureRecognizer);
clickableRow.BindingContext = i.ToString();
controlGrid.Children.Add(clickableRow, 0, i);
Grid.SetColumnSpan(clickableRow, 3);
controlGrid.Children.Add(new Label { Text = Bus[i].TravelName, BindingContext = Bus[i].TravelName, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 1, i + 1);
controlGrid.Children.Add(new Label { Text = Bus[i].ArrivalTime, BindingContext = Bus[i].ArrivalTime, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 2, i + 1);
controlGrid.Children.Add(new Label { Text = Bus[i].DepartureTime, BindingContext= Bus[i].DepartureTime, BackgroundColor = Color.LightGray, VerticalTextAlignment = TextAlignment.Center }, 3, i + 1);
}
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
this.Content = new StackLayout
{
Children =
{
header,
controlGrid
}
};
}
public void RowTappedCommand(string index)
{
var tappedRow = int.Parse(index);
}
You could add a ContentView to each row on the first column and span it across all columns by using the ColumnSpan property. Then you'd handle the taps with a TouchGestureListener. When creating the Command, you'd also include a CommandParameter which contains the index of the row in question.
Outside the constructor, define this:
public ICommand RowTappedCommand { get; private set; }
Then add the following code somewhere after InitializeComponent:
RowTappedCommand = new Command<string>(RowTapped);
Then create the clickable ContentView controls for each row:
var clickableRow = new ContentView {
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
}
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "RowTappedCommand");
var binding = new Binding();
binding.Source = i.ToString();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, binding); // This is the index of the row
clickableRow.GestureRecognizers.Add(tapGestureRecognizer);
controlGrid.Children.Add(clickableRow, 0, 0);
Grid.SetColumnSpan(clickableRow,3);
You also need to define the method that matches the name defined in the CommandProperty. If you have a view model defined for the view you need to do it there. Otherwise, you'll need to add the method to your view's code behind file (xaml.cs).
void RowTapped(string index)
{
var tappedRow = int.Parse(index);
// Do something with the value
}
Remember to set the BindingContext correctly so that your command gets called. Here's more information about Commands in Xamarin.Forms:
Update: There were a few mistakes that needed to be fixed.
Command wasn't defined correctly.
The binding for the command property needs to be pointing to a static value
Simplifying Events with Commanding
I know the default icon is "circle",now I want to change the icon shape.The total icon shape are only "circle", "square", "triangle", "cross".Can Iuse custome icon?I use these codes in the databound event,but it seems not work.
var colorArr = new Array("#FF0000", "#FF8C00", "#006400", "#40E0D0", "#800080");
var iconShapeArr = newArray("circle", "square", "triangle", "cross");
function onDataBound(e) {
var chart = e.sender;
var series = chart.options.series;
for(var index = 0; index <= series.length - 1; index++) {
chart.options.series[index].color = colorArr[index];
chart.options.series[index].markers.background = colorArr[index];
// chart.options.series[index].notes.icon.shape = "square";
}
As far as I know,it can not be custom.You can change the type like these:
function onDataBound(e) {
var colorArr = ["#FF0000", "#FF8C00", "#006400", "#40E0D0", "#800080"];
var iconShapeArr = ["triangle", "square", "triangle", "cross"];
var chart = e.sender;
var series = chart.options.series;
for(var index = 0; index <= series.length - 1; index++) {
chart.options.series[index].color = colorArr[index];
chart.options.series[index].markers.background = colorArr[index];
chart.options.series[index].markers.type = iconShapeArr[index];
}
}
This is what I'm trying to create. White areas are System.Windows.Shapes.Rectangle in a Grid. This is my code for creating grid, columns, rows and rectangles;
Grid newGrid = new Grid();
for(int r=0; r<10; r++ ) {
newGrid.RowDefinitions.Add(
new RowDefinition { Height = new GridLength(30) });
for( int c=0; c<10; c++ ) {
newGrid.ColumnDefinitions.Add(
new ColumnDefinition { Width = new GridLength(30) });
Rectangle rec = new Rectangle{
Fill = new SolidColorBrush(Colors.White)
};
Grid.SetColumn(rec, c);
Grid.SetRow(rec, r);
newGrid.Children.Add(rec);
}
}
LayoutRoot.Children.Add(newGrid);
But I have not any idea how can add borders as we can see in picture. Thanks for suggestions.
Try
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
rec.Stroke = blackBrush;
Chart is created by code. But I can't disable vertical lines in chart.
It is a code of creating chart:
public void CreateChart() {
CleanChart();
visiChart = new Chart()
{
ToolTipEnabled = true,
Width = 400,
Height = 200,
Padding = new Thickness(0),
Margin = new Thickness(0, 6, 0, -12),
Background = new SolidColorBrush(Colors.White),
};
ChartGrid grid = new ChartGrid()
{
Enabled = false
};
DataSeries dataSeries = new DataSeries();
DataPoint dataPoint;
Axis yAx = new Axis()
{
AxisLabels = new AxisLabels() { Enabled = false },
Grids = new ChartGridCollection() {grid}
};
int i = 0;
var deps = App.CurrentAgreement.Deposits.Deposit.Where(x => x.DepositIliv + x.DepositLink > 0).ToList();
foreach (var dep in deps) {
dataPoint = new DataPoint();
dataPoint.YValue = dep.DepositIliv + dep.DepositLink + dep.UValue + dep.WarrantyValue;
dataPoint.XValue = i;
i++;
dataPoint.LabelText = dataPoint.YValue.Out();
dataPoint.AxisXLabel = DateTime.Parse(dep.DepositDate).ToString("MMM yyyy");
dataPoint.MouseLeftButtonUp += dataPoint_MouseLeftButtonUp;
dataSeries.DataPoints.Add(dataPoint);
}
dataSeries.LabelEnabled = true;
dataSeries.RenderAs = RenderAs.Column;
dataSeries.Color = new SolidColorBrush(Colors.Green);
visiChart.Series.Add(dataSeries);
visiChart.AxesY.Add(yAx);
ChartPlaceHolder.Children.Add(visiChart);
}
But i dont need vertical lines visible. It is a screen of chart.
How i can disable lines??
Help me, please.
You have to disable the Grid lines from AxisX also.
Example:
ChartGrid grid = new ChartGrid()
{
Enabled = false
};
Axis xAx = new Axis();
xAx.Grids.Add(grid);
visiChart.AxesX.Add(xAx);
i am taking one grid having 3 rows and 3 columns .i want to bind the images to that grid actually images are added to grid but it is not added in correct way.i.e they are not place with in cells of grid .
How to bind 12 images correctly to cells of grid .i want all images are having same size and width placing properly in that grid.
I think my version is more clearly (3 col, rows auto):
ColumnDefinition coldef = new ColumnDefinition();
coldef.MinWidth = 135;
gridCat.ColumnDefinitions.Add(coldef);
coldef = new ColumnDefinition();
coldef.MinWidth = 135;
gridCat.ColumnDefinitions.Add(coldef);
coldef = new ColumnDefinition();
coldef.MinWidth = 135;
gridCat.ColumnDefinitions.Add(coldef);
RowDefinition rowdef = rowdef = new RowDefinition();
rowdef.MinHeight = 135;
gridCat.RowDefinitions.Add(rowdef);
for (int i = 0; i < App.CatViewModel.Items.Count; i++)
{
Image grid_image = new Image();
ImageSourceConverter c = new ImageSourceConverter();
grid_image.SetValue(Image.SourceProperty, c.ConvertFromString("img/touro.png"));
grid_image.SetValue(Image.WidthProperty, 128.0);
grid_image.SetValue(Image.HeightProperty, 128.0);
if ((i + 1) % 3 == 0)
{
rowdef = new RowDefinition();
rowdef.MinHeight = 135;
gridCat.RowDefinitions.Add(rowdef);
}
grid_image.SetValue(Grid.RowProperty, i/3);
grid_image.SetValue(Grid.ColumnProperty, i%3);
gridCat.Children.Add(grid_image);
}
<Grid HorizontalAlignment="left" Name="grid_main" Visibility="collapsed">
</Grid>
Here is the code which will arrange the 4 images in one row.
int j = 0;
int k = 0;
for (i = 1; i < 13; i++)
{
grid_image = new Image();
ColumnDefinition coldef = new ColumnDefinition();
coldef.Width = GridLength.Auto;
grid_main.ColumnDefinitions.Add(coldef);
// do this for each row
RowDefinition rowdef = new RowDefinition();
rowdef.Height = GridLength.Auto;
grid_main.RowDefinitions.Add(rowdef);
Grid.SetColumn(grid_image, 0);
Grid.SetRow(grid_image, 0);
if (j < 4)
{
grid_image.SetValue(Grid.RowProperty, k);
grid_image.SetValue(Grid.ColumnProperty, j++);
grid_main.Children.Add(grid_image);
}
else
{
j = 0; k = k + 1;
grid_image.SetValue(Grid.RowProperty, k);
grid_image.SetValue(Grid.ColumnProperty, j++);
grid_main.Children.Add(grid_image);
}
}