How to create reusable Components in .NET MAUI?

Question

I have just recently started using .Net MAUI. But now I'm wondering how to use a piece of code, e.g. a self-made navigation bar on all my pages, because it doesn't make sense to write the same code on all 10 pages. I like to know if there is a way to create a component that can be reused like in React or Angular?

PS: This question is not specific to a navigation bar but to the general reuse of code in .NET MAUI.

I have so far watched various videos & articles on this topic, however, it is more about custom controls and did not help me. Most articles corresponded to what was conveyed in this video. I also came across this article, but it didn't help me either.

Thanks for your help :)

Define a custom view, just the same as if you were only using it once. Inherit from `ContentView` or from any `Layout` class. Add `BindablePropertys` to it; that's what gives your view "parameters", so can re-use with customization in each use. Now you can use it, either in XAML or c# markup, just like any built-in UI view. That's all you need. Look for Xamarin Forms tutorials - Maui works the same. Find any tutorial that subclasses a UI class, and adds a BindableProperty to it, then shows XAML using that custom view with its custom property. — ToolmakerSteve, Dec 11 '22 at 03:05

Guangyu Bai - MSFT · Accepted Answer · 2022-12-13T04:28:51.583

First, you can create a new .xaml file named Name.xaml. You can write some codes in it.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CusComponents.Name">
    <ContentView.Content>

        <StackLayout Padding="10">


            <Label Text="Name" FontAttributes="Bold" />


            <Label Text="First name" />

            <Entry x:Name="FirstName" Placeholder="First name" />


            <Label Text="Last name" />

            <Entry x:Name="LastName" Placeholder="Last name" />


        </StackLayout>

    </ContentView.Content>
</ContentView>

Second, you can use it in the page you want like this. You need to add an xmlns reference to the top of the XML file– this is like a using statement in a C# file. Using the namespace structure for the sample project, this will be xmlns:custom_components="clr-namespace:CusComponents".

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

Here is the view of the code:

This is great, but what if you want to pass different bindings into different instances of this reusable element? — Steve W, Feb 10 '23 at 18:50
@Steve W - you have to create `BindableProperty` in `xaml.cs` of your reusable control https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/bindable-properties?view=net-maui-7.0#create-a-bindable-property — yurislav, Mar 01 '23 at 11:19

How to create reusable Components in .NET MAUI?

1 Answers1

Linked