Search code examples
c#xamlmaui

How create .Net Maui ContentPage using c# instead of xaml?


The .Net Maui ContentPage doc gives a XAML example. But no c# example.

How do I create a ContentPage using only c#?


Solution

  • tl;dr

    • The concept is "c# markup".
    • Getting started: Right click on project-> Add -> New Item -> .NET MAUI-> .NET MAUI ContentPage (C#) or .NET MAUI ContentView (C#).
    • If a Maui doc doesn't (yet) have the info you need, google xamarin forms SomeUIElement class for the SomeUIElement API.

    Maui "API" docs aren't there yet (currently there is only a page giving "higher-level" explanation of each class), so more information can be found by searching for the corresponding Xamarin Forms class.
    Google xamarin forms contentpage class to find:

    Xamarin.Forms / ContentPage Class.

    There, we see c# example:

    using System;
    using Xamarin.Forms;
    
    namespace ContentPageExample
    {
        public class App : Application
        {
            public static Page GetMainPage ()
            {    
                return new ContentPage { 
                    Content = new Label {
                        Text = "Hello, Forms!",
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        HorizontalOptions = LayoutOptions.CenterAndExpand,
                    },
                };
            }
    
            public App ()
            {
                MainPage = GetMainPage();
            }
        }
    }
    

    The App details may be slightly different for Maui; the part of this code we care about is:

                return new ContentPage { 
                    Content = new Label {
                        Text = "Hello, Forms!",
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        HorizontalOptions = LayoutOptions.CenterAndExpand,
                    },
                };
    

    This works as-is in Maui. (Compiler warns that LayoutOptions.CenterAndExpand is deprecated; but discussing that is beyond scope of this answer.)


    REUSABLE VIEW

    If you want to refer to a UI element from elsewhere in xaml or code, define a subclass of an existing UI element.

    Thanks to Paramjit for pointing out that the first step is to Add the appropriate item to project. For ContentPage, that is:

    Right click on project-> Add -> New Item -> .NET MAUI-> .NET MAUI ContentPage (C#)

    For ContentView (as below), that step is:

    Right click on project-> Add -> New Item -> .NET MAUI-> .NET MAUI ContentView (C#)


    Source file MyContentView.cs:

    namespace MyViews
    {
        public class MyContentView : ContentView
        {
            public MyContentView {
                //NO "InitializeComponent()" because doing it all in c#.
    
                Content = new Label {
                    Text = "Hello, Maui!"
                }
            }
        }
    }
    

    Usage in XAML:

    <SomeClass ...
        xmlns:myviews="clr-namespace:MyViews"
        ...>
        ...
        <myviews:MyContentView ... />
    </SomeClass>
    

    Usage in c# as part of c# markup:

    using MyViews;
    
        ...
        var page = new ContentPage {
            Content = new MyContentView()
        }
    

    ADVANCED

    Subclassing ContentView is one way to make a "custom control" in Maui.

    • To define custom properties, read about "custom views" and "BindableProperties". (I don't have specific links to recommend at this time. Feel free to add such links as comments.)

    • A more advanced way is to create a custom handler.
      See Creating a .NET MAUI Maps Control.


    MORE INFO

    Defining UI elements in c# is referred to as "c# markup".

    See Introducing C# Markup for Xamarin.Forms.

    And Xamarin Community Toolkit C# Markup. NOTE: The Nuget mentioned there is no longer required.