Can customize NavigationBar to my style?

Question

Can customize NavigationBar to my style?

YURNO 116

Now, MainPage is TabbedPage.
TabbedPage have children is NavigationPage.
I want to customize NavigationBar to same every page by create CustomRenderer.
Is it possible?
The condition is that not use Shell.
Thanks for the answer in advance.

P.S. If you don't understand my question, I'm sorry. Because my English is not strong.
P.S. I use only C# to do that, not use XAML.

Current

Target

Accepted answer

1 additional answer

Your answer

Answer 1

JessieZhang-MSFT 7,716 Microsoft External Staff

Hello,

Welcome to our Microsoft Q&A platform!

Is it possible if we just create it once and apply it to all pages?

You can create a parent contentpage(e.g. CustomContentPage) and let the other pages inherit it.

You can refer to the following code:

CustomContentPage.xaml.cs

[XamlCompilation(XamlCompilationOptions.Compile)]  
public partial class CustomContentPage : ContentPage  
{  
    public CustomContentPage()  
    {  
        InitializeComponent();  
    }  
}

CustomContentPage.xaml

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="TabbedPageWithNavigationPage.CustomContentPage">  
  
    <NavigationPage.TitleView>  
        <StackLayout  Orientation="Horizontal">  
            <Image Source="star.png"   
                   WidthRequest="40"   
                   HeightRequest="40"  
                   VerticalOptions="CenterAndExpand"  
               />  
  
            <Label   Text="test page"  HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>  
  
            <Image Source="gallary.png"   
                   WidthRequest="40" HeightRequest="40"  
                   VerticalOptions="CenterAndExpand"  
                />  
        </StackLayout>  
    </NavigationPage.TitleView>  
</ContentPage>

Make other pages inherit it, for example there is a SettingsPage page, we can do like this:

public partial class SettingsPage : CustomContentPage  
{  
	public SettingsPage ()  
	{  
		InitializeComponent ();  
	}  
}

and SettingsPage.xaml :

<?xml version="1.0" encoding="UTF-8"?>  
<tabbedpagewithnavigationpage:CustomContentPage  xmlns:tabbedpagewithnavigationpage="clr-namespace:TabbedPageWithNavigationPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TabbedPageWithNavigationPage.SettingsPage" IconImageSource="settings.png" Title="Settings">  
	<ContentPage.Content>  
		<StackLayout>  
			<Label Text="Settings go here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />  
		</StackLayout>  
	</ContentPage.Content>  
</tabbedpagewithnavigationpage:CustomContentPage>

Now the UI of page SettingsPage is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

YURNO 116 Reputation points

2021-06-22T03:36:48.423+00:00
Can you show me how to create SettingsPage on C# ?
Because I not understand create by XAML.
I think it's interesting.

Now I use like this

P.S. On CustomTabbedPage not have any code I just only create custom. And CustomNavigationPage too.

public class CustomTabbedPage : TabbedPage { public CustomTabbedPage() { } }

But this code have a problem about it create new TitleView every time have a new page.
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-06-22T04:06:05.41+00:00

Can you show me how to create SettingsPage on C# ?

SettingsPage is an example that I gave, which also similar to the SubPage in your code.
YURNO 116 Reputation points

2021-06-22T04:30:47.553+00:00

SettingsPage is an example that I gave, which also similar to the SubPage in your code.

That mean when we have a new page, it will create new TitleView every time right?
If yes, then your answer is half correct.
But it helped me a lot. I have to thank you very much.
Actually, I want to create it only once to reduce the slow loading of the page.
I want just create menu like a Shell.Flyout.
On my menu have many items and have a lot code on create menu.
That's why I only wanted to create it once.

P.S. If you have some idea to make it like that, please tell me.
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-06-22T05:58:30.693+00:00

I want just create menu like a Shell.Flyout.
On my menu have many items and have a lot code on create menu.

Actually, if you want to custom the TitleView, the method I used is one of the more common methods . The loading of TitleView basically doesn't affect the efficiency of the page.

In addition, do you mean flyout items by words Shell.Flyout? If yes, then the flyout items and the TitleView you mentioned are obviously two different UIs.

YURNO 116

I have more questions.
Can I customize TitleView overlay on MainContent?
Or if I customize the Renderer of NavigationPage or TabbedPage, can it be done?

Code

public CustomContentPage()  
{  
     AbsoluteLayout layout = new AbsoluteLayout { Padding = 5, BackgroundColor = Color.GreenYellow };  
     layout.Children.Add(new BoxView { Color = Color.Red }, new Rectangle(0, 0, 400, 10));  
     layout.Children.Add(new Image { Source = "profile.png" }, new Point(20, 20));  
     NavigationPage.SetTitleView(this, layout);  
}

Result

This is what I want

I want to create View overlay full screen to show my menu.

JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-06-23T06:06:30.7+00:00

Hi @YURNO , one problem, one thread. For the new problem ,you can create a new thread. We are all willing to help you. :)

Answer 2

Alessandro Caliaro 4,196

Yes, you can use TitleView

xamarin-forms-title-view-a-powerful-navigation-view

YURNO 116

I try do follow this link already.
But it will create every time have a new ContentPage.
Is it possible if we just create it once and apply it to all pages?

Sample-Code [I can't write all the code because of the character limit.]

    public class CustomContentPage : ContentPage  
    {  
        public CustomContentPage()  
        {  
            StackLayout stack = new StackLayout{Orientation = StackOrientation.Horizontal};  
            ImageButton left = new ImageButton {Source = "menu_left.png"};  
            Label title = new Label {Text = "Title"};  
            ImageButton right = new ImageButton {Source = "menu_right.png"};  
            stack.Children.Add(left);  
            stack.Children.Add(title);  
            stack.Children.Add(right);  
            NavigationPage.SetTitleView(this, stack);  
        }  
    }

Result

YURNO 116 Reputation points

2021-06-22T01:51:23.09+00:00

Or is it possible to use TabbedPageRenderer to show similar to NavigationBar?
Just idea only.

Share via

Can customize NavigationBar to my style?

1 additional answer

Your answer