Using Visual Basic.Net along with .Net Maui (XAML)

Welcome to Visual Basic with .Net MAUI for XAML. Earlier we posted an article on how to add a .Net MAUI Class Library in Visual Basic .Net along side a .Net MAUI Application project. Now we are going to expand on this project with Visual Basic .Net with XAML.

Why use XAML versus a base class? That is a good question, there are both pros and cons to each of these. They are listed below.

XAML:

• Pros:
• XAML pages allow the listing of elements or controls on a page that is both visible and easy to edit.
• Encapsulating elements or controls inside each other is more robust.
• Cons:
• There are no form designers for .Net MAUI as of the date of this article.
• Developers will need a mental picture of the page as they design.

Base Class:

• Pros:
• All elements or controls are instantiated and understood in their perspective modules.
• All element's or control's properties can be viewed and controlled in detail during design time.
• Event handling can be written in block if need be.
• Cons:
• Length of written code is expanded and may seem cumbersome.
• May increase time of small changes, depending on development.

There are many opinions on how one should write Pages in .Net MAUI. Either way a developer would choose, they take on the of challenges of that development style.

This article will explain in detail, like the first article, on how to add an XAML page to the .Net MAUI Class Library, written in Visual Basic .Net, and to modify their respective files. This will allow you to understand the process. In the next article, similar to a previous article, the process will be more efficient.

Follow these steps below to successfully add an XAML page to your .Net MAUI Class Library project.

1. Right click the .Net MAUI project.
2. Click Add > New Item...

3. Scroll down and select .Net MAUI ContentPage (XAML) .

4. Click Add.

5. Right click NewPage1.xaml and click Copy.

6. Right click the .Net MAUI Class Library project and click Paste.

7. Right click NewPage1.xaml.cs under the .Net MAUI Class Library project and click Open Containing Folder.

8. Rename NewPag1.xaml.cs to NewPage1.xaml.vb.

9. Close File Explorer and return to the .Net MAUI project.

10. Right click NewPage1.xaml.cs in your .Net MAUI Class Library project and click Remove.

Normally the conversion of the file would be to convert the C# code to Visual Basic .Net, This is not the case, there are more syntax needed than what is inside that class.

11. Double click the NewPage1.xaml.cs file under the .Net MAUI Application project to open it up.

12. Highlight the InitializeComponent(); line and hit Shift + F2.

The file that we need will be auto generated.

13. Copy all the code minus comments and convert this code in your C# to VB converter.

14. Close the code page and open NewPage1.xaml.vb and paste.

Starting from top to bottom we will make the appropriate changes.

15. Change the name of the .Net Maui Application or Solution to your .Net MAUI Class Library name.

16. Change the name of the Global. .Net Maui Application or Solution to your .Net MAUI Class Library name.

17. Change the Namespace to your .Net MAUI Class Library name.

18. Remove these lines:

<System.CodeDom.Compiler.GeneratedCode("Microsoft.Maui.Controls.SourceGen", "1.0.0.0")>

#If NET5_0_OR_GREATER Then

#End If

19. Remove the word Partial from the Partial Public Class NewPage1

20. Change Private Sub InitializeComponent() to Public Sub New().

21. Open the NewPage.xaml file under the .Net MAUI Class Library project.

22. Change the .Net MAUI App or Solution name to the .Net MAUI Class Library name.

23. Open App.xaml.cs under the .Net MAUI Application project.

24. Comment out any MainPage = statements add the following statement.

MainPage = new <Class Library name>.<Class name>.NewPage1();

e.g. MainPage = new MauiLibTest.MauiLibTest.NewPage1();

25. Run the project to see if the XAML file has been added successfully.

The following steps will explain how .Net MAUI adds controls from an XAML page.

26. Open NewPage1.xaml under the .Net MAUI Application project.

27. Add the line x:Name="lblTest" under <Label

Note: This line will expose the element or control to the appropriate class.

28. Open NewPage1.xmal.cs and add the line lblTest.Text = "Test"; under InitializeComponent();.

Note: This will expose the process of adding controls or elements in .Net MAUI.

29. Highlight lblTest and press Shift + F2.

Note: A new page will open with auto generated code. There are 2 lines from this page that are needed.

These are the following 2 lines:

private global::Microsoft.Maui.Controls.Label lblTest;

lblTest = global::Microsoft.Maui.Controls.NameScopeExtensions.FindByName<global::Microsoft.Maui.Controls.Label>(this, "lblTest");

30. Convert the C# code to Visual Basic .Net.

Converted Code:

Private lblTest As Microsoft.Maui.Controls.Label

lblTest = Microsoft.Maui.Controls.NameScopeExtensions.FindByName(Of Microsoft.Maui.Controls.Label)(Me, "lblTest")

31. Close the auto generated page and open the NewPage1.xaml.vb.

32. Paste the line Private lblTest As Microsoft.Maui.Controls.Label above Public Sub New()

33. Paste the line

lblTest = Microsoft.Maui.Controls.NameScopeExtensions.FindByName(Of Microsoft.Maui.Controls.Label)(Me, "lblTest")

after

Microsoft.Maui.Controls.Xaml.Extensions.LoadFromXaml(Me, GetType(NewPage1))

under Public Sub New()

Explanation: .Net MAUI Application auto generates these lines during development to have access their respective controls or elements in the XAML file. The .Net MAUI Class Library does not have this feature. For the future you will need to add two lines for each XAML control or element if you need to have access to it.

34. Open NewPage.xaml under the .Net MAUI Class Library and add the line x:Name="lblTest" under <Label

35. Open the NewPage1.xaml.vb and add a line under Public Sub New() to change the Text property of the Label to "Hello World".

36. Run the project and see if the Text was changed successfully.

Let's have some fun.

Add these lines to the XAML page:

    <Entry

      x:Name="entTest"

      HorizontalOptions="Center"

      WidthRequest="200" />   

    <Button

      x:Name="btnTest"

      Text="Change Caption"

      HorizontalOptions="Center"

      WidthRequest="200"

      Clicked="btnTest_Click" />

Add the appropriate lines to the xaml.vb file to have access to these controls or elements.

Private entTest As Microsoft.Maui.Controls.Entry

Private btnTest As Microsoft.Maui.Controls.Button

entTest = Microsoft.Maui.Controls.NameScopeExtensions.FindByName(Of Microsoft.Maui.Controls.Entry)(Me, "entTest")

btnTest = Microsoft.Maui.Controls.NameScopeExtensions.FindByName(Of Microsoft.Maui.Controls.Button)(Me, "btnTest")

Add a sub routine to have access to the Click Event being called from the XAML page.

Add some code inside the sub routine to change the text of the label and clear the entry control.

Private Sub btnTest_Click(ByVal sender As Object, ByVal e As EventArgs)

lblTest.Text = entTest.Text

entTest.Text = String.Empty

End Sub

Run the project and type anything in the Entry box and click the button.

Conclusion:

The .Net MAUI Application is a robust and intuitive development platform, developed for those that write in C#. For those that develop in Visual Basic .Net it is still possible to access these features and write a rich multi-platform application. These steps provided are lengthy and cumbersome but explains how XAML can be used in the .Net MAUI Class Library. The steps needed to communicate to the control or element on the XAML page may be worth the time to have access and to add the XAML page to future projects.