Xamarin grid and StackLayout

Question

I would like to know how to put a stacklayout into a grid case of xamarin forms and repeat tha pattern.

I decleare in my xaml my grid and the stacklayout.

        <Grid x:Name="MyGrid" RowSpacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>


            <StackLayout x:Name="MyLayout">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>
    </Grid>

Then in my c# i wannt to create

            var test = new List<Product>
        {
            new Product() {Desc = "DESC", Brand= "HelloWorld", Price= "30", Uri = "UriToPicture" },
             new Product() {Desc = "DESC2", Brand= "HelloWorld2", Price= "30", Uri = "UriToPicture" }

        };


        Image PicProd = new Image { Aspect = Aspect.AspectFit };
        PicProd.Source = FileImageSource.FromUri(new Uri(test[0].Uri));
        Label Name= new Label { Text = test[0].Marque.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
        Label Desc = new Label { Text = test[0].Desc.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
        Label Price = new Label { Text = test[0].Prix.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };


        MyLayout.Children.Add(PicProd);
        MyLayout.Children.Add(Name);
        MyLayout.Children.Add(Desc);
        MyLayout.Children.Add(Price);

        MyGrid.Children.Add(MyLayout, 0, 0);
        MyGrid.Children.Add(MyLayout, 0, 1);

        Content = MyGrid;

So I have two stacklayout elements that i want to display on two colomns(side by side) but i don't succed to display them correctly

Answer 1

You can set the Grid.Row and Grid.Column on elements to position them inside the grid. These are 0-based indexers. So in your case you could set the StackLayout as follows:

<StackLayout x:Name="MyLayout" Grid.Row="0" Grid.Column="0">

And in the next you could put:

<StackLayout x:Name="MyLayout" Grid.Row="0" Grid.Column="1">

UPDATE:

You cannot add the same instance of a control to a page twice, which is why only one of your items is showing up. You should instantiate 2 actual instances of your StackLayout . Remove the StackLayout from your XAML and declare it in code-behind. Then create 2 separate label instances and add those to the appropriate StackLayout . It should look something like this:

var test = new List<Product>
{
    new Product() {Text1 = "DESC", Text2= "HelloWorld" },
    new Product() {Text1 = "DESC2", Text2= "HelloWorld2" }
};

MyGrid.BackgroundColor = Color.Yellow;

var Name = new Label { Text = test[0].Text1.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
var Desc = new Label { Text = test[0].Text2.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

var MyLayout = new StackLayout();
MyLayout.BackgroundColor = Color.Red;
MyLayout.Children.Add(Name);
MyLayout.Children.Add(Desc);
MyGrid.Children.Add(MyLayout, 0, 0);

var Name2 = new Label { Text = test[0].Text1.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
var Desc2 = new Label { Text = test[0].Text2.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

var MyLayout2 = new StackLayout();
MyLayout2.BackgroundColor = Color.Blue;
MyLayout2.Children.Add(Name2);
MyLayout2.Children.Add(Desc2);
MyGrid.Children.Add(MyLayout2, 1, 0);

Another thing to keep in mind, the parameters for the Children.Add call want the column as the first parameter and then the row. Additionally you could use this extension method to simplify the process of adding children with spans etc.

public static class GridExtension
{
    public static void AddChild(this Grid grid, View view, int row, int column, int rowspan = 1, int columnspan = 1)
    {
        if (row < 0) throw new ArgumentOutOfRangeException(nameof(row));
        if (column < 0) throw new ArgumentOutOfRangeException(nameof(column));
        if (rowspan <= 0) throw new ArgumentOutOfRangeException(nameof(rowspan));
        if (columnspan <= 0) throw new ArgumentOutOfRangeException(nameof(columnspan));
        if (view == null) throw new ArgumentNullException(nameof(view));

        Grid.SetRow((BindableObject)view, row);
        Grid.SetRowSpan((BindableObject)view, rowspan);
        Grid.SetColumn((BindableObject)view, column);
        Grid.SetColumnSpan((BindableObject)view, columnspan);

        grid.Children.Add(view);
    }
}

Answer 2

So I have two Stacklayout elements that i want to display on two colomns(side by side) but i don't succed to display them correctly

The problem is that you don't have two Stacklayout elements. Instead, you have one single instance that you pass two times to the grid using Add method.

If you want a second Stacklayout side by side, first create a new instance of a Stacklayout either in code or in XAML:

<StackLayout x:Name="MySecondLayout">
      <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
      </StackLayout.GestureRecognizers>
</StackLayout>

And pass it to your grid using Add method:

 //... Populate "MySecondLayout" as you did for "MyLayout" 

 // Add your two layouts to the grid
 MyGrid.Children.Add(MyLayout, 0, 0);
 MyGrid.Children.Add(MySecondLayout, 0, 1);

If you want to use the exact same Stacklayout twice side by side, you must create two different instances of a Stacklayout .