CODEWITHSUNDEEP
xamarinxamarin.forms
Rippo
Rippo

Reputation: 22424

Make a 2 cell horizontal stack layout 50% of device screen width

I want to make the image 50% the screen size on a Xamarin Forms project. I can't seem to find a definitive answer how I go about this. I came across an ancient blog post about Xamarin.Labs but not sure if this is still relevant.

Option 1 is to try and make each child in the stacklayout 50%

var horizontalLayout = new StackLayout ();
horizontalLayout.Orientation = StackOrientation.Horizontal;

//What do I add here?    

//add views to the view hierarchy
horizontalLayout.Children.Add (Photo ());
horizontalLayout.Children.Add (textLayout);

Option 2 make the image width 50%

private Image Photo ()
{
    var image = new Image ();
    image.WidthRequest = ??;
    image.SetBinding (Image.SourceProperty, "Member.MemberPhoto");
    return image;
}

enter image description here

textLayout is also a stack layout which is to the right of the image

StackLayout textLayout = new StackLayout ();

textLayout.Children.Add (CompanyName ());
textLayout.Children.Add (SubCategory ());
textLayout.Children.Add (Address ());

Upvotes: 4

Views: 5655

Answers (1)

Pete
Pete

Reputation: 4746

Use a Grid as your outer container and specify a ColumnDefinition using a GridLength of 1 and GridUnitType of Star like so:-

Grid objGrid = new Grid()
{
    VerticalOptions = LayoutOptions.StartAndExpand
};
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});

Shown below is a full example with a Button that when clicked shows the image size being explicitly set to various values.

No matter if the image size is small, or larger than the 50% width area, it will keep the layout of the Grid keeping at the 50% width.

Example:-

StackLayout objStackLayout = new StackLayout();

Grid objGrid = new Grid()
{
    VerticalOptions = LayoutOptions.StartAndExpand
};
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objStackLayout.Children.Add(objGrid);


Image objImage = new Image()
{
    Source = ImageSource.FromFile(" {put some image here} "),
    VerticalOptions = LayoutOptions.Start
};
objGrid.Children.Add(objImage, 0,0);

Label objLabel = new Label();
objLabel.Text = "Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....   Some long text goes here.... blah blah blah..... ";
objGrid.Children.Add(objLabel, 1,0);


Button objButton = new Button();
objButton.Text = "Change Image Width"            ;
objButton.Clicked+=((o2,e2)=>
{
    if (objImage.WidthRequest == -1)
    {
        objImage.WidthRequest = 50;
    }
    else if (objImage.WidthRequest == 50)
    {
        objImage.WidthRequest = 150;
    }
    else if (objImage.WidthRequest == 150)
    {
        objImage.WidthRequest = 350;
    }
    else if (objImage.WidthRequest == 350)
    {
        objImage.WidthRequest = 50;
    }
});
objStackLayout.Children.Add(objButton);

Upvotes: 4

Related Questions