{"id":786,"date":"2023-01-26T18:22:01","date_gmt":"2023-01-26T18:22:01","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=786"},"modified":"2023-01-26T18:22:02","modified_gmt":"2023-01-26T18:22:02","slug":"ios-large-page-title-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/26\/ios-large-page-title-in-maui\/","title":{"rendered":"How to set iOS large page title in MAUI"},"content":{"rendered":"\n<p>.Net MAUI enables us to set the iOS large page title for devices that use iOS 11 or greater. A large page title is left aligned and uses a larger font and when the user scrolls the content up then the title returns to the center of the navigation bar. So In this article, I\u2019m going to show you how to set iOS large page title in MAUI.<\/p>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Enable large page title for iOS in App.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using Microsoft.Maui.Controls.PlatformConfiguration;\nusing Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;\nusing Application = Microsoft.Maui.Controls.Application;\n\nnamespace MAUIiOSLargePageTitleDemo;\n\npublic partial class App : Application\n{\n    public App()\n    {\n        InitializeComponent();\n\n        \/\/ Enable Large Title for iOS\n        var navigationPage = new Microsoft.Maui.Controls.NavigationPage(new MainPage());\n        navigationPage.On&lt;iOS>().SetPrefersLargeTitles(true);\n        MainPage = navigationPage;\n    }\n}<\/pre>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above <strong>App.xaml.cs<\/strong> file I have enabled the large page title by calling <strong>SetPrefersLargeTitles()<\/strong> method to the navigation page.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And now it applies to all the pages in the navigation stack.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And This behavior can be overridden on each page by setting the <strong>ios:Page.LargeTitleDisplay<\/strong> attached property.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We can also enable this in xaml using <strong>NavigationPage.PrefersLargeTitles<\/strong> attached property as follows :<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;NavigationPage xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n                xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n                xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n                ios:NavigationPage.PrefersLargeTitles=\"true\">\n&lt;\/NavigationPage><\/pre>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211;  Apply large page title to the MainPage.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;ContentPage\n    x:Class=\"MAUIiOSLargePageTitleDemo.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n    Title=\"Main Page\"\n    ios:Page.LargeTitleDisplay=\"Always\">\n\n    &lt;ScrollView>\n        &lt;VerticalStackLayout\n            Padding=\"30,0\"\n            Spacing=\"25\"\n            VerticalOptions=\"Center\">\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n            &lt;Label\n                FontSize=\"18\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\n                SemanticProperties.HeadingLevel=\"Level2\"\n                Text=\"Welcome to .NET Multi-platform App UI\" \/>\n\n\n            &lt;Button\n                x:Name=\"CounterBtn\"\n                Clicked=\"OnCounterClicked\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Hint=\"Counts the number of times you click\"\n                Text=\"Click me\" \/>\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n        &lt;\/VerticalStackLayout>\n    &lt;\/ScrollView>\n\n&lt;\/ContentPage><\/pre>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>MainPage.xaml<\/strong> I have set the large page title by setting the <strong>ios:Page.LargeTitleDisplay<\/strong> attached property.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We can also set the large page title using c# as well :<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">On&lt;iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never);<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The values of <strong>ios:Page.LargeTitleDisplay<\/strong> will be :<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Always<\/strong> <strong>:<\/strong> Force navigation bar to use large title.<br><strong>Automatic : <\/strong>Use the same previous page navigation bar style (large or small).<br><strong>Never : <\/strong>Force navigation bar to use default (small) title.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211;  Apply large page title to the SecondPage.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;ContentPage\n    x:Class=\"MAUIiOSLargePageTitleDemo.SecondPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n    Title=\"Second Page\"\n    ios:Page.LargeTitleDisplay=\"Automatic\">\n\n    &lt;ScrollView>\n        &lt;VerticalStackLayout\n            Padding=\"30,0\"\n            Spacing=\"25\"\n            VerticalOptions=\"Center\">\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n            &lt;Label\n                FontSize=\"18\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Welcome to dot net Multi platform App U I\"\n                SemanticProperties.HeadingLevel=\"Level2\"\n                Text=\"Welcome to .NET Multi-platform App UI\" \/>\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n            &lt;Image\n                HeightRequest=\"200\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Description=\"Cute dot net bot waving hi to you!\"\n                Source=\"dotnet_bot.png\" \/>\n\n            &lt;Label\n                FontSize=\"32\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.HeadingLevel=\"Level1\"\n                Text=\"Hello, World!\" \/>\n\n        &lt;\/VerticalStackLayout>\n    &lt;\/ScrollView>\n&lt;\/ContentPage><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Result <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" controls src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/iOSLargePageTitle.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code <a href=\"https:\/\/github.com\/Alam-Ashraf\/MAUIiOSLargePageTitleDemo\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a><strong>.<\/strong><\/p>\n\n\n\n<p>Happy Coding!<strong> \ud83d\ude00<\/strong><\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>You may also like<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/22\/collectionview-as-a-griditemlayout\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid-1024x1012.png\" alt=\"Collectionview as a GridItemLayout\" class=\"wp-image-261\" width=\"512\" height=\"506\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid-1024x1012.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid-300x297.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid-768x759.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid-850x840.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/CollectionViewUsedAsGrid.png 1230w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use CollectionView as a GridItemLayout in Xamarin Forms<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/22\/change-statusbar-color-in-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor-1024x748.png\" alt=\"Change StatusBar Color\" class=\"wp-image-782\" width=\"512\" height=\"374\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor-1024x748.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor-300x219.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor-768x561.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor-850x621.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/StatusBarColor.png 1430w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to change StatusBar color in MAUI<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>.Net MAUI enables us to set the iOS large page title for devices that use iOS 11 or greater. A large page title is left aligned and uses a larger font and when the user scrolls the content up then the title returns to the center of the navigation bar. So In this article, I\u2019m&#8230;<\/p>\n","protected":false},"author":1,"featured_media":796,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[63,64],"class_list":["post-786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-ios-large-page-title","tag-ios-large-page-title-in-maui"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/comments?post=786"}],"version-history":[{"count":9,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/786\/revisions"}],"predecessor-version":[{"id":797,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/786\/revisions\/797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/796"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}