Populate grid cells problem not get the expected result

Hello @Haviv Elbsz !

The issue you're experiencing is likely due to the way the BoxView elements are being rendered within the Grid. Here are some potential causes I can give:

• StrokeThickness of Border Elements: The Border elements you defined have a StrokeThickness of 0, which is fine for the borders around the labels. However the thick lines seem to come from the BoxView elements used for the grid lines.
• BoxView Size: The BoxView elements for the background rows and columns are spanning the entire height and width of the grid due to Grid.SetRowSpan and Grid.SetColumnSpan. This can cause them to appear as thick blocks rather than thin lines. The default size of a BoxView is based on its container, and without explicit sizing, it may fill the available space.
• Layout Options: The commented-out HorizontalOptions and VerticalOptions (set to LayoutOptions.Fill) might have been an attempt to control this, but they need to be uncommented and adjusted properly.

To achieve thin vertical lines, you should Set a specific width for the BoxView elements used as vertical lines (e.g., 1 unit) instead of letting them span the full height. Then ensure the BoxView elements for horizontal lines have a specific height, try to remove or adjust the RowSpan and ColumnSpan for the BoxView elements to prevent them from filling the entire grid.

Here's an example for relevant part in your PopulateGuessFieldsGrid method:

for (int col = 0; col < guessFieldsGrid.ColumnDefinitions.Count; col += 2)
{
    var backgroundColumn = new BoxView
    {
        Color = Colors.Black,
        WidthRequest = 1, // Thin vertical line
        VerticalOptions = LayoutOptions.Fill
    };
    Grid.SetRow(backgroundColumn, 0);
    Grid.SetRowSpan(backgroundColumn, guessFieldsGrid.RowDefinitions.Count);
    Grid.SetColumn(backgroundColumn, col);
    guessFieldsGrid.Children.Add(backgroundColumn);
}

for (int row = 0; row < guessFieldsGrid.RowDefinitions.Count; row += 2)
{
    var backgroundRow = new BoxView
    {
        Color = Colors.Black,
        HeightRequest = 1, // Thin horizontal line
        HorizontalOptions = LayoutOptions.Fill
    };
    Grid.SetColumn(backgroundRow, 0);
    Grid.SetColumnSpan(backgroundRow, guessFieldsGrid.ColumnDefinitions.Count);
    Grid.SetRow(backgroundRow, row);
    guessFieldsGrid.Children.Add(backgroundRow);
}

• Ensure the Grid is properly sized within the ScrollView and VerticalStackLayout. The nested ScrollView (one for horizontal and one for vertical) might also affect the layout. Consider simplifying to a single ScrollView if possible or ensure the inner ScrollView has appropriate constraints.
• Test the layout on different screen sizes to confirm the lines remain thin and consistent.

Try this adjustment and let me know if you still encounter issues!

I built a new blank app and isolated the problem by using the xaml to contains only the scrollview with the grid and behind code to contains only the populate method and it's working as expected. so now I need to scan my app and see what interfere the grid to behave as expected. Thank you.

As far as I can tell, the issue is in how you've defined your grid and how you're adding the BoxViews for lines. Your Grid definitions look like this:

RowDefinitions="2,1*,1,1*,1,1*,2,1*,1,1*,1,1*,2,1*,1,1*,1,1*,2"
ColumnDefinitions="2,1*,1,1*,1,1*,2,1*,1,1*,1,1*,2,1*,1,1*,1,1*,2"

That means that every even-numbered index (0, 2, 4, …) is 2 units thick (intended as grid lines) and every odd-numbered index (1, 3, 5, …) is stretchable content space (* sizing). That part is fine, but when you add this code:

var backgroundColumn = new BoxView { Color = Colors.Black };
Grid.SetRowSpan(backgroundColumn, guessFieldsGrid.RowDefinitions.Count);

you are adding a full-height black column in every even column index. Each of those columns is 2 units wide — which looks much thicker on screen than expected, especially if your grid expands proportionally.

You can make the grid lines thin and consistent by using absolute pixel widths for the line rows/columns instead of proportional units:

<Grid x:Name="guessFieldsGrid"
      RowDefinitions="1,*,1,*,1,*,1,*,1,*,1,*,1,*,1,*,1,*,1"
      ColumnDefinitions="1,*,1,*,1,*,1,*,1,*,1,*,1,*,1,*,1,*,1">
</Grid>

Then your BoxView lines will be exactly 1 pixel wide and form neat thin grid lines. If you prefer to keep your original structure, you can scale down the black bars' width visually by using a fixed pixel thickness:

var backgroundColumn = new BoxView
{
    Color = Colors.Black,
    WidthRequest = 1
};

and for rows:

var backgroundRow = new BoxView
{
    Color = Colors.Black,
    HeightRequest = 1
};

Make sure to also set:

HorizontalOptions = LayoutOptions.Fill;
VerticalOptions = LayoutOptions.Fill;

for proper alignment.

If you just want thin lines and don't need alternating column/row sizes, the simplest way is to wrap your content in a Grid with borders:

<Border Stroke="Black" StrokeThickness="1">
    <Grid ...>
        <!-- Your labels -->
    </Grid>
</Border>

If the above response helps answer your question, remember to "Accept Answer" so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.

hth

Marcin