Dynamic HeightRequest not working correctly in xamarin forms

Question

In my XAML I have this StackLayout:

<StackLayout x:Name="FooterWrapper"
             Spacing="0"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand"
             BackgroundColor="Transparent">
    <BoxView BackgroundColor="Transparent" 
             HorizontalOptions="Center" 
             VerticalOptions="CenterAndExpand" 
             x:Name="can_applyComplete_topspace" />
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".07*" />
            <ColumnDefinition Width=".86*" />
            <ColumnDefinition Width=".07*" />
        </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
            <RowDefinition Height=".40*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <controls:AndroidButton x:Name="can_applycomplete_gotitbtn" 
                                Grid.Row="0" 
                                Text="{Binding SkipButtonText}" 
                                StyleId="uit_can_applycomplete_gotitbtn" 
                                FontFamily="Avenir Next" 
                                BackgroundColor="White" 
                                Grid.Column="1" 
                                HorizontalOptions="FillAndExpand" 
                                VerticalOptions="Fill" 
                                TextColor="Black" 
                                Clicked="Handle_SkipClicked" />
        <controls:CustomLabel Grid.Row="1" 
                              Grid.Column="1" 
                              Text="{i18n:TranslateExtension Text= res_cand_candjobcompliance_profilereachedlbl_list_footer}" 
                              VerticalOptions="Center" 
                              IsVisible="{Binding IsFooterVisible}" 
                              x:Name="cand_candjobcompliance_profilereachedlbl_list_footer" 
                              StyleId="uit_cand_candjobcompliance_profilereachedlbl_list_footer" 
                              TextColor="White" 
                              FontSize="13" />
    </Grid>
</StackLayout>

I need to dynamically control the Height of the StackLayout

In OnAppearing i am setting particular height for the stacklayout

FooterWrapper.HeightRequest = 196

In iOS its working, My new Height is set to the view but in android my height is ignored.

I've noticed that on Android, the HeightRequest is applied when the layout is being mensurated. Maybe the change is happening after this step. Have you tried to call FooterWrapper.ForceLayout() after change its HeightRequest? — Diego Rafael Souza
@DiegoRafaelSouza FooterWrapper.ForceLayout() is not working.. — George Thomas
@JoeLv-MSFT Why and where should i use a custom render in my case? — George Thomas

Brandon Minnick Brandon Minnick · Accepted Answer · 2018-03-30T17:41:41

We can use HeightRequest, but keep in mind that it is just a request. If Xamarin.Forms doesn't have enough pixels/points to fulfill the request, it will make a best effort.

After changing HeightRequest, we will need to tell Xamarin.Forms to redraw the StackLayout and the ContentPage by calling ForceLayout();

public partial class MyContentPage : ContentPage
{
    ...

    void ResizeFooterWrapper(double heightRequest)
    {
        // Ensure resizing is marshaled to the UI Thread
        Device.BeginInvokeOnMainThread(() => 
        {
            FooterWrapper.HeightRequest = heightRequest;
            FooterWrapper.ForceLayout();
            this.ForceLayout();
        });
    }
}

Sample App

Link to Sample App: https://github.com/brminnick/DynamicStackLayoutSize/

using System;

using Xamarin.Forms;

namespace DynamicStackLayoutSize
{
    public class App : Application
    {
        public App() => MainPage = new MyPage();
    }

    class MyPage : ContentPage
    {
        readonly StackLayout _adjustableStackLayout;

        public MyPage()
        {
            _adjustableStackLayout = new StackLayout
            {
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                BackgroundColor = Color.Green,
                Children = {
                    new Label{ Text = "Hello" },
                    new Label{ Text = "World" }
                }
            };

            var resizeButton = new Button { Text = "Resize" };
            resizeButton.Clicked += (s, e) =>
            {
                if (_adjustableStackLayout.HeightRequest == 196)
                    ResizeStackLayout(-1);
                else
                    ResizeStackLayout(196);
            };

            Content = new StackLayout
            {
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                BackgroundColor = Color.Red,
                Children ={
                    _adjustableStackLayout,
                    resizeButton
                }
            };
        }

        void ResizeStackLayout(double heightRequest)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                _adjustableStackLayout.HeightRequest = heightRequest;
                _adjustableStackLayout.ForceLayout();
                this.ForceLayout();
            });
        }
    }
}

Dynamic HeightRequest not working correctly in xamarin forms

1 Answers

Sample App

Sample App Gif