{"id":656,"date":"2023-01-08T15:36:39","date_gmt":"2023-01-08T15:36:39","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=656"},"modified":"2023-01-18T16:13:44","modified_gmt":"2023-01-18T16:13:44","slug":"field-modifiers-in-maui","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/08\/field-modifiers-in-maui\/","title":{"rendered":"How to use Field Modifiers in MAUI"},"content":{"rendered":"\n<p>Field Modifiers in MAUI is an attribute which is used for specifying the access level of xaml elements. This is similar to <strong><em>x:FieldModifier<\/em><\/strong> in xamarin forms. The valid values of <strong><em>x:FieldModifier<\/em><\/strong> are <strong><em>Private<\/em><\/strong>, <strong><em>Public<\/em><\/strong>, <strong><em>Protected<\/em><\/strong>, <strong><em>Internal<\/em><\/strong> and <strong><em>NotPublic<\/em><\/strong>. So In this article, I\u2019m going to show you how to use Field Modifiers in MAUI.<\/p>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start<\/strong><\/p>\n\n\n\n<p>To access the other page xaml elements we need to set one of the below value to <strong>x:FieldModifier<\/strong> :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>Private<\/em><\/strong> &#8211; Access only within the body of the class in which it is declared. <\/li>\n\n\n\n<li><strong><em>Public<\/em><\/strong> &#8211; Accessible for all classes.<\/li>\n\n\n\n<li><strong><em>Protected<\/em><\/strong> &#8211; Accessible within its class and by derived class instances.<\/li>\n\n\n\n<li><strong><em>Internal<\/em><\/strong> &#8211; Accessible only within types in the same assembly.<\/li>\n\n\n\n<li><strong><em>NotPublic<\/em><\/strong> &#8211; Identical to Internal. <\/li>\n<\/ul>\n\n\n\n<p>If the value of the <strong>x:FieldModifier<\/strong> is not set, the default value will be <strong>Private<\/strong>.<\/p>\n\n\n\n<p><strong>x:FieldModifier<\/strong>&nbsp;cannot be used to specify the access level of a xaml class.<\/p>\n\n\n\n<p>The following conditions must be met for <strong>x:FieldModifier<\/strong> attribute :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The top-level XAML element must be a valid <strong>x:Class<\/strong>.<\/li>\n\n\n\n<li>Current xaml element must specified with <strong>x:Name<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>I have created a sample demo project to understand better. So let&#8217;s deep dive into this.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in a sample demo project I have created a <strong>CommonToolbarView.xaml<\/strong> view and this is used in <strong>MainPage.xaml<\/strong> and <strong>SecondPage.xaml<\/strong> to set the title bar.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Create a CommonToolbarView.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;ContentView\n    x:Class=\"MAUIFieldModifiersSample.CommonToolbarView\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\">\n    &lt;Grid\n        Padding=\"5,0,5,0\"\n        BackgroundColor=\"{StaticResource Secondary}\"\n        ColumnDefinitions=\"*,*,*\"\n        HeightRequest=\"55\"\n        HorizontalOptions=\"FillAndExpand\">\n        &lt;Image\n            x:Name=\"ImgToolbarBack\"\n            Grid.Column=\"0\"\n            x:FieldModifier=\"Public\"\n            HeightRequest=\"35\"\n            HorizontalOptions=\"Start\"\n            Source=\"back.png\"\n            VerticalOptions=\"CenterAndExpand\"\n            WidthRequest=\"35\">\n            &lt;Image.GestureRecognizers>\n                &lt;TapGestureRecognizer Tapped=\"OnBackClicked\" \/>\n            &lt;\/Image.GestureRecognizers>\n        &lt;\/Image>\n\n        &lt;Label\n            x:Name=\"LblToolbarTitle\"\n            Grid.Column=\"1\"\n            x:FieldModifier=\"Public\"\n            FontAttributes=\"Bold\"\n            FontSize=\"Large\"\n            HorizontalOptions=\"CenterAndExpand\"\n            HorizontalTextAlignment=\"Center\"\n            VerticalOptions=\"Center\" \/>\n    &lt;\/Grid>\n&lt;\/ContentView><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>CommonToolbarView.xaml <\/strong>I took Image for the back button and Label for setting the page title.<\/li>\n\n\n\n<li>And I set <strong>x:FieldModifier<\/strong> as &#8216;<strong>Public<\/strong>&#8216; for both image and label to access within <strong>MainPage.xaml.cs<\/strong> and <strong>SecondPage.xaml.cs<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Create a 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=\"MAUIFieldModifiersSample.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:toolbar=\"clr-namespace:MAUIFieldModifiersSample\">\n\n    &lt;ScrollView>\n        &lt;VerticalStackLayout Spacing=\"20\">\n\n            &lt;toolbar:CommonToolbarView\n                x:Name=\"CommonToolbar\"\n                x:FieldModifier=\"Private\"\n                HorizontalOptions=\"FillAndExpand\" \/>\n\n            &lt;Image\n                x:Name=\"ImgDotNet\"\n                Margin=\"0,30,0,0\"\n                x:FieldModifier=\"Protected\"\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;Button\n                x:Name=\"CounterBtn\"\n                BackgroundColor=\"{StaticResource Secondary}\"\n                Clicked=\"NavigateToSecondPage\"\n                HorizontalOptions=\"Center\"\n                SemanticProperties.Hint=\"Counts the number of times you click\"\n                Text=\"Goto Second Page\"\n                TextColor=\"Black\" \/>\n\n        &lt;\/VerticalStackLayout>\n    &lt;\/ScrollView>\n\n&lt;\/ContentPage><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>MainPage.xaml<\/strong> I am accessing <strong>CommonToolbarView.xaml<\/strong> and setting its <strong>x:FieldModifier<\/strong> to &#8216;<strong>Private<\/strong>&#8216; so that, this will be only accessible in <strong>MainPage.xaml.cs<\/strong>.<\/li>\n\n\n\n<li>And I set <strong>x:FieldModifier<\/strong> as &#8216;<strong>Protected<\/strong>&#8216; for image to access it within the same and derived class (<strong>MainPage2<\/strong>).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211; Create a MainPage.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=\"\">namespace MAUIFieldModifiersSample;\n\npublic partial class MainPage : ContentPage\n{\n    public MainPage()\n    {\n        InitializeComponent();\n\n        \/\/ Accessing CommonToolbarView Elements\n        CommonToolbar.LblToolbarTitle.Text = \"Main Page\";\n        CommonToolbar.ImgToolbarBack.IsVisible = false;\n    }\n\n    private async void NavigateToSecondPage(object sender, EventArgs e)\n    {\n        await Navigation.PushAsync(new SecondPage());\n    }\n}\n\npublic partial class MainPage2 : MainPage\n{\n    public MainPage2()\n    {\n        \/\/ Accessing MainPage Image\n        ImgDotNet.HeightRequest = 100;\n        ImgDotNet.WidthRequest = 100;\n    }\n}\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>MainPage.xaml.cs<\/strong> I am using <strong>CommonToolbar<\/strong> to access the image and label of <strong>CommonToolbarView.xaml<\/strong> view.<\/li>\n\n\n\n<li>As <strong>x:FieldModifier<\/strong> of <strong>CommonToolbar<\/strong> marked as &#8216;<strong>Private<\/strong>&#8216; so this can only be accessible to this <strong>MainPage.xaml.cs<\/strong>.<\/li>\n\n\n\n<li>Setting the toolbar title using <strong>LblToolbarTitle.Text<\/strong> property.<\/li>\n\n\n\n<li>Hiding the toolbar back button using <strong>ImgToolbarBack.IsVisible<\/strong> property.<\/li>\n\n\n\n<li>And in the constructor of <strong>MainPage2<\/strong>, I am accessing the image of <strong>MainPage.xaml<\/strong>. As this image setted <strong>x:FieldModifier<\/strong> as &#8216;<strong>Protected<\/strong>&#8216; that&#8217;s the reason I can access it within <strong>MainPage.xaml.cs<\/strong> and the derived <strong>MainPage2<\/strong> class.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4 &#8211; Create a 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=\"MAUIFieldModifiersSample.SecondPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:toolbar=\"clr-namespace:MAUIFieldModifiersSample\">\n\n    &lt;VerticalStackLayout Spacing=\"20\">\n\n        &lt;toolbar:CommonToolbarView\n            x:Name=\"CommonToolbar\"\n            x:FieldModifier=\"Private\"\n            HorizontalOptions=\"FillAndExpand\" \/>\n\n        &lt;Button\n            x:Name=\"CounterBtn\"\n            BackgroundColor=\"{StaticResource Secondary}\"\n            Clicked=\"OnCounterClicked\"\n            HorizontalOptions=\"Center\"\n            SemanticProperties.Hint=\"Counts the number of times you click\"\n            Text=\"Click me\"\n            TextColor=\"Black\" \/>\n\n    &lt;\/VerticalStackLayout>\n&lt;\/ContentPage><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>SecondPage.xaml<\/strong> I am accessing <strong>CommonToolbarView.xaml<\/strong> and setting its <strong>x:FieldModifier<\/strong> to &#8216;<strong>Private<\/strong>&#8216; so that, this will be only accessible in <strong><strong>SecondPage<\/strong>.xaml.cs<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>5 &#8211; Create a SecondPage.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=\"\">namespace MAUIFieldModifiersSample;\n\npublic partial class SecondPage : ContentPage\n{\n    int count = 0;\n\n    public SecondPage()\n    {\n        InitializeComponent();\n\n        \/\/ Accessing CommonToolbarView Elements\n        CommonToolbar.LblToolbarTitle.Text = \"Second Page\";\n        CommonToolbar.ImgToolbarBack.IsVisible = true;\n    }\n\n    private void OnCounterClicked(object sender, EventArgs e)\n    {\n        count++;\n\n        if (count == 1)\n            CounterBtn.Text = $\"Clicked {count} time\";\n        else\n            CounterBtn.Text = $\"Clicked {count} times\";\n\n        SemanticScreenReader.Announce(CounterBtn.Text);\n    }\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong><strong>SecondPage<\/strong>.xaml.cs<\/strong> I am using <strong>CommonToolbar<\/strong> to access the image and label of <strong>CommonToolbarView.xaml<\/strong> view.<\/li>\n\n\n\n<li>As <strong>x:FieldModifier<\/strong> of <strong>CommonToolbar<\/strong> marked as &#8216;<strong>Private<\/strong>&#8216; so this can only be accessible to this <strong><strong>SecondPage<\/strong>.xaml.cs<\/strong>.<\/li>\n\n\n\n<li>Setting the toolbar title using <strong>LblToolbarTitle.Text<\/strong> property.<\/li>\n\n\n\n<li>Showing the toolbar back button using <strong>ImgToolbarBack.IsVisible<\/strong> property.<\/li>\n<\/ul>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code&nbsp;<strong><a href=\"https:\/\/github.com\/Alam-Ashraf\/MAUIFieldModifiersSample\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/strong><\/p>\n\n\n\n<p>Happy Coding! <strong>\ud83d\ude00\u00a0<\/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\/12\/21\/uniformitemslayout-in-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-1024x548.png\" alt=\"UniformItemsLayout in MAUI\" class=\"wp-image-522\" width=\"512\" height=\"274\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-1024x548.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-300x161.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-768x411.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout-850x455.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/MAUIUniformItemsLayout.png 1390w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use UniformItemsLayout in MAUI<\/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\/2022\/12\/07\/docklayout-in-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI-1024x589.png\" alt=\"DockLayout in MAUI\" class=\"wp-image-445\" width=\"512\" height=\"295\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI-1024x589.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI-300x172.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI-768x442.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI-850x489.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/DockLayoutInMAUI.png 1294w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use DockLayout in MAUI<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Field Modifiers in MAUI is an attribute which is used for specifying the access level of xaml elements. This is similar to x:FieldModifier in xamarin forms. The valid values of x:FieldModifier are Private, Public, Protected, Internal and NotPublic. So In this article, I\u2019m going to show you how to use Field Modifiers in MAUI. Let\u2019s&#8230;<\/p>\n","protected":false},"author":1,"featured_media":666,"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":[50,51,52],"class_list":["post-656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","tag-field-modifier","tag-maui-field-modifier","tag-xaml-field-modifier"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/656","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=656"}],"version-history":[{"count":11,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/656\/revisions"}],"predecessor-version":[{"id":740,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/656\/revisions\/740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/666"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}