CODEWITHSUNDEEP
c#xamarinxamarin.forms
Dan Beaulieu
Dan Beaulieu

Reputation: 19954

How to set a Stack Layout to half of the screens height?

I'm trying to ensure that my images that are loading dynamically will take up a consistent amount of vertical space in my application. Obviously I want to do this without defining a static height so that my view scales for smaller / larger devices.

I'm assuming theres a way to tell a stacked layout you want it to share space with another stacked layout.

So heres what I tried:

    StackLayout _container, _top, _bottom;

    // left out irrelevant code

    _imageView = new CachedImage
    {
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.Start,
        DownsampleToViewSize = true,
        CacheDuration = TimeSpan.FromDays(5),
        TransparencyEnabled = false 
    };

    _top = new StackLayout { 
        BackgroundColor = Color.Red,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.Start, 
        Children = { 
            _imageView
        }
    };
   _bottom = new StackLayout {
       BackgroundColor = Color.White,
       HorizontalOptions = LayoutOptions.FillAndExpand,
       VerticalOptions = LayoutOptions.End, 
       Children = {
           _oneThing,
           _twoThing
       }
   };

   _container = new StackLayout { 
   Padding = new Thickness (10),
   Spacing = 10,
   BackgroundColor = Color.Aqua,
   HorizontalOptions = LayoutOptions.FillAndExpand,
   VerticalOptions = LayoutOptions.FillAndExpand,
        Children = { 
            _top,
            _bottom 
        }
    };

    this.Content = _container;

Unfortunately this didn't work...

My Question

How can I ensure that my stack view (or just my image) only takes up 50% of the view?

Upvotes: 0

Views: 2363

Answers (1)

jimmgarr
jimmgarr

Reputation: 1483

Like you mentioned, you could also use a Grid with some RowDefinitions:

Grid mainLayout = new Grid
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    RowDefinitions =
    {
        new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
        new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
    }
};

var _imageView = new Image
{
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand
};

Grid.SetRow(_imageView, 0); //_imageView will be added to the first row

mainLayout.Children.Add(_imageView);

Upvotes: 1

Related Questions