How to use Field Modifiers in MAUI

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’m going to show you how to use Field Modifiers in MAUI.

Let’s Start

To access the other page xaml elements we need to set one of the below value to x:FieldModifier :

Private – Access only within the body of the class in which it is declared.
Public – Accessible for all classes.
Protected – Accessible within its class and by derived class instances.
Internal – Accessible only within types in the same assembly.
NotPublic – Identical to Internal.

If the value of the x:FieldModifier is not set, the default value will be Private.

x:FieldModifier cannot be used to specify the access level of a xaml class.

The following conditions must be met for x:FieldModifier attribute :

The top-level XAML element must be a valid x:Class.
Current xaml element must specified with x:Name.

I have created a sample demo project to understand better. So let’s deep dive into this.

As in a sample demo project I have created a CommonToolbarView.xaml view and this is used in MainPage.xaml and SecondPage.xaml to set the title bar.

1 – Create a CommonToolbarView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    x:Class="MAUIFieldModifiersSample.CommonToolbarView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Padding="5,0,5,0"
        BackgroundColor="{StaticResource Secondary}"
        ColumnDefinitions="*,*,*"
        HeightRequest="55"
        HorizontalOptions="FillAndExpand">
        <Image
            x:Name="ImgToolbarBack"
            Grid.Column="0"
            x:FieldModifier="Public"
            HeightRequest="35"
            HorizontalOptions="Start"
            Source="back.png"
            VerticalOptions="CenterAndExpand"
            WidthRequest="35">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnBackClicked" />
            </Image.GestureRecognizers>
        </Image>

        <Label
            x:Name="LblToolbarTitle"
            Grid.Column="1"
            x:FieldModifier="Public"
            FontAttributes="Bold"
            FontSize="Large"
            HorizontalOptions="CenterAndExpand"
            HorizontalTextAlignment="Center"
            VerticalOptions="Center" />
    </Grid>
</ContentView>

As in the above CommonToolbarView.xaml I took Image for the back button and Label for setting the page title.
And I set x:FieldModifier as ‘Public‘ for both image and label to access within MainPage.xaml.cs and SecondPage.xaml.cs.

2 – Create a MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MAUIFieldModifiersSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolbar="clr-namespace:MAUIFieldModifiersSample">

    <ScrollView>
        <VerticalStackLayout Spacing="20">

            <toolbar:CommonToolbarView
                x:Name="CommonToolbar"
                x:FieldModifier="Private"
                HorizontalOptions="FillAndExpand" />

            <Image
                x:Name="ImgDotNet"
                Margin="0,30,0,0"
                x:FieldModifier="Protected"
                HeightRequest="200"
                HorizontalOptions="Center"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                Source="dotnet_bot.png" />

            <Button
                x:Name="CounterBtn"
                BackgroundColor="{StaticResource Secondary}"
                Clicked="NavigateToSecondPage"
                HorizontalOptions="Center"
                SemanticProperties.Hint="Counts the number of times you click"
                Text="Goto Second Page"
                TextColor="Black" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

As in the above MainPage.xaml I am accessing CommonToolbarView.xaml and setting its x:FieldModifier to ‘Private‘ so that, this will be only accessible in MainPage.xaml.cs.
And I set x:FieldModifier as ‘Protected‘ for image to access it within the same and derived class (MainPage2).

3 – Create a MainPage.xaml.cs

namespace MAUIFieldModifiersSample;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Accessing CommonToolbarView Elements
        CommonToolbar.LblToolbarTitle.Text = "Main Page";
        CommonToolbar.ImgToolbarBack.IsVisible = false;
    }

    private async void NavigateToSecondPage(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new SecondPage());
    }
}

public partial class MainPage2 : MainPage
{
    public MainPage2()
    {
        // Accessing MainPage Image
        ImgDotNet.HeightRequest = 100;
        ImgDotNet.WidthRequest = 100;
    }
}

As in the above MainPage.xaml.cs I am using CommonToolbar to access the image and label of CommonToolbarView.xaml view.
As x:FieldModifier of CommonToolbar marked as ‘Private‘ so this can only be accessible to this MainPage.xaml.cs.
Setting the toolbar title using LblToolbarTitle.Text property.
Hiding the toolbar back button using ImgToolbarBack.IsVisible property.
And in the constructor of MainPage2, I am accessing the image of MainPage.xaml. As this image setted x:FieldModifier as ‘Protected‘ that’s the reason I can access it within MainPage.xaml.cs and the derived MainPage2 class.

4 – Create a SecondPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MAUIFieldModifiersSample.SecondPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolbar="clr-namespace:MAUIFieldModifiersSample">

    <VerticalStackLayout Spacing="20">

        <toolbar:CommonToolbarView
            x:Name="CommonToolbar"
            x:FieldModifier="Private"
            HorizontalOptions="FillAndExpand" />

        <Button
            x:Name="CounterBtn"
            BackgroundColor="{StaticResource Secondary}"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center"
            SemanticProperties.Hint="Counts the number of times you click"
            Text="Click me"
            TextColor="Black" />

    </VerticalStackLayout>
</ContentPage>

As in the above SecondPage.xaml I am accessing CommonToolbarView.xaml and setting its x:FieldModifier to ‘Private‘ so that, this will be only accessible in SecondPage.xaml.cs.

5 – Create a SecondPage.xaml.cs

namespace MAUIFieldModifiersSample;

public partial class SecondPage : ContentPage
{
    int count = 0;

    public SecondPage()
    {
        InitializeComponent();

        // Accessing CommonToolbarView Elements
        CommonToolbar.LblToolbarTitle.Text = "Second Page";
        CommonToolbar.ImgToolbarBack.IsVisible = true;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}

As in the above SecondPage.xaml.cs I am using CommonToolbar to access the image and label of CommonToolbarView.xaml view.
As x:FieldModifier of CommonToolbar marked as ‘Private‘ so this can only be accessible to this SecondPage.xaml.cs.
Setting the toolbar title using LblToolbarTitle.Text property.
Showing the toolbar back button using ImgToolbarBack.IsVisible property.