Fill all the screen with StackLayout

16,474

In the most simple form I have managed to achieve what you require.

I set the content of the screen to the main stack layout.

        var mainStackLayout = new StackLayout { BackgroundColor = Color.Blue};
        var buttonsStackLayout = new StackLayout { BackgroundColor = Color.White, Orientation = StackOrientation.Horizontal , Spacing = 0 };

        Image about = new Image { HeightRequest = 50, Source = ImageSource.FromFile("about.jpg") };
        Image twitter = new Image { HeightRequest = 50, Source = ImageSource.FromFile("twitter.jpg") };
        Image refresh = new Image { HeightRequest = 50, Source = ImageSource.FromFile("refresh.jpg") };

        buttonsStackLayout.Children.Add(about);
        buttonsStackLayout.Children.Add(twitter);
        buttonsStackLayout.Children.Add(refresh);

        mainStackLayout.Children.Add(buttonsStackLayout);
        this.Content = mainStackLayout; 

enter image description here

Share:
16,474
Mario Galván
Author by

Mario Galván

I am Mexican Mobile developer and Xamarin enthusiast! follow me on twitter: @MayitoGalvan

Updated on July 25, 2022

Comments

  • Mario Galván
    Mario Galván almost 2 years

    I have a StackLayout coded like this:

    StackLayout mainStackLayOut = new StackLayout{
        BackgroundColor = Color.Blue,
        //VerticalOptions = LayoutOptions.FillAndExpand,
        //WidthRequest = width,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        Orientation = StackOrientation.Vertical
    };
    

    But I want the StackLayout to fill all the screen width and height, also I have tree buttons added like this:

    StackLayout buttonsStackLayOut = new StackLayout
    {
        BackgroundColor = Color.White,
        //VerticalOptions = LayoutOptions.Fill,
        HorizontalOptions = LayoutOptions.Fill,
        Orientation = StackOrientation.Horizontal,
        Spacing = 0
    };
    mainStackLayOut.Children.Add(buttonsStackLayOut);
    
    
    Image doctorImage = new Image
    {
        WidthRequest = width / 3,
        HeightRequest = 50,
        BackgroundColor = Color.Gray,
        Source = ImageSource.FromFile ("about.png")
    };
    buttonsStackLayOut.Children.Add(doctorImage);
    

    enter image description here

    How can I fill all the screensize?