Adding children to Xamarin Forms grid without entering position

Hello, I want to add children to the grid without entering the left, top etc. So I tried grid.Children.Add(layout). But everything is above each other and there is no spacing, Any idea how to fix this?

Tagged:

Answers

  • OsayedZahedaOsayedZaheda USMember ✭✭

    Bump

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda - What do you want to happen? Adding children to a Grid without specifying the position would be expected to overlay them.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @OsayedZaheda said:
    Hello, I want to add children to the grid without entering the left, top etc. So I tried grid.Children.Add(layout). But everything is above each other and there is no spacing, Any idea how to fix this?

    If I were you.
    I'll use StackLayout, why bother using grid and take much pain. :wink:

    -- N Baua

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @N_Baua said:

    @OsayedZaheda said:
    Hello, I want to add children to the grid without entering the left, top etc. So I tried grid.Children.Add(layout). But everything is above each other and there is no spacing, Any idea how to fix this?

    If I were you.
    I'll use StackLayout, why bother using grid and take much pain. :wink:

    -- N Baua

    I don't think StackLayout would work instead of a grid.

    @JohnHardman said:
    @OsayedZaheda - What do you want to happen? Adding children to a Grid without specifying the position would be expected to overlay them.

    I just want it to automatically add the layout to a position where there is no other layout.

    For example:

    foreach(String string in list)
    {
    grid.Children.Add(new Label { Text=string; });
    }

  • JohnHardmanJohnHardman GBUniversity mod
    edited March 2018

    @OsayedZaheda said:
    I just want it to automatically add the layout to a position where there is no other layout.

    Grid isn't going to do that automatically. If you've got a 5x5 grid, how is it going to know (a) that you want it to use "empty" cells (it's a common thing to add more than one View to the same cell), and (b) whether you want it to fill across or down first? It has no way of knowing either.

    It's easy for you to keep track of the next row/column position to populate and to apply the logic to find the position after that.

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JohnHardman said:

    @OsayedZaheda said:
    I just want it to automatically add the layout to a position where there is no other layout.

    Grid isn't going to do that automatically. If you've got a 5x5 grid, how is it going to know (a) that you want it to use "empty" cells (it's a common thing to add more than one View to the same cell), and (b) whether you want it to fill across or down first? It has no way of knowing either.

    It's easy for you to keep track of the next row/column position to populate and to apply the logic to find the position after that.

    And how to do that? In Xamarin.Android I could do it all easily using an Adapter but that does not work in Xamarin.Forms.

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda - You've got a Grid that is at least 1x1 in size. Let's say it's 2x4. You know that initially none of the cells are populated. The first cell to populate is (0,0). The next cell to populate would be (1,0), then it would be (2,0) but because the limit on that dimension is hit the next will actually be (0,1), then (1,1), then (0,2), then keep repeating until (1,3) is populated. At that point, you've run out of empty cells. It's simply a case of iterating x and y indices and checking against the width and height of the grid.

    If you only do that in one place, there's nothing more to do. If you do this in multiple places, you'll want to put the logic in a separate class to make it reusable. Presumably that's what you did for Xamarin.Android?

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JohnHardman said:
    @OsayedZaheda - You've got a Grid that is at least 1x1 in size. Let's say it's 2x4. You know that initially none of the cells are populated. The first cell to populate is (0,0). The next cell to populate would be (1,0), then it would be (2,0) but because the limit on that dimension is hit the next will actually be (0,1), then (1,1), then (0,2), then keep repeating until (1,3) is populated. At that point, you've run out of empty cells. It's simply a case of iterating x and y indices and checking against the width and height of the grid.

    If you only do that in one place, there's nothing more to do. If you do this in multiple places, you'll want to put the logic in a separate class to make it reusable. Presumably that's what you did for Xamarin.Android?

    I really don't get it. And in Xamarin.Android I only used an Adapter to check all items in a List and add them in the grid using the adapter. And then I set the gridView Adapter to that Adapter.

  • JohnHardmanJohnHardman GBUniversity mod
    edited March 2018

    @OsayedZaheda - Have you checked the source of that adapter? It's almost certainly doing nothing different to what is explained above. TBH, it's not even a Xamarin.Forms question, it's just an algorithm for navigating through a grid.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    @OsayedZaheda ,

    Okay, can you try something like this, I haven't checked the code yet, bit short of time. However I think you can get started with following approach.

    Grid DynamicGrid = new Grid();

    DynamicGrid.RowDefinitions = new RowDefinitionCollection();
    DynamicGrid.ColumnDefinitions = new ColumnDefinitionCollection();

    for (int listitem = 0; listitem < list.length; listitem++)
    {

    DynamicGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    DynamicGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
    DynamicGrid.Children.Add(new Label
    {
    Text = "I am the new label with: " + listitem, Font = Font.BoldSystemFontOfSize(20), HorizontalOptions = LayoutOptions.Center }, 0, 10, 0, 10);
    }

    //Replace this.content with the container.content like whatever layout
    this.Content = DynamicGrid;

    Hope it helps.

    N Baua

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @N_Baua said:
    @OsayedZaheda ,

    Okay, can you try something like this, I haven't checked the code yet, bit short of time. However I think you can get started with following approach.

    Grid DynamicGrid = new Grid();

    DynamicGrid.RowDefinitions = new RowDefinitionCollection();
    DynamicGrid.ColumnDefinitions = new ColumnDefinitionCollection();

    for (int listitem = 0; listitem < list.length; listitem++)
    {

    DynamicGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1,  GridUnitType.Star) });  
    DynamicGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1,    GridUnitType.Star) });
    DynamicGrid.Children.Add(new Label
        {
            Text = "I am the new label with: " + listitem, Font = Font.BoldSystemFontOfSize(20), HorizontalOptions = LayoutOptions.Center }, 0, 10, 0, 10);
    

    }

    //Replace this.content with the container.content like whatever layout
    this.Content = DynamicGrid;

    Hope it helps.

    N Baua

    That does not work as well. It sets them all in the same position.

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JohnHardman said:
    @OsayedZaheda - Have you checked the source of that adapter? It's almost certainly doing nothing different to what is explained above. TBH, it's not even a Xamarin.Forms question, it's just an algorithm for navigating through a grid.

    I got an XAML Content View named "Layout". And I use this in the grid:

    grid.BackgroundColor = Color.White;
    grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
    for (int i = 0; i < listOfProducts.Count; i++)
    {
    Product p = listOfProducts[i];
    Layout layout = newLayout();
    layout.imageview.Source= byteArrayToImage(p.imageBytes) ;
    layout.lbl.Text = p.productName + " (" + p.productPrice + ")";
    grid.Children.Add(layout, i, 0);

            }
    

    It does add a spacing between them but the spacing is too big, any suggestions?

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda - See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

    Also, make sure to add the number of RowDefinition and ColumnDefinition instances that you require.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    That does not work as well. It sets them all in the same position.
    I really don't get it.

    Let's try this. When you add something to a Grid it has to go someplace. By default Row = 0 and Column = 0.
    That means if you don't specify Row and Column values... all your new children are at default position. They are all at 0, 0. Meaning they are all at the same place. And that's what you see. Does that help you "get" what is happening now?

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @ClintStLaurent said:

    That does not work as well. It sets them all in the same position.
    I really don't get it.

    Let's try this. When you add something to a Grid it has to go someplace. By default Row = 0 and Column = 0.
    That means if you don't specify Row and Column values... all your new children are at default position. They are all at 0, 0. Meaning they are all at the same place. And that's what you see. Does that help you "get" what is happening now?

    I get it, but how would I make it like, first child added is 0 Column, second is 1 Column, third is 0 column row 1 etc

    BECAUSE

    I have a list of items and I want to add them all.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    edited April 2018
    Well now we're into standard coding - you just specify the row and column as you add each item. How you structure that is up to you and not really much to do with xamarin.
  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JamesLavery said:
    Well now we're into standard coding - you just specify the row and column as you add each item. How you structure that is up to you and not really much to do with xamarin.

    But I can't specify it for each item, There are lots of items that I don't even know how many

  • SzbestaSzbesta Member ✭✭✭
    edited April 2018

    @OsayedZaheda
    To quote @JamesLavery > Well now we're into standard coding

    It's not that hard. If you want to add your items to a Grid and you also have a specific pattern in mind like you said earlier: > first child added is 0 Column, second is 1 Column, third is 0 column row 1 etc
    Then just write the for Loops with some conditions in it and you are golden. If you know how to code then this should be basic!

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    first child added is 0 Column, second is 1 Column, third is 0 column row 1 etc

    Sounds like an alternating pattern. 0, 1, 0, 1, 0, 1
    Should just be a loop

  • Gigex42Gigex42 USMember ✭✭✭✭

    Okay lets try another attempt. What exactly do you want to accomplish with that? Do you want something like this?

    Else it would be like @ClintStLaurent said. If you have a count of 25 items you will have to make a grid like 5x5?
    So just do two nested for loops and set the grid.row and grid.column.

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @Gigex42 said:
    Okay lets try another attempt. What exactly do you want to accomplish with that? Do you want something like this?

    Else it would be like @ClintStLaurent said. If you have a count of 25 items you will have to make a grid like 5x5?
    So just do two nested for loops and set the grid.row and grid.column.

    Well, Is it possible to get the last child's column and row?

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda said:
    Well, Is it possible to get the last child's column and row?

    Save the column and row in a couple of integer variables when you add a child.

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JohnHardman said:

    @OsayedZaheda said:
    Well, Is it possible to get the last child's column and row?

    Save the column and row in a couple of integer variables when you add a child.

    I could do that But It won't be really cross platform. I wanted it to do it automatically so It can depend on the platform. But I if I do it manually It will be different for each platform,for example If i make it increase row every 4 columns or something it'll be different for bigger platforms.

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda said:
    I could do that But It won't be really cross platform. I wanted it to do it automatically so It can depend on the platform. But I if I do it manually It will be different for each platform,for example If i make it increase row every 4 columns or something it'll be different for bigger platforms.

    You know the number of columns you have specified for the grid. You just use that number as the limiting column number after which you increment the row number. It is cross-platform (Android, iOS, UWP etc).

  • OsayedZahedaOsayedZaheda USMember ✭✭

    @JohnHardman said:

    @OsayedZaheda said:
    I could do that But It won't be really cross platform. I wanted it to do it automatically so It can depend on the platform. But I if I do it manually It will be different for each platform,for example If i make it increase row every 4 columns or something it'll be different for bigger platforms.

    You know the number of columns you have specified for the grid. You just use that number as the limiting column number after which you increment the row number. It is cross-platform (Android, iOS, UWP etc).

    Can you give me an example please?

  • OsayedZahedaOsayedZaheda USMember ✭✭

    Bump

  • JohnHardmanJohnHardman GBUniversity mod

    @OsayedZaheda said:
    Can you give me an example please?

    As @JamesLavery said above, this is just standard coding. There's more than enough information above for you to be able to implement this.

Sign In or Register to comment.