![]() Another way is to use ToolbarItems, which is what we'll do for the buttons. One of them would be to add more elements to the HorizontalStackLayout inside our custom TitleView. MAUI gives us different options to add buttons to the navigation bar. Our TitleView now looks like this with a green background, as well as a custom font and title: We can set the custom TitleView like this by setting the Shell.TitleView property: Since we've already added our custom font, we can now use that in the Label by setting the FontFamily="Strande2". In this blog post, I'll keep it simple, so we'll just add a HorizontalStackLayout with a single Label. In a MAUI Shell app, you can set an entirely custom TitleView, which means that you can add all kinds of views into the TitleView, such as Layouts, Labels, Buttons, Images, and so on. "DarkGreen") or a hex code (such as "#01AB67"): Ĭool, we have a green background. In order to change the background color of the navigation bar, we can simply set the Shell.BackgroundColor to any valid value, either a named color (e.g. In a MAUI Shell app, we can access and control the style of the navigation bar in the root of any ContentPage. Let's start with the background color, then we'll customize the title and finally, we'll add some buttons. More on that a bit further down.įirst, it's time to start with the customization of the TitleView. We can now access the fonts by their name (excluding the file extension). Then, we just need to register the fonts in our MauiProgram.cs and we're good to go: public static class MauiProgramįonts.AddFont( "OpenSans-Regular.ttf", "OpenSansRegular") įonts.AddFont( "OpenSans-Semibold.ttf", "OpenSansSemibold") įonts.AddFont( "MaterialIconsOutlined-Regular.otf", "MaterialIconsOutlined-Regular") įonts.AddFont( "MaterialIcons-Regular.ttf", "MaterialIcons-Regular") įonts.AddFont( "Strande2.ttf", "Strande2") This means that adding the font files to the Fonts directory is all we need to do, they will be picked up as MauiFont files automatically. csproj file, where we will find the following: We can see why this works when we edit the. ![]() It's not necessary to set the Build Action for each file to MauiFont separately, because this happens automatically as long as the files are added to the Fonts directory. NET MAUI, we just need to add them to the Resources/Fonts/ directory of our MAUI app project and register them: I'm using MaterialIconsOutlined-Regular.otf for the icons (available in the Google Material Icons GitHub repository) and Strande2.ttf for the Title.Īdding font files couldn't be simpler in. Prerequisitesīefore we can start with the customization of the TitleView, we need to add some fonts. You can find the example code for this blog post in my MAUI Samples repository. The goal is to add a custom font, title and some buttons to it. In this blog post, I will show you how you can customize the navigation bar of a. This is important, because the title bar (or navigation bar, I will use the terms interchangeably here) plays a vital role in brand recognition since it is visible at the top of an app. Many mobile applications come with their own, custom title styling.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |