Forum Xamarin.Forms

How to size things in a StackLayout?

binkman71binkman71 USMember ✭✭

I wrote a simple stack layout with an Image control:

    public partial class LoginPage : ContentPage
        public LoginPage ()
            InitializeComponent ();

            var img = new Image { Source = "imagenamge.png", Aspect = Aspect.AspectFit, Scale = 0.75 };
            var eUser = new Entry { Placeholder = "User Name" };
            var ePass = new Entry { Placeholder = "Password", IsPassword = true };

            var lSave = new Label { Text = "Save User Name and Password", YAlign = TextAlignment.Center };
            var sSave = new Switch();
            var switchLayout = new StackLayout { Orientation = StackOrientation.Horizontal };
            switchLayout.Children.Add( lSave );
            switchLayout.Children.Add( sSave );

            var bLogin = new Button { Text = "Log In" };
            var bSet = new Button { Text = "Settings" };

            var layout = new StackLayout 
                Children = 

                Padding = 10

            }; // end new StackLayout

            Content = layout;


This works fine...if I use the 4" iPhone simulator. if I use the 3.5" iPhone simulator, everything below the image gets overlapped. The image is visible, though it does have a rather large border around it (this happens on both simulators). Before I put the Scale property in, the image just filled the available space. Anyway, on the 3.5" screen the two Entry fields are fine, but the label gets vertically chopped (you see the middle section of all the text, with the tops and bottoms of letters cut off), the Switch is visible because it is off to the side, but is hard to use because the Log In button is right smack up against the bottom of it. The Settings button appears to be spaced below the Log In button at the same distance as in the 4" view, thus taking up way more space than it needs to as well.

Now, I bet I could fix this if I could somehow tell the image field how big it should be, or perhaps a percentage of the rest of the items in the stack view. Is there any way to do this? Is there any way to size any field in a StackLayout?



  • ShawnCastrianni.5092ShawnCastrianni.5092 US ✭✭✭
    edited May 2014

    If I remember correctly, you just set the WidthRequest and HeightRequest properties to pixel values and they will be honored within a StackLayout. However, I try to avoid using hardcoded pixel values at all costs which is why I lean towards RelativeLayout more, but RelativeLayout is missing a lot of functionality at this time.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai
    edited May 2014

    Some general sizing advice in StackLayout (and actually all layouts)

    Width/HeightRequest - Override the desired size of a child

    MinimumWidth/HeightRequest - Override the smallest size a child can be shrunk to when doing overflow management

    Vertical/HorizontalOptions - Set attributes for how to handle "extra" space in accordance with the box model. Expand flag sets things to consume extra space, Start/Center/End explain how to layout within the space given.

  • binkman71binkman71 USMember ✭✭
    edited June 2014

    Thanks guys!

    I got it working by:

    1) Making the Image object a class member, rather than local to the constructor.
    2) Initialized it as before in the constructor.
    3) Added the following override to my class:

    bool bFirstTime = false; protected override void OnSizeAllocated( double width, double height ) { if( !bFirstTime ) { bFirstTime = true; img.HeightRequest = height / 3; } base.OnSizeAllocated( width, height ); }


  • Mike.9461Mike.9461 USMember

    Hi Kevin Murray

    I am trying to put the background image on the ContentPage, could not able figure out, could you help to resolve and send some sample code to my email : [email protected]

  • Hey Mike.9461,
    If you wanna do this in code, you can achieve it by writing following line of code in Constructor of your ContentPage:

    this.BackgroundImage = "Image.png"; //replace Image.png with your image name.

    or in XAML you can achieve the same as following:

    <?xml version="1.0" encoding="utf-8" ?>

  • waynewayne Member ✭✭
    edited May 2018

    I made that each item of Stackpayout has other wide as follows: smile:
    <StackLayout Orientation="Vertical"> <Label HorizontalOptions="{Binding HorizontalOptions}" Text="{Binding Time, StringFormat='{0:HH시 mm분}'}" TextColor="#3b5798" FontSize="10"/> **<Grid HorizontalOptions="{Binding HorizontalOptions}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Frame BackgroundColor="{Binding BackgroundColor}" CornerRadius="20"> <Label Text="{Binding Message}" TextColor="White"/> </Frame> </Grid>** </StackLayout>

Sign In or Register to comment.