Home > Back-end >  How create .Net Maui ContentPage using c# instead of xaml?
How create .Net Maui ContentPage using c# instead of xaml?

Time:05-30

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

How do I create a ContentPage using only c#?

CodePudding user response:

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.

  • Related