Forum Xamarin.Forms

How to make sapce in TabbedPage on top?

Hi, I'm trying to make space in TabbedPage on top. I created CustomTabbedPageRendererCS. But i don't know how do i coding.

public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            InvertLayoutThroughScale();
            base.OnLayout(changed, l, t, r, b);
        }

        private void InvertLayoutThroughScale()
        {

        }
    }

I want make TabbedPage like this picture. What should i use code? Thanks.

Best Answer

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    If you add the searchbar like above code, you can hide the navigationbar by following code easeliy.

    NavigationPage.SetHasNavigationBar(this, false);  
    

    And i don't want search bar's horizontal scrolling.

    If you want to achieve that, you should add the SearchBar in the navigation page in tabbedpage,.

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
    
        <NavigationPage.TitleView>
            <SearchBar HeightRequest="44" BackgroundColor="Red" WidthRequest="300" />
        </NavigationPage.TitleView>
    
        <NavigationPage Title="Today" IconImageSource="today.png">
            <x:Arguments>
                <local:TodayPage />
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="This Week" IconImageSource="schedule.png">
            <x:Arguments>
                <local:SchedulePage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage  Title="settings" IconImageSource="settings.png" >
            <x:Arguments>
                <local:SettingsPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage>
    

    Here is runing gif.


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I tried with custom renderer, I found it is a hard way to achieve it.

    You can use an easy way to achieve it. Use NavigationPage Tag in the TabbedPage

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
    
        <NavigationPage Title="Today" IconImageSource="today.png">
            <x:Arguments>
                <local:TodayPage />
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="This Week" IconImageSource="schedule.png">
            <x:Arguments>
                <local:SchedulePage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage  Title="settings" IconImageSource="settings.png" >
            <x:Arguments>
                <local:SettingsPage />
            </x:Arguments>
        </NavigationPage>
    
    
    </TabbedPage>
    

    if you want to Top area is empty, do not set any title in the contentpages.

    Here is running GIF.

  • doqltl179doqltl179 Member ✭✭

    @LeonLu I'm sorry to late write comment. I read your comment and thank you. But i don't want just blank. I want input searchBar or other tools or custom layout on the Top.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    If you want to add the search function in the navigation bar, you can Google:Adding a Search Bar to Xamarin.Forms.NavigationPage, here is an blog about it

  • doqltl179doqltl179 Member ✭✭
    edited November 2020

    @LeonLu I saw blog. But i can't understand. That's so hard me. And i want use TabbedPage not ContentPage.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    If you used above TabbedPage layout, you will have white place, this place is contentpage's navigation bar, I mean that you can add search bar in it.

    Xamarin Community forum will be migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forum’s new home on Microsoft Q&A!
    For more information, please refer to the sticky post.

  • doqltl179doqltl179 Member ✭✭

    @LeonLu I was tried input search bar in navigation bar and was succeeded. So i want try other way.

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited November 2020

    I want try other way.

    Can you share the simple that you want to achieved?

    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • doqltl179doqltl179 Member ✭✭
    edited November 2020

    @LeonLu Like this.

    I want input something on the Top, searchBar or entry or button or other things.. And show & hide Top like Google Play Store's searchBar if it is posibble.

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited November 2020

    Do you want to achieve the result like this GIF?

    If so, you can add following code in your ContentPage.xaml.

      <NavigationPage.TitleView>
            <SearchBar HeightRequest="44" BackgroundColor="Red" WidthRequest="300" />
        </NavigationPage.TitleView>
    

    Here is my Today Page.

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TabbedPageWithNavigationPage.TodayPage"
                 IconImageSource="today.png"
                 >
    
        <NavigationPage.TitleView>
            <SearchBar HeightRequest="44" BackgroundColor="Red" WidthRequest="300" />
        </NavigationPage.TitleView>
        <ContentPage.Content>
            <StackLayout>
                <Label Text="Today's appointments go here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • doqltl179doqltl179 Member ✭✭
    edited December 2020

    @LeonLu Maybe, i was lack of explanation. I'm so sorry.

    I want like this pictures. When vertical scroll move, hide search bar. And i don't want search bar's horizontal scrolling.
    This question is why i want create custom TabbedPage.

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    If you add the searchbar like above code, you can hide the navigationbar by following code easeliy.

    NavigationPage.SetHasNavigationBar(this, false);  
    

    And i don't want search bar's horizontal scrolling.

    If you want to achieve that, you should add the SearchBar in the navigation page in tabbedpage,.

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
    
        <NavigationPage.TitleView>
            <SearchBar HeightRequest="44" BackgroundColor="Red" WidthRequest="300" />
        </NavigationPage.TitleView>
    
        <NavigationPage Title="Today" IconImageSource="today.png">
            <x:Arguments>
                <local:TodayPage />
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="This Week" IconImageSource="schedule.png">
            <x:Arguments>
                <local:SchedulePage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage  Title="settings" IconImageSource="settings.png" >
            <x:Arguments>
                <local:SettingsPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage>
    

    Here is runing gif.


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • doqltl179doqltl179 Member ✭✭
    edited December 2020

    @LeonLu I understand, Thank you! Now i'm going to find solution of TabbedPage's vertical scrolling to hide search bar!

Sign In or Register to comment.