Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 75885

Arranging StackLayouts under each other forming a grid 3x2

$
0
0

I'm still new to Xamarin and I want some help.
In my project, there is an image as a logo of the company which is the first thing the user sees and it is centered.
Below it directly I want to add 6 images in 2 rows with 3 each.

This is my code so far, the problem is that the 6 images are appearing directly next to each other until they are out of bounds of the screen.
I'm not knowing the exact place to tell the code to "enter a new line" and view these buttons in a new one row.

Thanks in advance!!

``
Content = new StackLayout
{

            Padding = new Thickness(10, 10, 10, 0),
            Spacing = 5,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Children = {
                    iBanner, 

//this is the logo company it works fine! the problem is in the below part when I start stacking the images.

                new StackLayout{

        Spacing = 2,
        Orientation = StackOrientation.Horizontal,

        Children = 
        {

           new Image{
        HeightRequest=115,
        WidthRequest=115,
        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 

        },
        new Image{
            HeightRequest=115,
        WidthRequest=115,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 

        },
        new Image{
            HeightRequest=115,
        WidthRequest=115,
        HorizontalOptions = LayoutOptions.End,
        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 
        },



        new StackLayout{

        Spacing = 2,
        Orientation = StackOrientation.Horizontal,

        Children = 
        {

           new Image{
        HeightRequest=115,
        WidthRequest=115,

        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 

        },
        new Image{
            HeightRequest=115,
        WidthRequest=115,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 

        },
        new Image{
            HeightRequest=115,
        WidthRequest=115,

        Source = Device.OnPlatform(
                                    iOS: ImageSource.FromFile("tracktrace.png"),
                                    Android: ImageSource.FromFile("tracktrace.png"),
                                    WinPhone: ImageSource.FromFile("tracktrace.png")), 

        }

                      }
        }

                }//StackLayout 

            }
            }
            //Children
        };//Content

Viewing all articles
Browse latest Browse all 75885

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>