Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

[Shell] FlyOutHeader height is not adjusting dynamically for iOS

KiranKumar.3352KiranKumar.3352 USMember ✭✭
edited October 2020 in Xamarin.Forms

Hi All,

I'm working on a Xamarin Forms Shell app and having an issue with FlyoutHeader height on iOS. I've defined my FlyoutHeader without HeightRequest as a content view as below

<ContentView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.Views.MenuHeader"
    xmlns:converter="clr-namespace:MyApp.Converters"
    BackgroundColor="White" VerticalOptions="Start">
    <ContentView.Resources>
        <Style x:Key="Regular" TargetType="Label">
        </Style>
        <Style x:Key="MyStyle" BasedOn="{StaticResource Regular}" TargetType="Label">
            <Setter Property="TextColor" Value="#444444"/>
        </Style>
        <converter:StringToBoolConverter x:Key="stringToBoolConverter"/>
    </ContentView.Resources>
    <ContentView.Content>
        <Grid Padding="10,15" VerticalOptions="Start">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="20"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Label Text="{Binding FullName}" Grid.Row="0" FontSize="Subtitle" FontAttributes="Bold" TextColor="#999999"/>
                <Grid Padding="0,10,0,0" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label Text="Field 1 :" HorizontalOptions="StartAndExpand" VerticalOptions="Start" FontSize="Small" Style="{StaticResource Regular}" TextColor="Black"/>
                    <Label Grid.Column="1" Text="{Binding Field1}" VerticalOptions="Start" MaxLines="2" LineBreakMode="TailTruncation" FontSize="Small" Style="{StaticResource MyStyle}"/>
                </Grid>
                <Grid Padding="0,0,0,5" Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label Text="Field 2 :" FontSize="Small" Style="{StaticResource Regular}" VerticalOptions="Start"  TextColor="Black"/>
                    <Label Grid.Column="1" Text="{Binding Field2}" VerticalOptions="Start" HorizontalOptions="FillAndExpand" MaxLines="2" LineBreakMode="TailTruncation" FontSize="Small" Style="{StaticResource MyStyle}"/>
                </Grid>
            </Grid>
            <Label Grid.ColumnSpan="3" Grid.Row="1" BackgroundColor="Gray"/>
            <Image Grid.Column="2" VerticalOptions="Start" HorizontalOptions="Center" Source="close.png" >
            </Image>
        </Grid>
    </ContentView.Content>
</ContentView>

The Menu is showing as below
iOS:

Android:

I found a related bug on GitHub, #3875 [Shell] Flyout menu items should start below my header, no matter how tall. This is resolved.

If I'm not providing HeightRequest for the content view the menu header and Menu items are not adjusting automatically on iOS. I cannot provide a static height request for the header as the height of child items is dynamic that depends on the length of the strings.

One strange thing on iOS is when an extra space is added in xaml and saved (Ctrl +S), Hot reload kicks in Menu header and items are adjusted properly as expected.

As shown in the screenshots, this is working fine on Android and the issue only exists for iOS when HeightRequest is not provided.
I'm using Xamarin Forms 4.8.0.1364

Please let me know if there is a workaround/solution for this on iOS.

Thanks!!

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    I reproduced this with the code you posted.
    Generally, iOS should have the same effect as Android.
    You could raise an issue here:
    https://github.com/xamarin/Xamarin.Forms/issues

  • KiranKumar.3352KiranKumar.3352 USMember ✭✭

    @LandLu said:
    I reproduced this with the code you posted.
    Generally, iOS should have the same effect as Android.
    You could raise an issue here:

    I've created a bug for this on github Xamarin.Forms as suggested
    issues/12665

Sign In or Register to comment.