Prefer large Title issue using Xamarin Forms

Sahadev_GuptaSahadev_Gupta INMember ✭✭✭
edited February 16 in Xamarin.Forms

Good morning everyone,
I'm setting prefer large title in navigation page in my app. But when i used this in tabbed page it's not working properly.
When i scroll up in tabbedpage, the bottom tab position changes and extra white space occurs.
I've attached the sample with it kindly please look into it.
Thanks!!

Best Answer

  • LandLuLandLu Xamurai
    Accepted Answer

    @Sahadev_Gupta Try to change the App's MainPage from TestNavigationPage to MainTabbedPage. Then use Navigation pages to wrap each of the Tabbed page's children content page:

    <TabbedPage.Children>
    
        <NavigationPage Title="Page1">
            <x:Arguments>
                <views:Page1/>
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Page2">
            <x:Arguments>
                <views:Page2/>
            </x:Arguments>
        </NavigationPage>
    
        <!--<views:Page1/>
        <views:Page2/>-->
    </TabbedPage.Children>
    

    At last, create a custom renderer for Page 1 to enable the large title:

    [assembly: ExportRenderer(typeof(Page1), typeof(PageOneRenderer))]
    namespace PreferLargeTitleForms.iOS
    {
        public class PageOneRenderer : PageRenderer
        {
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                NavigationController.NavigationBar.PrefersLargeTitles = true;
                NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Automatic;
            }
        }
    }
    

    You can refer to my attachment for the whole code.

Answers

  • YorkGoYorkGo CNMember, Xamarin Team Xamurai

    I test your sample and here is the result. Did your extra white space issue is as illustrated in the following diagram:

    Here is a workaround, use TextCell instead of ViewCell;

    <ListView ItemsSource="{Binding Fruits}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding .}">
                        <!--<Label Text="{Binding .}" Margin="0" />-->
                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    Effect:

    Correct me if I'm misunderstand.

  • Sahadev_GuptaSahadev_Gupta INMember ✭✭✭
    edited February 18

    @YorkGo thanks for your reply. Actually the problem is with the tab bar in ios. When i scroll up the entire tab page is pushed up.
    I've attached the pic you can see the error.!

    Normal Behaviour:

    Here is the Error Which i'm getting:

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    @Sahadev_Gupta Try to change the App's MainPage from TestNavigationPage to MainTabbedPage. Then use Navigation pages to wrap each of the Tabbed page's children content page:

    <TabbedPage.Children>
    
        <NavigationPage Title="Page1">
            <x:Arguments>
                <views:Page1/>
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Page2">
            <x:Arguments>
                <views:Page2/>
            </x:Arguments>
        </NavigationPage>
    
        <!--<views:Page1/>
        <views:Page2/>-->
    </TabbedPage.Children>
    

    At last, create a custom renderer for Page 1 to enable the large title:

    [assembly: ExportRenderer(typeof(Page1), typeof(PageOneRenderer))]
    namespace PreferLargeTitleForms.iOS
    {
        public class PageOneRenderer : PageRenderer
        {
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                NavigationController.NavigationBar.PrefersLargeTitles = true;
                NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Automatic;
            }
        }
    }
    

    You can refer to my attachment for the whole code.

  • Sahadev_GuptaSahadev_Gupta INMember ✭✭✭

    @LandLu thanks for your reply. I would definitely check your sample n notify you the result. :)

  • Sahadev_GuptaSahadev_Gupta INMember ✭✭✭

    @LandLu Thanks for your sample, it works fine. Thank you so much :) :)

    But i think this is a weird behaviour

Sign In or Register to comment.