Dot Net MAUI notes

XAML Views

—

by

maui
in , , 
<?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"
             x:Class="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Let’s look closer to the each element and attribute in detail.

ScrollView : Provides a scrollable container for its child content. ScrollView, ensures that the content within can be scrolled vertically or horizontally if it exceeds the available screen space.

VerticalStackLayout : Arranges child elements in a vertical stack.

Attributes of VerticalStackLayout

  • Spacing="25": Sets the spacing between each child element to 25 units.
  • Padding="30,0": Adds a padding of 30 units on the left and right, and 0 units on the top and bottom.
    Note: Syntax is normally "left,top,right,bottom", but since only two values are provided, it applies to "left,right" and "top,bottom" respectively.
  • VerticalOptions="Center": Centers the stack layout vertically within the available space.

Image : Displays an image on the page.

Attributes of Image

  • Source="dotnet_bot.png": Specifies the image file to display.
    Note: The image should be included in your project’s resources.
  • SemanticProperties.Description: Provides a description for accessibility tools like screen readers.
  • HeightRequest="200": Requests a height of 200 units for the image.
  • HorizontalOptions="Center": Centers the image horizontally within its parent layout.

First Label

Label: Displays text on the page.

Attributes of First Label

  • Text="Hello, World!": Sets the text to display.
  • SemanticProperties.HeadingLevel="Level1": Marks this label as a heading level 1 for accessibility.
  • FontSize="32": Sets the font size to 32 units.
  • HorizontalOptions="Center": Centers the label horizontally.

Second Label

Attributes of Second Label

  • Text="Welcome to .NET Multi-platform App UI": Sets the text to display.
  • SemanticProperties.HeadingLevel="Level2": Marks this label as a heading level 2.
  • SemanticProperties.Description: Provides a description for screen readers.
  • FontSize="18": Sets the font size to 18 units.
  • HorizontalOptions="Center": Centers the label horizontally.

Button

Provides an interactive button that users can click.

Attibutes of Button

  • x:Name="CounterBtn": Names the button CounterBtn.
    Explanation: “x:Name” is used for, giving a name to the button and with same name you can reach this button in code behind.
  • Text="Click me": Sets the text displayed on the button.
  • SemanticProperties.Hint: Provides a hint to screen readers about the button’s function.
  • Clicked="OnCounterClicked": Event handler that is invoked when the button is clicked.
    Note: The method “OnCounterClicked" should be defined in the code behind (MainPage.xaml.cs).
  • HorizontalOptions="Center": Centers the button horizontally.

Example of connecting code behind 

private void OnCounterClicked(object sender, EventArgs e)
    {
        //Code goes here
    }