How to make sapce in TabbedPage on top?

doqltl179 · November 2020

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.

LeonLu · December 2020

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.

LeonLu · November 2020

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.

doqltl179 · November 2020

@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.

LeonLu · November 2020

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

doqltl179 · November 2020

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

LeonLu · November 2020

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.

doqltl179 · November 2020

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

LeonLu · 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.

doqltl179 · 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.

LeonLu · 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.

doqltl179 · 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.

LeonLu · December 2020

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.

doqltl179 · December 2020

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

Xamarin

Quick Links

How to make sapce in TabbedPage on top?

Best Answer

Answers